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

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


/************************************
** 共通定義
************************************/
:root {
	/* バッチの定義 */
	--badge-color-completed: #006e54;
	--badge-color-media-mix: #ff6b6b;
	--badge-color-original-work-novel: #1e3799;
	--badge-color-amazon-novel: #f08300;
	
	/* アフィリエイトリンクの定義 */
	--aff-color-amazon: #ff9900;
	--aff-color-amazon-transparent: rgba(255, 153, 0, 0.8);
	--aff-color-ebookjapan: #4285f4;
	--aff-color-ebookjapan-transparent: rgba(66, 133, 244, 0.8);
	--aff-color-booklive: #ff6d00;
	--aff-color-booklive-transparent: rgba(255, 109, 0, 0.8);
	--aff-color-rakuten: #bf0000;
	--aff-color-rakuten-transparent: rgba(191, 0, 0, 0.8);
    
    /* シャドウの定義 */
    --aff-shadow-normal: 0 2px 4px rgba(0,0,0,0.1);
    --aff-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
}

.font-15 {
	font-size: 15px;
}

/************************************
** ナビゲーションメニュー
************************************/
#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;
}

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

/************************************
** 記事内カテゴリリンク・タグリンク
************************************/
.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; /*濃い茶色*/
}

/************************************
** 記事内要素
************************************/
/* 目次 */
/* 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: 5em;
} */

/* h3 */
/* .article h3 {
	border-left: 15px solid #edecea;
	border-bottom: 3px solid #d6d3ce;
	border-top: 3px solid #edecea;
	border-right: 3px solid #edecea;
	background-color: rgb(250, 250, 250);
} */

/* .article h3:not(h2 + h3) {
	margin-top: 5em;
} */

/* h4 */
/* .article h4 {
   border-left: 8px solid #edecea;
	border-top: 1px solid #edecea;
	border-bottom: 1px solid #d6d3ce;
	border-right: 1px solid #edecea;
	background-color: rgb(250, 250, 250);
} */
/* 
.article h4:not(h3 + h4) {
	margin-top: 5em;
} */

/************************************
** 見出しのデザイン
************************************/
.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-left: 5px solid #3366cc;
	border-bottom: none;
	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;
} */

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

/* Pochipp */
.pochipp-box .pochipp-box__title {
	font-size: 16px;
}
.pochipp-box .pochipp-box__info {
	font-size: 14px;
}

/* 作者名リンク */
.author-box .author-name a {
	text-decoration: underline;
}
.author-box .author-name a:hover {
	color: #232323; /*テーマの黒*/
}

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

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

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

/************************************
** アフェリエイトボックス
************************************/
:root {
/*     --aff-color-amazon: #f08804; */
    --aff-color-amazon-alpha: rgba(240, 136, 4, 0.2);
    --aff-color-mangazenkan: #333;
    --aff-color-mangazenkan-alpha: rgba(51, 51, 51, 0.2);
/*     --aff-color-booklive: #ff5a00; */
    --aff-color-booklive-alpha: rgba(255, 90, 0, 0.2);
/*     --aff-color-ebookjapan: #f8485e; */
    --aff-color-ebookjapan-alpha: rgba(248, 72, 94, 0.2);
/*     --aff-color-rakuten: #e0423c; */
    --aff-color-rakuten-alpha: rgba(224, 66, 60, 0.2);
    --aff-color-custom1: #00552e;
    --aff-color-custom1-alpha: rgba(0, 85, 46, 0.2);
	 --aff-color-custom2: #65318e;
    --aff-color-custom2-alpha: rgba(101, 49, 142, 0.2);
    --aff-color-mangaOkoku: #fbcf28;
    --aff-color-unext: rgb(0, 128, 222);
    --aff-color-dmmBooks: #ff972a;
    --aff-color-comicSeeMore: #F90;
    --aff-color-ameba: rgb(35, 123, 49);
    --aff-color-bookWalker: #1d3850;
}

.aff-area {
    position: relative;
    display: grid;
    grid-gap: 0 24px;
    grid-template-areas:
        "areaImg areaBody"
        "areaBtns areaBtns";
    grid-template-rows: auto auto;
    grid-template-columns: 200px 1fr;
    max-width: 960px;
    padding: 24px!important;
    color: #353535;
    font-size: 16px;
    background: #fff;
    border: 1px solid #a8a196;
    border-radius: 20px;
    box-shadow: 0 1px 8px -4px rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 2%);
    margin: 2em auto;
}

.aff-area[data-btn-radius=off] {
    border-radius: 1px;
}

.aff-area .aff-img-area {
    grid-area: areaImg;
    margin: 0;
    padding: 0;
}

.aff-img-area a {
    display: block;
    width: 100%;
    text-decoration: none;
}

.aff-img-area img {
    display: block;
    /*width: 100%;
    height: none;
    max-height: 160px;
    object-fit: contain;*/
}

.aff-description-area {
    grid-area: areaBody;
    margin: 0;
    padding: 0;
}

.aff-description-area .aff-title {
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.6;
    font-size: 20px;
}

.aff-description-area .aff-description {
    margin: 4px 0 0;
    line-height: 1.5;
    opacity: .75;
    font-size: 14px;
}

.aff-buttons-area {
	 grid-area: areaBtns;
    position: relative;
    left: -4px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: calc(100% + 8px);
    margin: 12px 0 0;
    padding: 0;
}

.aff-button-wrap {
    padding: 4px;
    min-width: 220px;
    flex-basis: 50%;
    min-width: 50%!important;
    max-width: 50%;
}

.aff-service-img {
    display: block;
    margin: auto;
    width: 30px!important;
    height: 30px!important;
}

/* アフェリエイトボタン―― imgタグを含むタイプ */
.aff-button-wrap > a {
    position: relative;
    display: flex;
/*     flex-direction: column; */
    align-items: center;
    justify-content: center;
    margin: 0!important;
    padding: 12px;
    font-size: 1em;
    line-height: 1;
    letter-spacing: .5px;
    text-align: center;
    text-decoration: none!important;
    overflow: hidden;
    color: #232323; /*テーマの黒*/
    background-color: #fff;
    border-radius: 30px;
    transition: .4s;
    max-height: 50px;
}
.aff-button-wrap > a:hover {
    transform: translateY(3px);	
}

.aff-button-wrap > a:before {
    content: "";
    display: block;
    margin: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.5em;
    height: 2.5em;
}
/* アイコンと文字の間に余白が必要なもの */
.aff-button-wrap.amazon > a:before,
.aff-button-wrap.unext > a:before,
.aff-button-wrap.booklive > a:before,
.aff-button-wrap.comicSeeMore > a:before{
    width: 2em;
    height: 2em;
    margin: 0 0.5em 0 0;
}

.aff-button-wrap > a > img, .aff-button-wrap > img {
	display: block;
	height: 1px;
}

/****** Amazon */
.aff-button-wrap.amazon > a {
    border: 2px solid var(--aff-color-amazon);
    box-shadow: 0 2px 0 var(--aff-color-amazon);
}
.aff-button-wrap.amazon > a:hover {
    box-shadow: 0 0 0 var(--aff-color-amazon);
/*     background-color: var(--aff-color-amazon-alpha); */
}
.aff-button-wrap.amazon > a:before {
    background-image: url("/wp-content/uploads/2023/12/215a485daf5be48a4b6bb586047c0d34.webp");
}

/****** ebookjapan */
.aff-button-wrap.ebookjapan > a {
    border: 2px solid var(--aff-color-ebookjapan);
    box-shadow: 0 2px 0 var(--aff-color-ebookjapan);
}
.aff-button-wrap.ebookjapan > a:hover {
    box-shadow: 0 0 0 var(--aff-color-ebookjapan);
/*     background-color: var(--aff-color-ebookjapan-alpha); */
}
.aff-button-wrap.ebookjapan > a:before {
    background-image: url("/wp-content/uploads/2023/12/c60dac48c93c15bf1b1043696b83e7d6.png");
}

/****** まんが王国 */
.aff-button-wrap.mangaOkoku > a {
    border: 2px solid var(--aff-color-mangaOkoku);
    box-shadow: 0 2px 0 var(--aff-color-mangaOkoku);
}
.aff-button-wrap.mangaOkoku > a:hover {
    box-shadow: 0 0 0 var(--aff-color-mangaOkoku);
}
.aff-button-wrap.mangaOkoku > a:before {
    background-image: url("/wp-content/uploads/2023/12/d1158dc48079caf90657bcb28ef7333e.jpg");
}

/****** U-NEXT */
.aff-button-wrap.unext > a {
    border: 2px solid var(--aff-color-unext);
    box-shadow: 0 2px 0 var(--aff-color-unext);
}
.aff-button-wrap.unext > a:hover {
    box-shadow: 0 0 0 var(--aff-color-unext);
}
.aff-button-wrap.unext > a:before {
    background-image: url("/wp-content/uploads/2023/12/e1d1dba3cc32a17e6ca269b489ab8aab.png");
}

/****** DMMブックス */
.aff-button-wrap.dmmBooks > a {
    border: 2px solid var(--aff-color-dmmBooks);
    box-shadow: 0 2px 0 var(--aff-color-dmmBooks);
}
.aff-button-wrap.dmmBooks > a:hover {
    box-shadow: 0 0 0 var(--aff-color-dmmBooks);
}
.aff-button-wrap.dmmBooks > a:before {
    background-image: url("/wp-content/uploads/2023/12/ffa74253bce9740e2d11c2c989edd44a.png");
}

/****** ブックライブ */
.aff-button-wrap.booklive > a {
    border: 2px solid var(--aff-color-booklive);
    box-shadow: 0 2px 0 var(--aff-color-booklive);
}
.aff-button-wrap.booklive > a:hover {
    box-shadow: 0 0 0 var(--aff-color-booklive);
/*     background-color: var(--aff-color-booklive-alpha); */
}
.aff-button-wrap.booklive > a:before {
    background-image: url("/wp-content/uploads/2023/12/6365ffac68aebfbae4833b4c52ed9aaa.png");
}

/****** コミックシーモア */
.aff-button-wrap.comicSeeMore > a {
    border: 2px solid var(--aff-color-comicSeeMore);
    box-shadow: 0 2px 0 var(--aff-color-comicSeeMore);
}
.aff-button-wrap.comicSeeMore > a:hover {
    box-shadow: 0 0 0 var(--aff-color-comicSeeMore);
}
.aff-button-wrap.comicSeeMore > a:before {
    background-image: url("/wp-content/uploads/2023/12/27685a7e370d707a69e77d175b2e9326.png");
}

/****** Amebaマンガ */
.aff-button-wrap.ameba > a {
    border: 2px solid var(--aff-color-ameba);
    box-shadow: 0 2px 0 var(--aff-color-ameba);
}
.aff-button-wrap.ameba > a:hover {
    box-shadow: 0 0 0 var(--aff-color-ameba);
}
.aff-button-wrap.ameba > a:before {
    background-image: url("/wp-content/uploads/2023/12/21da74afe542b0b1190638ca03036fd4.jpg");
}

/****** 漫画全巻ドットコム */
.aff-button-wrap.mangazenkan > a {
    border: 2px solid var(--aff-color-mangazenkan);
    box-shadow: 0 2px 0 var(--aff-color-mangazenkan);
}
.aff-button-wrap.mangazenkan > a:hover {
    box-shadow: 0 0 0 var(--aff-color-mangazenkan);
/*     background-color: var(--aff-color-mangazenkan-alpha); */
}
.aff-button-wrap.mangazenkan > a:before {
    background-image: url("/wp-content/uploads/2023/12/466420ee060c50c03e945ac3b4eeeb1a.jpeg");
}

/****** BOOK☆WALKER */
.aff-button-wrap.bookWalker > a {
    border: 2px solid var(--aff-color-bookWalker);
    box-shadow: 0 2px 0 var(--aff-color-bookWalker);
}
.aff-button-wrap.bookWalker > a:hover {
    box-shadow: 0 0 0 var(--aff-color-bookWalker);
}
.aff-button-wrap.bookWalker > a:before {
    background-image: url("/wp-content/uploads/2023/12/54b7445d788a50db1975e7ca79416b34.png");
}

/****** 楽天 */
.aff-button-wrap.rakuten > a {
    border: 2px solid var(--aff-color-rakuten);
    box-shadow: 0 2px 0 var(--aff-color-rakuten);
}
.aff-button-wrap.rakuten > a:hover {
    box-shadow: 0 0 0 var(--aff-color-rakuten);
/*     background-color: var(--aff-color-rakuten-alpha); */
}
.aff-button-wrap.rakuten > a:before {
    background-image: url("/wp-content/uploads/2023/12/e82f5c0fa9d958d0c49e3ddb2a7abbe3.png");
}

/* .aff-button-wrap.custom1 > a {
    border: 2px solid var(--aff-color-custom1);
    box-shadow: 0 2px 0 var(--aff-color-custom1);
}
.aff-button-wrap.custom1 > a:hover {
    box-shadow: 0 0 0 var(--aff-color-custom1);
    background-color: var(--aff-color-custom1-alpha);
}

.aff-button-wrap.custom2 > a {
    border: 2px solid var(--aff-color-custom2);
    box-shadow: 0 2px 0 var(--aff-color-custom2);
}
.aff-button-wrap.custom2:hover > a {
    box-shadow: 0 0 0 var(--aff-color-custom2);
    background-color: var(--aff-color-custom2-alpha);
} */

/* アフェリエイトボタン―― imgタグを含まないタイプ */
.aff-button-wrap .aff-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0!important;
    padding: 12px;
    font-size: 1em;
    line-height: 1;
    letter-spacing: .5px;
    text-align: center;
    text-decoration: none!important;
    overflow: hidden;
    color: #232323; /*テーマの黒*/
    background-color: #fff;
    border-radius: 30px;
    transition: .4s;
}
.aff-button-wrap .aff-button:hover {
    transform: translateY(3px);	
}

.aff-button-wrap .aff-button img {
	height: 1px;
}

.aff-button-wrap .amazon {
    border: 2px solid var(--aff-color-amazon);
    box-shadow: 0 2px 0 var(--aff-color-amazon);
}
.aff-button-wrap .amazon:hover {
    box-shadow: 0 0 0 var(--aff-color-amazon);
    background-color: var(--aff-color-amazon-alpha);
}

.aff-button-wrap .mangazenkan {
    border: 2px solid var(--aff-color-mangazenkan);
    box-shadow: 0 2px 0 var(--aff-color-mangazenkan);
}
.aff-button-wrap .mangazenkan:hover {
    box-shadow: 0 0 0 var(--aff-color-mangazenkan);
    background-color: var(--aff-color-mangazenkan-alpha);
}

.aff-button-wrap .booklive {
    border: 2px solid var(--aff-color-booklive);
    box-shadow: 0 2px 0 var(--aff-color-booklive);
}
.aff-button-wrap .booklive:hover {
    box-shadow: 0 0 0 var(--aff-color-booklive);
    background-color: var(--aff-color-booklive-alpha);
}

.aff-button-wrap .ebookjapan {
    border: 2px solid var(--aff-color-ebookjapan);
    box-shadow: 0 2px 0 var(--aff-color-ebookjapan);
}
.aff-button-wrap .ebookjapan:hover {
    box-shadow: 0 0 0 var(--aff-color-ebookjapan);
    background-color: var(--aff-color-ebookjapan-alpha);
}

.aff-button-wrap .rakuten {
    border: 2px solid var(--aff-color-rakuten);
    box-shadow: 0 2px 0 var(--aff-color-rakuten);
}
.aff-button-wrap .rakuten:hover {
    box-shadow: 0 0 0 var(--aff-color-rakuten);
    background-color: var(--aff-color-rakuten-alpha);
}

.aff-button-wrap .custom1 {
    border: 2px solid var(--aff-color-custom1);
    box-shadow: 0 2px 0 var(--aff-color-custom1);
}
.aff-button-wrap .custom1:hover {
    box-shadow: 0 0 0 var(--aff-color-custom1);
    background-color: var(--aff-color-custom1-alpha);
}

.aff-button-wrap .custom2 {
    border: 2px solid var(--aff-color-custom2);
    box-shadow: 0 2px 0 var(--aff-color-custom2);
}
.aff-button-wrap .custom2:hover {
    box-shadow: 0 0 0 var(--aff-color-custom2);
    background-color: var(--aff-color-custom2-alpha);
}

/* 文字列の下にノートのような罫線を引く */
.note {
    background-color: #fff; /* 背景色 */
    background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ  */
    background-size: 100% 2.5em; /* 行の高さ */
    line-height: 2.5em; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

.aff-area > .aff-description-area > .aff-description > .note {
	margin-bottom: 0.6em; !important
}

@media screen and (max-width: 1023px){
    .aff-area .aff-buttons-area .aff-button-wrap {
        flex-basis: auto;
        min-width: auto;
        max-width: none;
	}
}

@media screen and (max-width: 968px){
    .aff-area .aff-buttons-area .aff-button-wrap {
        flex-basis: 50%;
        min-width: 50%!important;
        max-width: 50%;
	}
}

@media screen and (max-width: 520px){
    .aff-area .aff-buttons-area .aff-button-wrap {
		  flex-basis: 100%;
    	  max-width: 100%;
        font-size: 15px;
	}
	.aff-area .aff-buttons-area .aff-button-wrap .aff-button {
			padding: 12px 10px;
	}
}

/************************************
** アフィリエイトテーブル-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: "";
}



/************************************
** カスタムラベル
************************************/
a.custom-label {
        padding: 5px 14px;
        margin: 3px 0;
        line-height: 1.6;
        font-size: 0.8em;
        font-weight: bold;
        vertical-align: middle;
        /*color: #232323;*/ /*テーマの黒*/
        box-shadow: none;
        position: relative;
        display: inline-block;
        text-decoration: none;
        text-align: cnter;
        text-shadow: none;
        background-color: #d6e9ca;
}
a.custom-label::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 0 10px;
        border-color: transparent transparent transparent #006e54;
        background-color: #fff;
}
a.custom-label .fa {
	padding-right: 5px;
}

/*
p.custom-label {
        padding: 5px 14px;
        margin: 3px 0;
        line-height: 1.6;
        font-size: 0.8em;
        font-weight: bold;
        vertical-align: middle;
        color: #232323; /*テーマの黒*//*
        box-shadow: none;
        position: relative;
        display: inline-block;
        text-decoration: none;
        text-align: cnter;
        text-shadow: none;
        background-color: #d6e9ca;
}
p.custom-label::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 0 10px;
        border-color: transparent transparent transparent #006e54;
        background-color: #fff;
}
.labels > [class*=" icon-"]::before {
        font-family: "Material Icons";
        font-style: normal;
        font-weight: normal;
        font-size: 128%;
        speak: none;
        text-decoration: none;
        font-variant: normal;
        text-transform: none;
        vertical-align: text-bottom;
        margin-right: 0.15em;
        margin-left: 0.15em;
        line-height: 0.8;
}
*/

/****************** 色別のラベル ****************/
    /* 翡翠 */
    /*p.custom-label.label-hisui {
        background-color: #38b48b;
    }
    p.custom-label.label-hisui::after{
        border-color: transparent transparent transparent #006e54;
    }*/
    /* 若竹 */
    /*p.custom-label.label-wakatake {
        background-color: #68be8d;
    }
    p.custom-label.label-wakatake::after{
        border-color: transparent transparent transparent #117964;
    }*/
    /* 若草 */
    /*p.custom-label.label-wakakusa {
        background-color: #c3d825;
    }
    p.custom-label.label-wakakusa::after{
        border-color: transparent transparent transparent #69821b;
    }*/
    /* 山吹 */
    /*p.custom-label.label-yamabuki {
        background-color: #f8b500;
    }
    p.custom-label.label-yamabuki::after{
        border-color: transparent transparent transparent #c89932;
    }*/
    /* 橙 */
    /*p.custom-label.label-daidai {
        background-color: #ee7800;
    }
    p.custom-label.label-daidai::after{
        border-color: transparent transparent transparent #a46604;
    }*/
    /* 栗 */
    /*p.custom-label.label-kuri {
        background-color: #762f07;
    }
    p.custom-label.label-kuri::after{
        border-color: transparent transparent transparent #432f2f;
    }*/
    /* 桃 */
    /*p.custom-label.label-momo {
        background-color: #f09199;
    }
    p.custom-label.label-momo::after{
        border-color: transparent transparent transparent #e95295;
    }*/
    /* 赤 */
    /*p.custom-label.label-red {
        background-color: #e60033;
    }
    p.custom-label.label-red::after{
        border-color: transparent transparent transparent #a81f1b;
    }*/
    /* 真紅 */
    /*p.custom-label.label-shinku {
        background-color: #a22041;
    }
    p.custom-label.label-shinku::after{
        border-color: transparent transparent transparent #640125;
    }*/
    /* 紅紫 */
    /*p.custom-label.label-benimurasaki {
        background-color: #b44c97;
    }
    p.custom-label.label-benimurasaki::after{
        border-color: transparent transparent transparent #7a4171;
    }*/
    /* 藍 */
    /*p.custom-label.label-ai {
        background-color: #165e83;
    }
    p.custom-label.label-ai::after{
        border-color: transparent transparent transparent #0f2350;
    }*/
    /* 青 */
    /*p.custom-label.label-blue {
        background-color: #0095d9;
    }
    p.custom-label.label-blue::after{
        border-color: transparent transparent transparent #0967a3;
    }*/
    /* 空 */
    /*p.custom-label.label-sora {
        background-color: #a0d8ef;
    }
    p.custom-label.label-sora::after{
        border-color: transparent transparent transparent #84a2d4;
    }*/
    /* 黒 */
    /*p.custom-label.label-black {
        background-color: #2b2b2b;
    }
    p.custom-label.label-black::after{
        border-color: transparent transparent transparent #0d0015;
    }*/
    /****************** アイコン ****************/
    /* チェックマーク */
    .icon-done::before {
        content: "\e876";
    }
    /* しおり */
    .icon-turned_in::before {
        content: "\e8e6";
    }


/************************************
** モバイルフッターバー
************************************/
.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; /*白*/
}

/************************************
** 検索フォーム注意事項
************************************/
.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;
}

/************************************
** 既読本のチェックボックス
************************************/
.already-read-count-area {
  text-align: center;
}

p.already-read-heading {
	margin-bottom: 0px;
	margin-top: 20px;
	color: #a22041;
}

.already-read-checkbox {
	padding: 10px;
}

.already-read-checkbox-label {
	display: block;
	padding: 5px 0px;
}

.already-read-checkbox-input{
  display: none;
}

.already-read-checkbox-span{
  padding-left: 23px;
  position:relative;
  font-weight: bold;
}

.already-read-checkbox-span::before{
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid #232323;
  border-radius: 4px;
}

/*.already-read-checkbox-input:checked + .already-read-checkbox-span{
  color: #009a9a;
}*/

.already-read-checkbox-input:checked + .already-read-checkbox-span::after{
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: 5px;
  width: 7px;
  height: 14px;
  animation: check .1s forwards;
  transform: rotate(40deg);
/*   border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a; */
  border-bottom: 3px solid #a22041;
  border-right: 3px solid #a22041;
}

@keyframes check {
  0% {
    width: 0px;
    height: 0px;
    top: 9px;
    left: 5px;
  }
  20% {
    width: 7px;
    height: 0px;
    top: 9px;
    left: 2px;
  }
  50% {
    top: 9px;
    left: 2px;
    width: 7px;
    height: 0px;
  }
  100% {
    width: 7px;
    height: 14px;
  }
}

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

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

/************************************
** マテリアルシンボル & アイコン
************************************/
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;
}

/************************************
** 本情報エリア
************************************/
.book-info {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-bottom: 30px;
	padding: 20px;
	background-color: #f5f7fa;
	border-radius: 8px;
}

.book-cover {
	flex: 1;
	text-align: center;
}

.book-cover a img {
	max-width: 100%;
	height: auto;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.book-cover a img:hover {
	opacity: 0.7;
}

.book-cover img {
	max-width: 100%;
	height: auto;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.book-cover .image-wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.book-details {
	flex: 2;
}

h3.book-title {
	font-size: 1.4rem;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #1a1a1a;
	border-left: none;
	padding: 0px;
}

.book-meta {
/* 	margin-bottom: 10px; */
}

.book-meta p {
	margin: 5px 0;
}

.buy-btn {
	width: 100%;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    box-shadow: var(--aff-shadow-normal);
    overflow: hidden;
    position: relative;
}

.buy-btn:hover {
	transform: translateY(-2px);
    box-shadow: var(--aff-shadow-hover);
}

.buy-btn a {
	display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    padding: 12px;
    padding-left: 60px; /* アイコン部分のスペース確保 */
}

.buy-btn > a:before {
	content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

/* Amazon */
.buy-btn.amazon > a {
	color: var(--aff-color-amazon);
}
.buy-btn.amazon:hover > a:before {
    background-color: var(--aff-color-amazon-transparent);
}
.buy-btn.amazon > a:before {
	background-color: var(--aff-color-amazon);
    background-image: url("/wp-content/uploads/2023/12/215a485daf5be48a4b6bb586047c0d34.webp");
}

/* ebookjapan */
.buy-btn.ebookjapan > a {
	color: var(--aff-color-ebookjapan);
}
.buy-btn.ebookjapan:hover > a:before {
    background-color: var(--aff-color-ebookjapan-transparent);
}
.buy-btn.ebookjapan > a:before {
	background-color: var(--aff-color-ebookjapan);
    background-image: url("/wp-content/uploads/2023/12/c60dac48c93c15bf1b1043696b83e7d6.png");
}

/* ブックライブ */
.buy-btn.booklive > a {
	color: var(--aff-color-booklive);
}
.buy-btn.booklive:hover > a:before {
    background-color: var(--aff-color-booklive-transparent);
}
.buy-btn.booklive > a:before {
	background-color: var(--aff-color-booklive);
    background-image: url("/wp-content/uploads/2023/12/6365ffac68aebfbae4833b4c52ed9aaa.png");
}

/****** 楽天 */
.buy-btn.rakuten > a {
	color: var(--aff-color-rakuten);
}
.buy-btn.rakuten:hover > a:before {
    background-color: var(--aff-color-rakuten-transparent);
}
.buy-btn.rakuten > a:before {
	background-color: var(--aff-color-rakuten);
    background-image: url("/wp-content/uploads/2023/12/e82f5c0fa9d958d0c49e3ddb2a7abbe3.png");
}

/************************************
** 他作品おすすめエリア
************************************/
.recommend-box {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	margin: 30px 0;
}

.recommend-title {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
	color: #333;
}

.recommend-list {
	display: flex;
	overflow-x: auto;
	gap: 15px;
	padding-bottom: 15px;
}

.recommend-item {
	min-width: 140px;
	text-align: center;
	position: relative;
}

.recommend-item p {
	font-size: 0.9rem;
	margin: 5px 0;
}

.recommend-item-image-wrapper {
    position: relative;
    display: inline-block;
}
.recommend-item-image-wrapper:hover {
	opacity: 0.7;
}

.store-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    padding: 3px 6px;
    font-size: 0.7rem;
    color: #fff;
    z-index: 2; /* aタグよりも前面に表示 */
    pointer-events: none; /* クリックイベントを下のaタグに透過 */
}

.rakuten-badge {
    background-color: rgba(191, 0, 0, 0.7);
}

.recommend-item-title-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

.store-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    flex-shrink: 0;
}

.amazon-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/wp-content/uploads/2023/12/215a485daf5be48a4b6bb586047c0d34.webp");
}

.recommend-item-title {
	text-decoration: underline;
    color: #0066c0;
}
.recommend-item-title:hover {
    color: #b32d2e;
}

.scroll-arrow {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.7);
	color: white;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	z-index: 10;
	animation: pulse 2s infinite;
}

.scroll-arrow:hover {
	background: rgba(0,0,0,0.9);
	transform: translateY(-50%) scale(1.1);
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
	70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/************************************
** バッチ（完結済み・メディアミックスなど）
************************************/
.bk-badges-container {
	position: absolute;
/* 	top: 10px;
	left: 10px; */
	display: flex;
	flex-direction: column;
	gap: 5px;
	z-index: 10;
}

.bk-badge {
	background: #16160e;
	color: white;
	padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
	text-align: center;
}

.completed-badge {
	background: var(--badge-color-completed);
}

.media-mix-badge {
    background: var(--badge-color-media-mix);
}

.original-work-novel-badge {
    background: var(--badge-color-original-work-novel);
}

.kindle-unlimited-badge, .amazon-audible-badge {
    background: var(--badge-color-amazon-novel);
}

/************************************
** 本のギャラリーグリッド
************************************/
.bks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
    gap: 20px;
	margin-top: 30px;
}

.bk-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* .bk-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
} */

.bk-image {
    height: auto;
    min-height: 250px;
    overflow: hidden;
    position: relative;
}

.bk-image:hover {
	opacity:0.5;
	transition:0.3s;
}

.bk-image a {
    display: block;
    width: 100%;
}

.bk-image img:last-child {
    width: 100%;
    height: 250px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

/* aff linkの1pxピクセルを非表示に */
/* .bk-image img:first-child {
    display: none;
} */

.bk-card:hover .manga-image img:last-child {
    transform: scale(1.05);
}

.bk-info {
    padding: 15px;
    background: white;
}

p.award-round, p.bk-series {
	color: #223a70;
	font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.3;
}

p.bk-ti {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.3;
}

p.bk-ti a {
    color: #333;
    text-decoration: underline;
    transition: color 0.3s;
}

p.bk-ti a:hover {
    color: #ff6b6b;
}

p.bk-au {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.bk-btn {
    display: block;
    background: #4a69bd;
    color: white;
    text-align: center;
    padding: 8px 0;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.bk-btn:hover {
    background: #1e3799;
}

/************************************
** ショートコード用CSS
************************************/
/* 左線が緑のハイライトボックス */
.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;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
	}
	
  	/************************************
	** 本情報エリア
	************************************/
	.book-info {
		flex-direction: column;
	}
	.book-cover img, .book-cover a img {
		max-width: 60%;
	}

	/************************************
	** 本のギャラリーグリッド
	************************************/
    .bks-grid {
        grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
        gap: 10px;
    }
	
	.bk-badge {
		font-size: 0.6em;
	}

    .bk-image {
        min-height: 230px;
		text-align: center;
    }
	
	.bk-image a img, .bk-image img {
		height: 230px;
	}

    .bk-ti {
        font-size: 0.95rem;
    }

    .bk-au {
        font-size: 0.8rem;
    }
}

/*768px以下*/
@media screen and (max-width: 768px){

}

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