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

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

/* 画像の立地表示(masonry) */
#masonry-container {
    margin: 0 auto, 10px, auto;
}

.tile {
	width: 265px;
}

.tile img {
    width: 100%; /* 画像をタイルの幅に合わせる */
    height: auto; /* 高さは自動調整 */
	display: block;
}

/* h2に情報追加 */
.title_add_info {
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 縦方向の中央揃え */
}

.title_add_info span {
    color: #dc143c;
    font-size: 0.6em; /* フォントサイズを小さく設定 */
    background-color: #ffffff; /* 背景色を設定 */
    border-radius: 5px; /* 丸い四角形にする */
    padding: 5px 10px; /* 内側の余白を設定 */
    margin-left: 15px; /* h2のテキストとの間隔を設定 */
}


/* 人気記事 */
.widget_popular_entries .widget-title {
	background-color: #dc143c; /* 背景色 */
	color: #ffffff; /* 文字色 */
	font-weight: 900; /* フォントの太さ */
	margin-bottom: 10px; /* 下部マージン */
	padding: 10px; /* 内側の余白 */
	padding-left: 40px;
	position: relative; /* 擬似要素を使用するために相対位置を指定 */
}

.widget_popular_entries .widget-title::before {
	font-family: "Font Awesome 5 Free"; /* フォントファミリー */
	content: "\f521"; /* fa-crownのUnicode */
	font-weight: 900; /* フォントの太さ */
	color: #ffffff; /* アイコンの色 */
	margin-right: 8px; /* テキストとの間にスペース */
	position: absolute; /* 絶対位置を指定 */
	left: 10px; /* 左からの位置 */
	top: 50%; /* 垂直中央に配置 */
	transform: translateY(-50%); /* 垂直中央に調整 */
}

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

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

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