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

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

/************************************
** 共通定義
************************************/
.font-15 {
	font-size: 15px;
}

/************************************
** Google広告がdivの間に来る事象を回避
************************************/
.book-info .google-auto-placed, .author-box .google-auto-placed {
	display: none !important;
}

/************************************
** スキンのCSS（margin-bottom: 1.8em;）を解除
************************************/
/* 書籍情報カード */
div.book-info p {
    margin-bottom: 0
}

/* 書籍一覧グリッド */
div.bks-grid p {
    margin-bottom: 5px;
}

/************************************
** ナビゲーションメニュー
************************************/
#toc-2 .toc-content ol.toc-list {
    max-height: 350px;
    overflow-y: auto;
    width: 260px;
    padding: 1.6em;
	margin: 5px;
}
#toc-2 .toc li {
	margin-left: 15px;
}
/* h1 */
#toc-2 .toc-list li a.current {
    background-color: #f0ffe6; /*薄い白緑*/
}
/* h2 */
#toc-2 .toc-list ol > li:has(a.current)  {
    background-color: #f0ffe6; /*薄い白緑*/
}
#toc-2 .toc-list li a:hover {
	 text-decoration: underline;
}

/************************************
** タグカテゴリー
************************************/
.tagcloud a:hover {
	background-color: #f0ffe6; /*薄い白緑*/
}

/************************************
** カテゴリーメニュー
************************************/
.widget_categories ul li a {
	padding: 5px;
}
.widget_categories ul li a:hover {
	background-color: #f0ffe6; /*薄い白緑*/
}

/************************************
** ヘッダメニュー
************************************/
/* hover時 */
#navi .navi-in a {
	transition: none;
}
#navi .navi-in a:hover {
	background-color: #d6e9ca; /*白緑*/
	text-decoration: underline;
}

#navi .navi-in>.menu-header .sub-menu {
	background-color: #f0ffe6; /*薄い白緑*/
	width: 176px;
}

#navi .navi-in > ul .sub-menu ul {
	left: 176px;
	top: -60px;
}

/* リンク集(post-13081)では、モバイルヘッダーを非表示する */
#container:has(article#post-13081) > #header-container,
#container:has(article#post-13081) > .mobile-header-menu-buttons {
    display: none;
}

/************************************
** 運営者
************************************/
.author-box .author-name a {
	text-decoration: underline;
}
.author-box .author-name a:hover {
	color: #232323; /*テーマの黒*/
}

/************************************
** 記事内カテゴリリンク・タグリンク
************************************/
.cat-link {
	background-color: #686157; /*濃い茶色*/
	color: #fff;
}
.cat-link:hover {
	background-color: #686157; /*濃い茶色*/
	opacity: 0.7;
	color: #fff;
}
.tag-link,
.comment-reply-link {
	border: 1px solid #a8a196;
	color: #686157; /*濃い茶色*/
}
.tag-link:hover,
.comment-reply-link:hover {
	background-color: #edecea;
	color: #686157; /*濃い茶色*/
}

/******************************************************
** 記事内要素
******************************************************/
/************************************
** パンくずリスト
************************************/
.breadcrumb {
  margin: 1em .4em;
  color: #686157; /*濃い茶色*/
  font-size: 13px;
}
.breadcrumb a {
  text-decoration: none;
  color: #686157; /*濃い茶色*/
}
.breadcrumb a:hover {
   text-decoration: underline;
}

/************************************
** 目次
************************************/
/* h2 */
.toc-list > li > a, ::marker {
	font-weight: bold;
}
/* h3 */
.toc-list > li > ol {
	list-style-type: disc;
}
/* h4 */
.toc-list > li > ol ol {
	list-style-type: circle;
}

/************************************
** 見出しのデザイン
************************************/
.article h2 {
    margin-top: 1em;
	color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
    padding: 15px;
    border-radius: 4px;
	font-size: 1.4em;
	margin-bottom: 1em;
}

.article h3 {
	font-size: 1.3rem;
	border: none;
	border-left: 5px solid #3366cc;
	border-bottom: 1px solid #3366cc;
	padding: 5px 0 5px 12px;
	margin: 30px 0 15px;
	background: none;
}

/* .article h3:not(h2 + h3) {
	margin: 0 0 10px;
} */

.article h4 {
    font-size: 1.2rem;
	background: none;
	border: none;
	padding: 0;
    color: #3366cc;
    margin: 30px 0 20px;
    font-weight: bold;
}

/* .article h4:not(h3 + h4) {
	margin: 0 0 10px;
} */

.article h5 {
   border-top: 1px solid #d6d3ce;
	border-bottom: 1px solid #d6d3ce;
}

/************************************
** この記事を書いた人
************************************/
.main .author-widget-name,
.footer .author-widget-name {
	background: #d6e9ca; /*白緑*/
	color: #232323; /*テーマの黒*/
}

/************************************
** フッター
************************************/
.article-footer, .entry-footer {
	padding-top: 0;
}

/************************************
** モバイルフッターバー
************************************/
.mobile-menu-buttons {
	background: #ffffff; /*白*/
}
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-icon {
	color: #232323; /*テーマの黒*/
}
.mobile-menu-buttons .menu-button:hover {
	background-color: #d6e9ca; /*白緑*/
}
.mobile-menu-buttons .logo-menu-button:hover {
	background-color: #ffffff; /*白*/
}

/************************************
** Cookie 同意エリア
************************************/
/* 同意するボタン */
#wt-cli-accept-all-btn {
	background-color: #232323!important; /*テーマの黒*/
}

/************************************
** アフィリエイトテーブル-VOD
************************************/
/** VOD配信テーブル*/
table.vod-table th, table.vod-table td {
	border: 3px solid var(--cocoon-x-thin-color);
}

/** 「VOD配信サービス」列――共通 */
td.vod-td, td.vod-vc-td {
	position: relative;
}

/** 「VOD配信サービス」列――Valuecommerce以外 */
td.vod-td {
    /* 独自なし*/
}

/** 「VOD配信サービス」列――Valuecommerce */
td.vod-vc-td {
	padding: 5px;
}

/** 「VOD配信サービス」列リンク――共通 */
td.vod-td > a, td.vod-vc-td > a {
	 position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-decoration: none;
    line-height:1.4;
}

/** 「VOD配信サービス」列リンク――Valuecommerce以外 */
td.vod-td > a {
    top: 8%;
}

/** 「VOD配信サービス」列リンク――Valuecommerce */
td.vod-vc-td > a {
    top: 0;
    padding-top: 70px;
}

/** 「VOD配信サービス」列画像――共通 */
.vod-img {
    display: block;
    margin: auto;
    width: 60px!important;
    height: 60px!important;
}

/** 「VOD配信サービス」列画像――Valuecommerce */
td.vod-vc-td > .vod-img {
   position: absolute;
   top: -30%;
   right: 0;
   bottom: 0;
   left: 0;
}

/** 「VOD配信状況」列画像――共通 */
.symbol-img {
    display: block;
    margin: auto;
    width: 50px!important;
    height: 50px!important;
}

/** VODテーブルの行の幅を均一に調整する */
td.vod-td:first-child:before, td.vod-vc-td:first-child:before {
  display: block;
  float: left;
  height: 100px; /* この値は適宜書き換える */
  content: "";
}

/************************************
** アフィリエイトテーブル-書籍
************************************/
/** 書籍配信テーブル*/
table.book-service-table th, table.book-service-table td {
	border: 3px solid var(--cocoon-x-thin-color);
}

/** 「書籍配信サービス」列――共通 */
td.book-service-td, td.book-service-vc-td {
	position: relative;
}

/** 「書籍配信サービス」列――Valuecommerce以外 */
td.book-service-td {
    /* 独自なし*/
}

/** 「書籍配信サービス」列――Valuecommerce */
td.book-service-vc-td {
	padding: 5px;
}

/** 「VOD配信サービス」列リンク――共通 */
td.book-service-td > a, td.book-service-vc-td > a {
	 position: absolute;
	 text-decoration: none;
	 line-height:1.4;
}

/** 「書籍配信サービス」列リンク――Valuecommerce以外 */
td.book-service-td > a {
    top: 20%;
    right: 0;
    bottom: 0;
    left: 0;
}

/** 「書籍配信サービス」列リンク――Valuecommerce */
td.book-service-vc-td > a {
	 top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/** 「書籍配信サービス」列画像――共通 */
.book-service-img {
    display: block;
    margin: auto;
    width: 60px!important;
    height: 60px!important;
}

/** 「書籍配信サービス」列リンク――Valuecommerce以外 */
td.book-service-td > a > .book-service-img {
    margin-bottom: 8%;
}

/** 「書籍配信サービス」列画像――Valuecommerce */
td.book-service-vc-td > .book-service-img {
   position: absolute;
	top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/** 書籍テーブルの行の幅を均一に調整する */
td.book-service-td:first-child:before, td.book-service-vc-td:first-child:before {
  display: block;
  float: left;
  height: 150px; /* この値は適宜書き換える */
  content: "";
}

/************************************
** 検索フォーム注意事項
************************************/
.search-notes-for-one-word {
    font-size: 13px;
    color: #232323; /*テーマの黒*/
}

/************************************
** コピー禁止
************************************/
.entry-content {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
}

/************************************
** 縦書きモード
************************************/
._r_separator{
    height: 100px; !important
    margin-bottom: 100px; !important
}

/************************************
** マテリアルシンボル & アイコン
************************************/
span[class^="material-symbols-"] {
	color: #a22041;
}

/************************************
** Kindle Unlimitedエリア
************************************/
.kindle-unlimited {
	background-color: #f0f8ff;
	border: 1px solid #b3e5fc;
	border-radius: 8px;
	padding: 20px;
	margin: 30px 0;
}

p.kindle-heading {
	font-size: 1.2rem;
	background: none;
	color: #0277bd;
	border: none;
	border-bottom: 1px solid #b3e5fc;
	padding-top: 0;
	padding-bottom: 10px;
	margin-top: 0;
	margin-bottom: 10px;
}

.kindle-benefits {
	margin-bottom: 20px;
	padding-left: 10px;
}

.kindle-benefits li {
	margin-bottom: 10px;
	padding-left: 25px;
	position: relative;
	list-style:none;
}

.kindle-benefits li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #4CAF50;
	font-weight: bold;
}

.cta-button {
	display: block;
	width: 100%;
	background-color: #3949ab;
	color: white;
	text-align: center;
	padding: 15px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1rem;
	transition: background-color 0.3s;
}

.cta-button:hover {
	background-color: #303f9f;
}

/************************************
** ハイライトボックス
************************************/
/* 左線が緑のハイライトボックス */
.highlight-box-green {
    background-color: #f8f9fa;
    border-left: 4px solid #4CAF50;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
}
.highlight-box-green p {
	margin: 0;
}

/************************************
** おすすめポイントエリア
************************************/
.point-box {
	background-color: #e8f5e9;
	border-radius: 4px;
	padding: 15px;
	margin: 20px 0;
}

.point-box h3 {
	color: #2e7d32;
	border-bottom: 1px solid #c8e6c9;
	border-left: none;
	padding-left: 0;
	margin-top: 0;
}

.point-list li {
	margin-bottom: 10px;
}

a.banner-audible:hover {
	opacity: 0.7;
}

/******************************************************
** レスポンシブデザイン用のメディアクエリ
******************************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/************************************
	** 全体
	************************************/
	#search-menu-content .search-notes-for-one-word {
		color: #ffffff; /*白*/
	}
	.search-menu-content {
		top: 20%;
    }
	/* リンク集(post-13081)では、モバイルヘッダーを非表示する */
	html:has(article#post-13081) {
		margin-top: -46px !important;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/************************************
	** 全体
	************************************/
    .navi-footer-in a {
  	    background-color: #140d0d;
	}
    /* リンク集(post-13081)では、モバイルヘッダーを非表示する */
    html:has(article#post-13081) {
        margin-top: -46px !important;
    }
	[class*=is-style-icon-list-] > li {
		padding-left: 0;
	}
	[class*=is-style-icon-list-] > li::before {
		left: -1.3em;
	}
}