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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*サイトタイトルここから*/
.site-name-text-link {
font-size: 30px;
}
/*サイトタイトルここまで*/
.tab-caption-box,
.label-box {
	border:none;
}

/************************************
** アコーディオンの見出しを左詰めにする
************************************/
.toggle-button {
	text-align: left;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 内部ブログカード */
#container .blogcard-label {
display: block;
font-size: 15px;
background-color: #000057;/* あわせて読みたいなどの背景色 */
}
.blogcard::before {
display: none;
}
.blogcard-snippet {
font-size: 15px;/* 文字の大きさ */
color: #919696;/* 抜粋の文字色 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blogcard-title {
font-size: 20px;/* タイトルの大きさ */
}
.blogcard-content {
margin-left: 180px;
}
.blogcard::after {
content: "記事をよむ \bb";
font-weight: 900;
position: absolute;
bottom: 1em;
right: 2em;
background-color: #45b9cc;/* 記事をよむ背景色 */
color: #fff;
padding: 0.2em 1em;
border-radius: 5px;
}
.blogcard-wrap,.blogcard-title,.blogcard-snippet,.blogcard::after {
transition: 0.3s ease-in-out;
}
.a-wrap:hover .blogcard::after {
background-color: #37909e;/* マウスホバー時の「記事をよむ」背景色 */
}
.a-wrap.blogcard-wrap:hover {
background-color: #f6f6f6;/* マウスホバー時の全体背景色 */
}
.a-wrap:hover .blogcard-title, .a-wrap:hover .blogcard-snippet {
opacity: 0.7;
}
@media screen and (max-width:834px) {
#container .blogcard-label,.blogcard-snippet {
font-size: 13px;
}
.blogcard-content {
margin-left: 150px;
}
.blogcard-title {
font-size: 15px;
}
.blogcard::after {
font-size: 14px;
}
}
@media screen and (max-width:480px) {
#container .blogcard-label,.blogcard-title,.blogcard::after {
font-size: 12px;/* スマホ時の文字の大きさ */
}
.blogcard-content {
margin-left: 130px;
}
.blogcard-snippet {
display: none;
}
}
/************************************
** 見出しボックスの見出しテキストを中央配置にする
************************************/
.caption-box-label {
justify-content: center;
}