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

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

#navi .caption-wrap .item-label {
    color: #fff;
}

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #000000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #f5f5f5; /* 背景色 */
padding-top:30px; /* 文字と上部の間隔 */
padding-left:15px;/* 文字と左線の間隔 */
padding-bottom:30px;/* 文字と下部の間隔 */
border-left: solid 10px #000000; /* 左側に実線・色*/
}

/* H3 */
.entry-content h3{
color: #000000; /* 文字色 */
font-size: 1.3em; /* 文字サイズ */
background-color: #ffffff;/* 背景色 */
padding: 10px;
border-left: solid 10px #000000; /* 左側に実線・色*/
}

/* サイドバーのスクロール */
.widget_toc{
	overflow-y:scroll;/*縦方向スクロールを設置*/
	max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}
/* スクロールバーのスタイルを調整 */
::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラックの背景色 */
}

::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーのつまみの色 */
}

::-webkit-scrollbar-thumb:hover {
    background: #999; /* スクロールバーのつまみのホバー時の色 */
}
/*トップページカスマイズ***************************************/
.toppage{
padding:3em 1em;/*内側余白調整*/
}

/*見出し*/
div.title{
       margin:2rem 0;/*外側余白*/
	padding:0;/*内側余白*/
	text-align:center;/*中央寄せ*/
	font-size:2.5rem;/*文字の大きさ*/
	letter-spacing:1px;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.newpost:after{
	content:'新着記事';
}
div.category:after{
	content:'カテゴリー別の記事';
}
div.popular:after{
	content:'今日、読まれている記事';
}


/***リンクボタン***/
.link-btn{
  display:block;/*ブロック要素にする*/
  margin:1em auto;/*外側余白*/
  padding: 0.7em 2.5em;/*内側余白*/
  text-align: center;/*中央寄せ*/
  text-decoration: none;/*文字装飾なし*/
  border:1px solid #ccc; /*枠線（太さ、種類、色）*/
  font-size:.9em;/*文字の大きさ*/
  color:#000000;/*文字色*/
  border-radius:30px;/*角の丸み*/
  background-color:#d3d3d3;/*ボタンの色*/
  width:250px;/*ボタンの幅*/
  overflow: hidden;/*はみ出た部分を表示しない*/
  position: relative;/*位置（起点）*/
}

/*光らせる*/
.link-btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: kirari 3s ease-in-out infinite;
}
@keyframes kirari {
    0% {transform: scale(0) rotate(45deg); opacity: 0; }
    80% {transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% {transform: scale(4) rotate(45deg); opacity: 1; }
    100% {transform: scale(50) rotate(45deg); opacity: 0; }
}

/*ホバーしたとき反転させる*/
.link-btn:hover{
background-color:transparent;
color:#666;
}


/* ウィジェット記事全体*/
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 100%;/*カード幅調整*/
}

/***記事横並べ(flex)***/
.widget-entry-cards.large-thumb{
   display: flex; /* フレックスにする */
   flex-wrap: wrap;
}

/*新着、人気記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
  width:calc(100% / 2);/*pcで横2列に並べる*/
}

.cate .new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
  width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*スマホで横１列に*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*スマホで横２列*/	
	}	
}




/**************************
 タブ切り替え
***************************/

/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
}


/*タブ(label)のスタイル*/
.tab-label {
  border:1px solid #ccc;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
  color:#fff;/*文字色*/
  background-color:#b5b5ae;/*タブの背景色*/
  border:1px solid #b5b5ae;/*タブの枠線　太さ　種類　色*/
}

/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% + 5px);
	margin-left: -15px;
	border: 10px solid transparent;
       border-top:10px solid #b5b5ae;/*タブの吹き出し部分*/
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 20px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
  display: none;
}