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

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

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

.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
************************************/
/* 順番ごとに別々の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('icon2.svg');
}

.menu-item:nth-child(3)::before {
    background-image: url('icon3.svg');
}


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

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

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

/************************************
** ボタン編集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;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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以下
	************************************/
	.header {
		display: none;
	}
	
	/************************************
	** お気に入り数のスタイル 1023px以下
	************************************/
	.favorite_contents_zone {
		width: 100%;
	}
}

/*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;
	}
}