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

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

/*****共通*****/

/*h1*/
h1 {
	font-size: 24px !important;
}

/*見出しの余白*/
.wp-block-heading {
	margin-bottom: 1em !important;
}

/*目次の余白*/
#toc {
	margin-bottom: 4em !important;
}

/*YouTube動画中央揃え*/
.video-container {
	margin: 0px auto;
}

/*赤丸を付ける*/
.red-dot::before {
  content: "⚫"; /* 丸の文字を指定 */
  color: red;    /* 文字色を赤に */
  margin-right: 0.5em; /* 赤丸と文字の間に少し隙間を作る */
}

.blue-dot::before {
  content: '⚫';
  color: blue;
  margin-right: 0.5em;
}

.green-dot::before {
  content: "⚫";
  color: green;
  margin-right: 0.5em;
}

.yellow-dot::before {
  content: "⚫";
  color: yellow;
  margin-right: 0.5em;
}

.black-dot::before {
  content: "⚫";
  color: black;
  margin-right: 0.5em;
}

/*****見出し*****/

/*タイトルの両端に横線*/
.title-border-side {
	font-size: 20px !important;
	color: #333333 !important;
	background-color: #ffffff !important;
	padding: 10px !important;
	margin-bottom: 2em !important;
	align-items: center; /* 横線を上下中央 */
	display: flex; /* 文字と横線を横並び */
	justify-content: center; /* 文字を中央寄せ */
}

.title-border-side::before,
.title-border-side::after {
	background-color: #333333; /* 横線の色 */
	content: "";
	height: 1px; /* 横線の高さ */
	width: 60px; /* 横線の長さ */
}

.title-border-side::before {
	margin-right: 15px; /* 文字との余白 */
}

.title-border-side::after {
	margin-left: 15px; /* 文字との余白 */
}

.article h3 {
	border: none !important;
}


/*****トップページ固定*****/

/*投稿一覧の画像とテキストとの余白*/
.wp-block-latest-posts__featured-image.aligncenter {
	margin-bottom: 0;
}
/*投稿一覧のリストの余白*/
.wp-block-latest-posts.wp-block-latest-posts__list li {
	margin-bottom: 2em;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	/*フッターモバイルボタン*/
	.mobile-footer-menu-buttons {
		background: #f4da5b;
	}
	
	.mobile-menu-buttons .menu-caption {
		font-size: 12px;
		font-weight: bold;
	}
}

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

/*h1*/
h1 {
	font-size: 20px !important;
}
	
}

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