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

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

/************************************
** サムネイルのカテゴリラベルの非表示
************************************/
.cat-label {
display: none;
}

/************************************
** 固定ページの投稿日・更新日・投稿者の非表示
************************************/
.page .date-tags,
.page .author-info {
    display: none;
}

/************************************
** お気に入りアイコン用
************************************/

.favorite_contents_zone {
	display: flex;
	width: 54%;
	height: 45px;
	justify-content: flex-start;
	align-items: center;
	padding-right: 10px;
}

.favorite_box {
	display: flex;
	width: 80px;
	height: 40px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	border: 1.5px solid gray;
	border-radius: 15px;
	margin-left: 4px;
	color: gray;
}

.favorite_icon {
	width: 14px;
	height: 14px;
	color: gray;
}

.favorite_count {
	line-height: 40px;
	text-align: center;
	margin-bottom: 0 !important;
	font-size: 0.8em;
}

/************************************
** 無限スクロール用CSS
************************************/
/*無限スクロール実装のため、ページネーションの無効化*/
.pagination {
display: none;
}

/************************************
** 広告表示CSS
************************************/
/* デフォルトで左上に表示されるPRのテキストを中央に配置 */
.pr-label-s {
	position: static;
	display: flex;
	width: 100%;
	height: 4vh;
	justify-content: center;
	align-items: center;
	border: 1px solid rgba(51, 51, 51, 0.7);
	font-size: 0.8em;
	color: var(--cocoon-text-color);
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: var(--cocoon-badge-border-radius);
}

/************************************
** ボタン編集CSS
************************************/
div.btn_list {
    display: flex;
    justify-content: flex-end;
	align-items: center;
}

a.btn_04 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28%;
    height: 45px;
    position: relative;
    background: #f23417;
    border: 1px solid #f23417;
    box-sizing: border-box;
    padding: 0 25px 0 40px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition-duration: 0.3s;
	border-radius: 5px;
}

a.btn_04:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -6px;
}
a.btn_04:hover {
  background: #fff;
  color: #f23417;
}
a.btn_04:hover:before {
  border-top: 2px solid #f23417;
  border-right: 2px solid #f23417;
}

/************************************
** フッター中央の相互リンクのスタイル
************************************/
#footer-in .textwidget{
	text-align:center
}

#footer-in h3{
	font-size:16px
}

.two-column-list{
	list-style:none;
	padding-left:0px;
	font-size:16px
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1024px以上*/
@media screen and (min-width: 1024px) {
	a.btn_04 {
		margin-left: 10px;
	}
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	/************************************
	** ボタン編集CSS 1023px以下
	************************************/
	div.btn_list {
		display: flex;
		justify-content: center;
		flex-flow: column;
	}
	
	a.btn_04 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		height: 45px;
		position: relative;
		background: #f23417;
		border: 1px solid #f23417;
		box-sizing: border-box;
		padding: 0 25px 0 40px;
		color: #fff;
		font-size: 16px;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		transition-duration: 0.3s;
		margin-top: 8px; /* スマホ版のボタンは縦に並ぶのでマージンを設定 */
	}
	
	/************************************
	** お気に入り数のスタイル 1023px以下
	************************************/
	.favorite_contents_zone {
		width: 100%;
	}
	
	/************************************
	** モバイルヘッダーの非表示 1023px以下
	************************************/
	.header {
	display: none;
	}
	
	
	/************************************
	** モバイルハンバーガーメニューCSS
	************************************/
	/* 順番ごとに別々のSVGアイコンを指定 */
	.menu-drawer li {
	  display: flex; /* Flexboxを有効にする */
	  align-items: center; /* 垂直方向の中央揃え */
	  column-gap: 8px; /* アイコンとテキストの間隔を調整 */
	  list-style: none; /* デフォルトのリストマーカー削除 */
	}

	/* 共通の擬似要素スタイル */
	.menu-item::before {
	  content: '';
	  display: inline-block;
	  width: 1em; /* アイコンの幅を設定 */
	  height: 1em; /* アイコンの高さを設定 */
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: contain;
	}

	.menu-item:nth-child(1)::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' width='24' height='24' fill='none' stroke='%23000000'%3E%3Cpolyline points='1 12 12 2.83 23 12'/%3E%3Cpolyline points='19.33 9.25 19.33 21.17 14.75 21.17 14.75 13.83 9.25 13.83 9.25 21.17 4.67 21.17 4.67 9.25'/%3E%3C/svg%3E");
	}

	.menu-item:nth-child(2)::before {
	  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.5' viewBox='0 0 22.91 19.09' width='24' height='24' fill='none' stroke='%23000000' stroke-miterlimit='10'%3E%3Cg transform='translate(-0.545 -2.455)'%3E%3Cline x2='19.1' transform='translate(2.45 20.59)'/%3E%3Cpath d='M2.46,7.23l1.9,6.68v6.68H19.64V13.91l1.91-6.68'/%3E%3Cpath d='M21.55,7.23l-5.73,2.86L12,5.32'/%3E%3Cpath d='M12,5.32,8.18,10.09,2.46,7.23'/%3E%3Cellipse cx='1.91' cy='2.86' rx='1.91' ry='2.86' transform='translate(10.09 12)'/%3E%3Cline x2='3.82' transform='translate(15.82 14.86)'/%3E%3Cline x1='3.82' transform='translate(4.36 14.86)'/%3E%3Ccircle cx='0.95' cy='0.95' r='0.95' transform='translate(11.05 3.41)'/%3E%3Ccircle cx='0.95' cy='0.95' r='0.95' transform='translate(1.5 5.32)'/%3E%3Ccircle cx='0.95' cy='0.95' r='0.95' transform='translate(20.6 5.32)'/%3E%3C/g%3E%3C/svg%3E");
	}

	.menu-item:nth-child(3)::before {
	  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' width='24' height='24' fill='none' stroke='%23000000' stroke-miterlimit='10'%3E%3Cpath d='M7.22,23.5A4.78,4.78,0,0,1,12,18.72h0a4.78,4.78,0,0,1,4.78,4.78'/%3E%3Ccircle cx='12' cy='13.93' r='2.87'/%3E%3Cpath d='M1.48,9.15V3.41A1.91,1.91,0,0,1,3.39,1.5h0A1.91,1.91,0,0,1,5.3,3.41V9.15'/%3E%3Cline x1='1.48' y1='5.33' x2='5.3' y2='5.33'/%3E%3Cpath d='M18.7,1.5h1.91a1.91,1.91,0,0,1,1.91,1.91v0a1.91,1.91,0,0,1-1.91,1.91H18.7a0,0,0,0,1,0,0V1.5A0,0,0,0,1,18.7,1.5Z'/%3E%3Cpath d='M18.7,5.33h1.91a1.91,1.91,0,0,1,1.91,1.91v0a1.91,1.91,0,0,1-1.91,1.91H18.7a0,0,0,0,1,0,0V5.33A0,0,0,0,1,18.7,5.33Z'/%3E%3C/svg%3E");
	}
	
	.menu-item:nth-child(4)::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' width='24' height='24' fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-linecap='square'%3E%3Cg%3E%3Cline x1='11.04' y1='14.88' x2='12.96' y2='14.88'/%3E%3Cline x1='11.04' y1='11.04' x2='12.96' y2='11.04'/%3E%3Cline x1='11.04' y1='7.21' x2='12.96' y2='7.21'/%3E%3Cline x1='7.21' y1='14.88' x2='9.13' y2='14.88'/%3E%3Cline x1='7.21' y1='11.04' x2='9.13' y2='11.04'/%3E%3Cline x1='7.21' y1='7.21' x2='9.13' y2='7.21'/%3E%3Cline x1='14.88' y1='14.88' x2='16.79' y2='14.88'/%3E%3Cline x1='14.88' y1='11.04' x2='16.79' y2='11.04'/%3E%3Cline x1='14.88' y1='7.21' x2='16.79' y2='7.21'/%3E%3Crect x='9.13' y='18.71' width='5.75' height='3.83'/%3E%3Cline x1='23.5' y1='22.54' x2='0.5' y2='22.54'/%3E%3Cpolygon points='16.79 3.38 16.79 1.46 7.21 1.46 7.21 3.38 4.33 3.38 4.33 22.54 19.67 22.54 19.67 3.38 16.79 3.38'/%3E%3C/g%3E%3C/svg%3E");
	}
	
	.menu-item:nth-child(5)::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' width='24' height='24' fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpolygon points='3.41 1.5 1.5 3.41 1.5 11.04 12.96 22.5 22.5 12.96 11.04 1.5 3.41 1.5'/%3E%3Ccircle cx='6.27' cy='6.27' r='1.91'/%3E%3C/g%3E%3C/svg%3E");
	}
	
	/************************************
	** モバイル検索バーCSS
	************************************/
	#search-menu-close {
		opacity: 0 !important;
	}
	
	#search-menu-content {
		top: 4%;
		transform: translateY(-1500%);
	}
	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/************************************
	 ** ボタン編集CSS 834px以下
	************************************/
	div.btn_list {
		display: flex;
		justify-content: center;
		flex-flow: column;
	}

	a.btn_04 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		height: 50px;
		position: relative;
		background: #f23417;
		border: 1px solid #f23417;
		box-sizing: border-box;
		padding: 0 25px 0 40px;
		color: #fff;
		font-size: 16px;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		transition-duration: 0.3s;
	}
	
	/************************************
	** モバイルヘッダーの非表示 1023px以下
	************************************/
	.header {
	display: none;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/************************************
	** ボタン編集CSS 480px以下
	************************************/
	div.btn_list {
		display: flex;
		justify-content: center;
		flex-flow: column;
	}

	a.btn_04 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		height: 50px;
		position: relative;
		background: #f23417;
		border: 1px solid #f23417;
		box-sizing: border-box;
		padding: 0 25px 0 40px;
		color: #fff;
		font-size: 16px;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		transition-duration: 0.3s;
	}
	
	
	/************************************
	** モバイルヘッダーの非表示 1023px以下
	************************************/
	.header {
	display: none;
	}
}