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

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

/* スクロール時のヘッダーの線（影）を消す */
.fixed-header {
  box-shadow: none !important;
}

/* コンテンツ上部に表示する更新終了アナウンス */
#closure-announce {
	font-size: 18px;
	font-weight: bold;
}

aside:has(#closure-announce) {
	background-color: #fff;
	border-radius: 4px;
	padding: 18px;
}

/* サイドバーのフォントサイズ */
#sidebar {
	font-size: 14px;
}

/* サイドバーウィジェットのタイトルの表示を調整 */
.sidebar h3 {
	padding: 4px 8px;
	-moz-transform: skewx(-10deg);
	-webkit-transform: skewx(-10deg);
	transform: skewx(-10deg);
	background: -moz-linear-gradient(left, #24890d 60%, transparent);
	background: -webkit-linear-gradient(left, #24890d 60%, transparent);
	background: linear-gradient(to right, #24890d 60%, transparent);
	color: #fff;
	font-family: "Noto Serif JP", serif;
	font-weight: normal;
}

/* サイドバーの目次は中央にしない */
.toc-widget-box .toc-center {
	margin-left: 0;
}

/* JetpackのWordPress投稿ウィジェット用 */
.jetpack-display-remote-posts .jetpack-card {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.jetpack-display-remote-posts .jetpack-card:hover {
	background-color: #24890d0d;
	transition: all 0.3s ease-in-out;
}

.jetpack-display-remote-posts .jetpack-card img {
	display: block;
	flex: 0 0 120px;
	width: 120px;
	height: 67.5px;
	object-fit: cover;
}

.jetpack-display-remote-posts .jetpack-card-title {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* noteからのRSSショートコード用 */
.note-entry-cards .note-entry-card {
	display: flex;
	align-items: top;
	gap: 10px;
	margin-bottom: 5px;
	padding: 5px;
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.note-entry-cards .note-entry-card:hover {
	background-color: #24890d0d;
	transition: all 0.3s ease-in-out;
}

.note-entry-cards .note-entry-card img {
	display: block;
	flex: 0 0 120px;
	width: 120px;
	height: 67.5px;
	object-fit: cover;
	margin-top: 3px;
}

.note-entry-cards .note-entry-card-title {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	line-height: 1.5;
}

/*--- 折り畳みアーカイブウィジェット ---*/
/* 各年の親要素：クリックできることを示す */
.widget_archive a.year {
    cursor: pointer;
    display: block; /* クリック領域を広げる */
}
/* 各年横のアイコン */
.widget_archive a.year::before {
    font-family: "FontAwesome";
    content: '\f0d7'; /* 展開していたら下向き矢印のアイコン */
    margin-right: 8px; /* アイコンの位置 */
}
.widget_archive a.year.collapsed::before {
    font-family: "FontAwesome";
    content: '\f0da'; /* 収納していたら右向き矢印のアイコン */
    margin-right: 8px; /* アイコンの位置 */
}

/* 固定ページでは投稿日を非表示にする */
.type-page .post-date {
	display: none;
}

/* kattene用スタイル - 使用停止したら削除　*/
/* Style Amazon Link (copied from kattene plugin) */
/* Only One Orange Button (Others are deleted) */
.kattene {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	/* padding: 10px; */
	padding: 25px 10px; /* Modified */
	margin-bottom: 1em;
	box-sizing: border-box;
}

.kattene div {
	margin: 0;
}

.kattene__imgpart {
	text-align: center;
}

.kattene__imgpart img {
	-webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
	-o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
	-ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
	margin: 0;
}

.kattene__title { /* Added (Looks similar to AmazonJS) */
	font-weight: bold;
}

.kattene__title a { /* Added (Looks similar to AmazonJS) */
	color: #e47911;
	text-decoration: none;
}

.kattene__title a:hover { /* Added (Looks similar to AmazonJS) */
	color: #996633;
}

.kattene__description {
	font-size: 0.8em;
}

.kattene .kattene__btns {
	width: 100%;
	margin-top: 0.5em;
}

.kattene__btns:after {
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	content: ".";
}

.kattene__btns > div {
	float: left;
	margin-bottom: 5px;
}

.kattene__btns .kattene__btn {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

@media screen and (max-width: 900px) {
	.kattene__imgpart {
		padding-bottom: 1em;
	}
	
	.kattene .kattene__btns {
		margin-top: 0.5em;
	}
	
	.kattene__btns.__one > div {
		width: 50%;
		margin-left: 25%;
	}
}

@media screen and (min-width: 901px) {
	.kattene {
		display: table;
		width: 100%;
	}
	
	.kattene__imgpart {
		display: table-cell;
		width: 20%;
		padding-bottom: 5px;
	}
	
	.kattene__infopart {
		display: table-cell;
		vertical-align: top;
		position: relative;
		padding-left: 10px;
		width: 80%;
	}
	
	.kattene .kattene__description {
		margin-bottom: 4em;
	}
	
	.kattene__btns {
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		padding-right: 10px; }
	
	.kattene__btns.__one > div {
		/* width: 49.5%; */
		width: 19.5%; /* Modified */
		float: right;
	}
}

.kattene .kattene__btn {
	appearance: none;
	background-color: #54c0d1;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	/* font-size: 1em; */
	font-size: 0.8em; /* Modified */
	-webkit-font-smoothing: antialiased;
	font-weight: 600;
	line-height: 1;
	padding: 0.75em 0;
	text-decoration: none;
	transition: background-color 150ms ease;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
}

.kattene__btn:hover, .kattene__btn:focus {
	background-color: #439aa7;
	color: #fff !important;
}

.kattene__btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.kattene__btn:disabled:hover {
	background-color: #54c0d1;
}

.kattene__btn.__small {
	padding: 0.55em;
	font-size: 0.9em;
}

.kattene__btn.__orange {
	background-color: #FF9901;
	-webkit-box-shadow: 0 5px 0 #cc7a01;
	-moz-box-shadow: 0 5px 0 #cc7a01;
	box-shadow: 0 5px 0 #cc7a01;
	-o-box-shadow: 0 5px 0 #cc7a01;
	-ms-box-shadow: 0 5px 0 #cc7a01;
	margin-bottom: 5px;
	border-radius: 3px;
	text-align: center;
}

.kattene__btn.__orange:hover {
	background-color: #cc7a01;
}

.kattene__btn.__orange i {
	font-weight: bold;
}

.kattene__btn.__orange i:before {
	vertical-align: middle;
	font-size: 1.2em;
	margin-right: 0.2em;
}
/* kattene用スタイルここまで */


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

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

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