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

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

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

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

/* 480px以下 */
/* スマホ見出し幅 */
@media screen and (max-width: 480px) {
  /* 必要ならばここにコードを書く */
  .entry-title,
  .article h2 {
    padding: 16px 25px 16px 25px;
  }
}

/************************************
** 吹き出しアイコン 共通スタイルまとめ
************************************/

.sb-id-11 .speech-icon img,
.sb-id-11 .speech-icon amp-img,
.sb-id-12 .speech-icon img,
.sb-id-12 .speech-icon amp-img,
.sb-id-13 .speech-icon img,
.sb-id-13 .speech-icon amp-img,
.sb-id-14 .speech-icon img,
.sb-id-14 .speech-icon amp-img,
.sb-id-15 .speech-icon img,
.sb-id-15 .speech-icon amp-img,
.sb-id-16 .speech-icon img,
.sb-id-16 .speech-icon amp-img,
.sb-id-17 .speech-icon img,
.sb-id-17 .speech-icon amp-img,
.sb-id-18 .speech-icon img,
.sb-id-18 .speech-icon amp-img,
.sb-id-19 .speech-icon img,
.sb-id-19 .speech-icon amp-img,
.sb-id-20 .speech-icon img,
.sb-id-20 .speech-icon amp-img,
.sb-id-21 .speech-icon img,
.sb-id-21 .speech-icon amp-img,
.sb-id-22 .speech-icon img,
.sb-id-22 .speech-icon amp-img,
.sb-id-23 .speech-icon img,
.sb-id-23 .speech-icon amp-img,
.sb-id-24 .speech-icon img,
.sb-id-24 .speech-icon amp-img {
    border: 1px solid #884898;
    box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

.sb-id-11 .speech-balloon,
.sb-id-12 .speech-balloon,
.sb-id-13 .speech-balloon,
.sb-id-14 .speech-balloon,
.sb-id-15 .speech-balloon,
.sb-id-16 .speech-balloon,
.sb-id-17 .speech-balloon,
.sb-id-18 .speech-balloon,
.sb-id-19 .speech-balloon,
.sb-id-20 .speech-balloon,
.sb-id-21 .speech-balloon,
.sb-id-22 .speech-balloon,
.sb-id-23 .speech-balloon,
.sb-id-24 .speech-balloon {
    border: 1px solid #884898;
    border-radius: 25px;
    box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

.sb-id-11.sbs-think .speech-balloon::before,
.sb-id-11.sbs-think .speech-balloon::after,
.sb-id-12.sbs-think .speech-balloon::before,
.sb-id-12.sbs-think .speech-balloon::after,
.sb-id-13.sbs-think .speech-balloon::before,
.sb-id-13.sbs-think .speech-balloon::after,
.sb-id-14.sbs-think .speech-balloon::before,
.sb-id-14.sbs-think .speech-balloon::after,
.sb-id-15.sbs-think .speech-balloon::before,
.sb-id-15.sbs-think .speech-balloon::after,
.sb-id-16.sbs-think .speech-balloon::before,
.sb-id-16.sbs-think .speech-balloon::after,
.sb-id-17.sbs-think .speech-balloon::before,
.sb-id-17.sbs-think .speech-balloon::after,
.sb-id-18.sbs-think .speech-balloon::before,
.sb-id-18.sbs-think .speech-balloon::after,
.sb-id-19.sbs-think .speech-balloon::before,
.sb-id-19.sbs-think .speech-balloon::after,
.sb-id-20.sbs-think .speech-balloon::before,
.sb-id-20.sbs-think .speech-balloon::after,
.sb-id-21.sbs-think .speech-balloon::before,
.sb-id-21.sbs-think .speech-balloon::after,
.sb-id-22.sbs-think .speech-balloon::before,
.sb-id-22.sbs-think .speech-balloon::after,
.sb-id-23.sbs-think .speech-balloon::before,
.sb-id-23.sbs-think .speech-balloon::after,
.sb-id-24.sbs-think .speech-balloon::before,
.sb-id-24.sbs-think .speech-balloon::after {
    border: 1px solid #884898;
    box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

/************************************
**** タグページのタグリンク共通スタイル
************************************/
.tagcloud a {
  border: 1px solid #884898;
  border-radius: 25px;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
  transition: background-color 0.3s, color 0.3s;
}
.tagcloud a:hover {
  background-color: #d3d3d3;
  color: #333333;
}

/************************************
**** アーカイブ（タグ＆カテゴリ）ページのアイキャッチ非表示
************************************/
.archive.tag .eye-catch-wrap,
.category.archive .eye-catch-wrap {
  display: none;
}

/************************************
** マイクロバルーン・マイクロテキスト共通調整
************************************/
.micro-balloon {
  font-size: 0.9em;
  filter: drop-shadow(3px 3px rgba(255, 158, 206, 1));
}
.micro-top,
.micro-bottom {
  font-size: 0.9em;
}
/************************************
** 細々設定
************************************/
/* reCAPTCHA非表示（必要ならアンコメント） */
/* .grecaptcha-badge { visibility: hidden; } */

/* reCAPTCHAバッジ位置・サイズ調整 */
.grecaptcha-badge {
  left: 6px !important;
  width: 70px !important;
  transition: width 0.3s;
}
.grecaptcha-badge:hover {
  width: 256px !important;
  left: 6px !important;
}

/* 固定ページの日付・著者情報非表示 */
.page .date-tags,
.page .author-info {
  display: none;
}

/************************************
** グローバルナビ
************************************/
/* グローバルナビ リンクの基本スタイル */
#navi .navi-in a {
  color: #333333;
  background-color: #f6d3ea;
  border-radius: 4px;
  border: 1px solid #884898;
  box-shadow: 3px 3px rgba(255, 158, 206, 1);
}

/* グローバルメニューのボーダー（4つのうちすべて同じ色なのでまとめ可能） */
.navi-in > ul > li {
  border-bottom: ridge 3px #f6d3ea;
}

/* グローバルナビリンクの疑似要素 */
#navi .navi-in a::after {
  background-color: #ababf3;
}

/* グローバルナビ 仕切り線 */
/* 左端と2番目以降のすべてのliの右境界線 */
#navi .navi-in > ul li {
  border-right: 1px solid #884898;
  border-left: none;
}

/* グローバルナビ 文字サイズ */
#navi .navi-in > .menu-header .item-label {
  font-size: 18px;
  font-weight: normal;
}

/************************************
** モバイルメニュー関連
************************************/
/* モバイルヘッダーメニュー（3の倍数＋2番目）背景・文字色 */
.mobile-header-menu-buttons.mobile-menu-buttons > li:nth-of-type(3n + 2) {
  background-color: #333333;
  color: #dbccff;
}

/* モバイルフッターメニュー */
.mobile-footer-menu-buttons.mobile-menu-buttons > li {
  background-color: #dbccff;
  color: #333333;
}

/* モバイルメニュー ボタン共通 */
.search-menu-button.menu-button,
.navi-menu-button.menu-button {
  background-color: #333333;
  color: #e9e9e9;
  height: 55px;
  padding-top: 8px;
}

/* ロゴ用メニューボタン */
.logo-menu-button.menu-button {
  background-color: #333333;
  height: 55px;
}

/* モバイルメニューボタン内のリンクの上マージン調整 */
.mobile-menu-buttons .menu-button > a {
  margin-top: 6px;
}

/************************************
** ボックスメニュー
************************************/
/* ボックスメニュー全体 */
.box-menu {
  padding: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.3s;
}

/* ホバー時 */
.box-menu:hover {
  box-shadow: none;
  opacity: 0.8;
}

/* ラベル・説明文は非表示 */
.box-menu-label,
.box-menu-description {
  display: none;
}

/* アイコン内の要素の余白なし、最大サイズ設定 */
.box-menu-icon * {
  margin: 0;
  max-width: 100%;
  max-height: 300px;
}

/* アイコン画像の拡大アニメーション */
.box-menu-icon img {
  transition: transform 0.3s;
}

.box-menu-icon img:hover {
  transform: scale(1.1);
  transition-duration: 0.8s;
}

/* ボックスメニューの余白調整 */
.content-top {
  margin-top: 0;
  margin-bottom: 2.5em;
}

/* 最初のボックスメニューを中央寄せ */
.box-menu:first-child {
  margin-left: auto;
}

/************************************
** プロフィール
************************************/
/* プロフィール全体の枠と影 */
.nwa .author-box {
  border: 1px solid #884898;
  border-radius: 25px;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

/* アイコンの影 */
.nwa .author-box .author-thumb img {
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
  border: 1px solid #884898; /* 縁もここでまとめました */
}

/* プロフィールテキスト中央揃え */
.nwa .author-box .author-description {
  text-align: center;
}

/************************************
** エントリーカード
************************************/
/* タイトルの文字サイズと太さ */
h2.entry-card-title.card-title.e-card-title {
  font-size: 18px;
  font-weight: 300;
}

/* エントリーカードの枠と影 */
a.entry-card-wrap.a-wrap.border-element.cf {
  border: 1px solid #333333;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

/* 関連記事カードの背景と枠（3つのパターンをまとめて） */
.entry-card-wrap.a-wrap:nth-of-type(3n + 1),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 1),
.entry-card-wrap.a-wrap:nth-of-type(3n + 2),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 2),
.entry-card-wrap.a-wrap:nth-of-type(3n + 3),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 3) {
  background-color: #fff;
  border: solid 1px #333333;
}

/************************************
** ブログカード
************************************/
/* ブログカード全体のスタイル */
.blogcard-wrap.a-wrap {
  border: none;
  position: relative;
  background-color: #fff;
  border: solid 1px #333333;
  border-radius: 30px;
  box-shadow: 3px 3px #ff9ece;
}
.blogcard-wrap.a-wrap:hover {
  background-color: #c0a2c7;
}

/* ブログカード内の画像の角を丸く */
.blogcard-thumbnail img {
  border-radius: 20px;
}
/* ブログカードのラベル色設定 */
/* 共通のラベル基本スタイル */
.bct-related .blogcard-label,      /* 関連記事 */
.bct-reference .blogcard-label,    /* 参考記事 */
.bct-reference-link .blogcard-label, /* 参考リンク */
.bct-popular .blogcard-label,      /* 人気記事 */
.bct-together .blogcard-label,     /* あわせて読みたい */
.bct-detail .blogcard-label,       /* 詳細はこちら */
.bct-check .blogcard-label,        /* チェック */
.bct-official .blogcard-label,     /* 公式サイト */
.bct-prev .blogcard-label,         /* 前回の記事 */
.bct-next .blogcard-label,         /* 続きの記事 */
.bct-dl .blogcard-label {           /* ダウンロード */
  background-color: #333333;
  top: -25px;
  border-radius: 25px;
  font-size: 16px;
}

/* ピックアップラベルの特別スタイル */
.bct-pickup .blogcard-label {
  background-color: #ff63A4;
  border: 1px solid #333333;
  top: -25px;
  border-radius: 25px;
  font-size: 16px;
}

/************************************
** モバイルスライドインメニュー
************************************/

/* モバイルメニューのボタン文字色 */
.search-menu-button.menu-button,
.navi-menu-button.menu-button {
  color: #f8def2;
}

/* スライドインメニュー本体の位置と背景 */
.navi-menu-content {
  left: 0;
  right: auto;
  background-color: rgba(163, 120, 221, 0.5);
}

/* メニュードロワー内のリンク文字サイズと色 */
.menu-drawer a {
  font-size: 15px;
  color: #f8def2;
}

/************************************
** おすすめカード・おすすめ記事ナビカード
************************************/

/* おすすめカード全体の調整 */
#recommended.recommended.cf.rcs-large-thumb-on.rcs-card-margin {
  margin-top: 30px;       /* 上マージン */
  margin-bottom: -20px;   /* 下マージン */
  transform: scale(0.92); /* 縮小表示 */
}

/* おすすめカードのリンク見た目 */
.navi-entry-card-link.widget-entry-card-link.a-wrap {
  border-radius: 30px;
  box-shadow: 3px 3px rgba(255, 158, 206, 1);
}

/* おすすめ記事のナビカード タイトル */
.navi-entry-card-title {
  font-size: 0.9em;
  line-height: 1.5em;
}

/************************************
** 関連記事アイキャッチ画像カスタマイズ
************************************/
.related-entry-card-thumb-image.card-thumb-image.wp-post-image {
  border-radius: 20px;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

/************************************
** マーカー（背景・アンダーライン）
************************************/

/* 背景マーカー */
.marker         { background-color: #ffd9b3; } /* 黄色 */
.marker-red     { background-color: #edbebe; } /* 赤色 */
.marker-blue    { background-color: #b2ffb2; } /* 青色 */

/* アンダーライン風マーカー */
.marker-under       { background: linear-gradient(transparent 60%, #ffd9b3 60%); } /* 黄色 */
.marker-under-red   { background: linear-gradient(transparent 60%, #edbebe 60%); } /* 赤色 */
.marker-under-blue  { background: linear-gradient(transparent 60%, #b2ffb2 60%); } /* 青色 */

/*
スポンサーリンクのラベルサイズ（現在未使用）
.ad-area .ad-label {
	font-size: 80%;
}
*/

/************************************
** ページネーション・送信ボタン
************************************/

/* 共通スタイル（次ページリンク、コメントボタン、送信ボタン） */
.pagination-next-link,
.comment-btn,
.container input[type="submit"] {
	border: 1px solid #333333;
	border-radius: 6px;
	border-image: linear-gradient(
		to right,
		#333333 0%,
		#333333 10%,
		rgba(0, 0, 0, 0) 10%,
		rgba(0, 0, 0, 0) 90%,
		#333333 90%,
		#333333 100%
	);
	border-image-slice: 1;
	background: none;
	width: 40%;
	margin: 24px auto;
	transition: all 0.4s;
	font-size: 18px;
}

/* ホバー時 */
.pagination-next-link:hover {
	background-color: #d3d3d3;
	color: #333333;
}

/* 現在のページ番号 */
.pagination .current {
	border: 1px solid #333333;
	background-color: #cb81f2;
	color: #333333;
}

/* 前のページ・次のページリンク */
.prev-post.a-wrap,
.next-post.a-wrap {
	background-color: #fff;
	border: solid 2px #884898;
}

/************************************
** 広告サイズ（中央寄せ）
************************************/
.ad_size_400,
.ad_size_600 {
	margin: 0 auto;
	text-align: center;
}

.ad_size_400 {
	width: 400px;
}

.ad_size_600 {
	width: 600px;
}

/************************************
****　もしも　かんたんリンク
************************************/
/* ボックス全体 */
div.easyLink-box {
	margin: 0 auto !important;
	padding: 1em 1.5em !important;
	background-color: #fafafa !important;
	border: none !important;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
	line-height: 1.5;
	max-width: 90% !important;
}

@media screen and (max-width: 703px) {
	div.easyLink-box {
		text-align: center;
		padding: 10px !important;
	}
}

@media screen and (max-width: 620px) {
	div.easyLink-box {
		display: block !important;
	}
}

@media screen and (max-width: 480px) {
	div.easyLink-box {
		max-width: 100% !important;
	}
}

/* 商品名 */
.easyLink-info-name {
	text-align: center;
}

.easyLink-info-name a {
	font-size: 16px;
	color: #565656 !important;
}

.easyLink-info-name a:hover {
	color: #337AB7 !important;
}

@media screen and (max-width: 703px) {
	.easyLink-info-name a {
		font-size: 18px;
	}
}

/* 画像周り */
@media screen and (min-width: 704px) {
	.easyLink-img {
		margin-top: 1em;
	}
	.easyLink-img-box {
		align-items: start !important;
	}
}

@media screen and (min-width: 481px) and (max-width: 620px) {
	.easyLink-img {
		display: inline-block !important;
	}
}

.easyLink-arrow-left img,
.easyLink-arrow-right img {
	box-shadow: none;
}

/* ボタン */
.easyLink-info-btn a {
	border-radius: 20px !important;
	line-height: 40px !important;
	width: 75% !important;
	font-size: 0.9em !important;
}

@media screen and (min-width: 704px) {
	.easyLink-info-btn {
		margin-top: 0.5em !important;
		justify-content: center !important;
	}
	.easyLink-info-btn a {
		margin-top: 0.5em !important;
	}
}

@media screen and (max-width: 703px) {
	.easyLink-info-btn {
		margin-top: 0.2em !important;
	}
	.easyLink-info-btn a {
		display: inline-block !important;
		margin: 0.5em 0 0 !important;
	}
}

@media screen and (max-width: 620px) {
	.easyLink-info-btn a {
		width: 85% !important;
	}
}

/* メーカー・モデルの非表示 */
.easyLink-info-maker,
.easyLink-info-model {
	display: none;
}
/************************************
****　サイドバー
************************************/
.sidebar h3 {
	font-size: 18px;               /* フォントサイズ */
	font-weight: normal;           /* 太さノーマル */
	text-align: center;            /* 中央揃え */
	border: 1px solid #884898;     /* 枠線色 */
	background-color: #e8d1ff;     /* 背景色 */
	border-radius: 25px;           /* 角丸 */
	box-shadow: 3px 3px rgba(255, 158, 206, 1); /* 影 */
	/* letter-spacing: px; ← 無効な値なので削除 */
}

.sidebar h3::before {
	border: 1px solid #e4007f;     /* 見出しの前に線（クリップ） */
}

/* サイドバーのエントリーカードの文字サイズ */
.widget-entry-card {
	font-size: 14px;
}
/************************************
****　ヘッダー
************************************/
.logo-header {
	padding: 0 20px 0 0; /* 上 右 下 左 */
}

/************************************
****　埋め込み中央揃え
************************************/
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet {
	margin: 30px auto; /* 上下に余白＋中央寄せ */
}
/************************************
****　もっと見る
************************************/
.list-more-button {
	background: #f3e7e7;
	border: 1px solid #333333;
	box-shadow: 3px 3px rgba(192, 162, 199, 1);
	color: #333333;
	transition: 0.5s; /* アニメーション時間 */
	width: 300px;
}
/************************************
** カテゴリーラベル
************************************/
.cat-label {
	font-size: 15px;
	border: 1px solid #884898;
	background-color: #ffcce5;
	border-radius: 25px;
	box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

/************************************
** カテゴリーラベル・タグラベル
************************************/
.cat-link, .tag-link {
	text-decoration: none;
	font-size: 15px;
}

.tag-link {
  margin: 0.2em 0.4em 0.4em 0; /* 下と右に隙間を付ける */
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.4em; /* 右の余白分マイナスして調整 */
}

.tag-link:hover {
    background-color: #d3d3d3;
    color: #333333;
}
/************************************
** アイキャッチ上のラベル
************************************/
.eye-catch .cat-label {
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.eye-catch .cat-label {
		font-size: 12px;
	}
}
/************************************
** エントリーカードアイキャッチ画像（サムネイル）
************************************/
.card-thumb img {
  border-radius: 30px; /* サムネイルの角を丸める */
  border: 1px solid #333; /* ボーダーの指定 */
}

/************************************
** 行間調整、センター配置（スポンサーリンクなど）
************************************/
.r-margin-center {
  margin-bottom: -1px; /* マイナスのマージンは注意が必要ですが問題なければOK */
  text-align: center;
}

/************************************
** 人気記事ランキング表示
************************************/
/* 共通：すべての順位の番号バッジのスタイル */
.widget-entry-cards.ranking-visible .card-thumb::before {
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    padding: 0.5em;
    display: inline-block;
    margin-right: 0.5em;
    border: 1px solid #333; /* デフォルトのボーダー */
}

/* ホバー時のエフェクト */
.widget-entry-cards.ranking-visible .card-thumb:hover::before {
    background-color: #555;
    color: #fff;
    transition: background-color 0.3s ease;
}

/* 1～5位のカスタムカラー */
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
    background: #ff3399;
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
    background: #6a5acd;
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
    background: #f6d860;
    color: #333;
}
.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {
    background: #559e8a;
}
.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {
    background: #4a90e2;
}

/* 6～10位：白黒交互＋それぞれのスタイル */
.widget-entry-cards.ranking-visible .no-6 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-8 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-10 .card-thumb::before {
    background: #f9f9f9;
    color: #000;
    text-shadow: none;
    border: 1px solid #ccc;
}

.widget-entry-cards.ranking-visible .no-7 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-9 .card-thumb::before {
    background: #222;
    color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: 1px solid #444;
}
/************************************
** 人気記事ホバー時など角丸に
************************************/
.widget-entry-cards .a-wrap {
    border-radius: 10px;
    overflow: hidden;
}

/************************************
** 人気記事ランキング 文字太さ
************************************/
.popular-entry-cards .card-title {
  font-weight: 300;
}

/************************************
** 画像の影を消す
************************************/
figure.image-noshadow img {
    box-shadow: none;
}

/************************************
** ctabox
************************************/
.cta-box {
    border: solid 1px #9d9d9d;
    border-radius: 8px;
    background-color: #f8def2;
    color: #333333;
}

/************************************
** 入力系（検索・カテゴリーなど）
************************************/
.search-edit,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
    border: ridge 1px #333333;
}

/************************************
** 見出しh1
************************************/
.article h1 {
  padding: 0;
  font-weight: 300;
}

/************************************
** 見出しh2
************************************/
.article h2 {
  background: #e8d1ff;
  border: 1px solid #884898;
  border-radius: 25px;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
  font-weight: 300;
}

/************************************
** 見出しh3
************************************/
/* リセット */
.article h3 {
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  padding: 0;
}

/* カスタマイズ */
.article h3 {
  position: relative;
  padding: 1.0rem 2rem;
  color: #fff;
  border-radius: 10px;
  background: #A378DD;
  font-weight: 300;
}

.article h3:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #A378DD transparent transparent transparent;
}
/************************************
** 見出しh4
************************************/
/* リセット */
.article h4 {
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  padding: 0;
}

/* カスタマイズ */
.article h4 {
  position: relative;
  padding: 1.0rem 2rem;
  border: solid 2px #884898;
  border-radius: 3px 5px 3px 5px;
  font-weight: 300;
}

.article h4:before,
.article h4:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid 2px #884898;
  border-radius: 50%;
}

.article h4:after {
  top: -12px;
  left: -12px;
}

.article h4:before {
  bottom: -12px;
  right: -12px;
}

/************************************
** 囲みボタン
************************************/
/* 下の余白なし */
.button-block,
.btn-wrap {
  margin-bottom: 0 !important;
}

/************************************
** 文字間隔
************************************/
.entry-content {
  letter-spacing: 0.04em;
}

/************************************
** キャプション文字サイズ変更
************************************/
.wp-block-image figcaption {
  font-size: 15px;
}

/************************************
** SNS埋め込み中央よせ
************************************/
.sns_center {
  display: flex;
  justify-content: center;
}

/************************************
** 人気記事文字サイズ
************************************/
.widget-entry-card {
  font-size: 16px;
}

/************************************
** 次の記事／前の記事のフォント
************************************/
.prev-post.a-wrap.cf,
.next-post.a-wrap.cf {
  font-size: 16px; /* フォントサイズ */
}

/* スマホでのフォントサイズ */
@media screen and (max-width: 480px) {
  .prev-post.a-wrap.cf,
  .next-post.a-wrap.cf {
    font-size: 16px; /* フォントサイズ */
  }
}

/************************************
** 日付のカスタマイズ
************************************/
.post-date,
.post-update {
  font-size: 16px; /* フォントサイズ */
}

/************************************
** 目次
************************************/
/* 目次タイトルデザイン変更 */
.toc-title {
  color: #ffffff;
  font-size: 1.2em; /* 文字の大きさ */
  border-radius: 2px;
  background-color: #cb81f2;
  border: 1px solid #884898;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

.toc-content {
  color: #333333;
  margin: 1px 0;
  padding: 0.2em 1.2em;
  border-radius: 4px;
  border: 1px solid #884898;
  box-shadow: 3px 3px rgba(192, 162, 199, 1);
}

/* 目次背景色変更 */
.toc {
  background-color: #ffffff;
}

/* サイドバーの目次のみデザイン変更 */
#sidebar .toc {
  padding: 10px; /* 周囲の余白 */
}

.sidebar .toc-content {
  background: #fff;
}

/************************************
** フッター文字サイズ
************************************/
.navi-footer-in a {
  font-size: 16px;
  font-weight: 300;
}

/************************************
** メインカラムの角を丸く
************************************/
#main {
  border-radius: 20px;
}

/************************************
** サイドバーの角を丸く
************************************/
#sidebar {
  border-radius: 20px;
}

/************************************
** パンくずリストの角を丸く
************************************/
.breadcrumb {
  border-radius: 20px;
}

/************************************
** アイキャッチ画像の角を丸く
************************************/
.entry-header .eye-catch-wrap img {
  border-radius: 20px;
  border: 1px solid #333; /* ボーダーの指定 */
}

/************************************
** サイドバー ドロップダウンリスト(カテゴリー・アーカイブ)カスタマイズ
************************************/
#sidebar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: 1px solid #333; /* ボーダーの指定 */
  border-radius: 10px; /* 角丸の指定 */
  font-size: 15px; /* 文字サイズ */
  color: #333; /* 文字色 */
}

#sidebar select::-ms-expand {
  display: none;
}

#sidebar .widget_archive {
  position: relative;
}

/************************************
** カルーセル
************************************/
#carousel .carousel-in {
  border-radius: 20px; /* 角丸の指定 */
}

/************************************
** 独自クラス 画像の角を丸く
************************************/
.img-kadomaru img {
  border-radius: 10px;
  border: 1px solid #333; /* ボーダーの指定 */
}

/************************************
** 独自クラス 画像の角を斜めに
************************************/
.img-kadomaru-naname img {
  border-radius: 10px 50px;
  border: 1px solid #5a2e8a; /* 濃い紫のメイン線 */
  box-shadow: 0 4px 8px rgba(90, 46, 138, 0.5);
  outline: 1px solid #b99ff3; /* うっすら薄紫の細線を追加 */
  outline-offset: 3px; /* メイン枠線からちょっと離す */
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease, outline-color 0.3s ease;
}

.img-kadomaru-naname img:hover {
  border-color: #3f1f5f; /* もっと濃い紫 */
  box-shadow: 0 6px 15px rgba(63, 31, 95, 0.8);
  outline-color: #d1befd; /* ホバー時は少し明るく */
  transform: scale(1.06) rotate(-1deg);
}
/************************************
** 独自クラス 右側にスペース
************************************/
.margin-r10 {
  margin-right: 10px;
}

/************************************
** 区切り線
************************************/
.kugirisen {
  position: relative;
  overflow: visible;
  text-align: center;
  color: #884898;
  border-width: 3px 0 0 0;
  border-style: double;
  border-color: #884898;
}
.kugirisen::after {
  position: absolute;
  top: -0.7em;
  left: 50%;
  display: inline-block;
  content: '☆(๓´˘`๓)☆';
  background: #ffffff;
}

/************************************
** キャプション
************************************/
.wp-block-image figcaption {
  font-size: 16px; /* 文字サイズ */
  color: #884898;
}

/************************************
** 関連記事 文字太さ
************************************/
.related-entry-card-title {
  font-weight: 300;
}

/************************************
** 目次開閉
************************************/
#toc {
  max-height: 1000px; /* 最初から表示する or 必要に応じて調整 */
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}

/* 開閉ボタンそのものを非表示にする */
#toc::before {
  display: none;
}

/************************************
** ブログカードのRead More角丸
************************************/
.blogcard-wrap.a-wrap:hover:after {
  border-radius: 20px;
}

/************************************
** 太字に見えないので太字に強制
************************************/
strong, b {
  font-weight: bold !important;
}
/************************************
** SUZURI商品埋め込み用
************************************/
.suzuri-embed-box {
  border: solid 1px #a66ca6;
  border-radius: 16px;
  box-shadow: 1px 1px 5px rgba(166, 108, 166, 0.4);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0.5em 0 1em;
  background-color: #f9f0fa;
  transition: background-color 0.3s ease;
}

.suzuri-embed-box:hover {
  background-color: #d9c2e1;
}
/************************************
** ブログ村ランキングウィジェット
************************************/
/* ブログ村ランキングウィジェットの親コンテナ調整 */
.blogmura-blogparts {
  background-color: #f9f0fa; /* サイトの優しい背景色に合わせる */
  border: 1px solid #a66ca6; /* Danguma Rollie風の紫系のボーダー */
  border-radius: 16px;
  padding: 0.5em 1em;
  box-shadow: 1px 1px 5px rgba(166, 108, 166, 0.3);
  font-size: 14px;
  color: #4a4a4a;
  text-align: center;
  max-width: 100%;
  margin: 1em auto;
  /* ホバーの背景色変化はなし */
  transition: none;
  cursor: default;
}

/* ブログ村のロゴ画像やバナーがあればサイズ調整 */
.blogmura-blogparts img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 0.5em;
  display: inline-block;
}
/************************************
** デザイン記録用ボタン
************************************/
.button-purple-grad {
  display: inline-block;
  padding: 0.6em 1.2em;
  background: linear-gradient(135deg, #fff7ff, #f1e6f7); /* 明るめ */
  color: #444;
  text-decoration: none;
  border-radius: 1.5em;
  font-size: 0.95rem;
  border: 1px solid #a66ca6;
  box-shadow: 2px 2px 5px rgba(166, 108, 166, 0.2);
  transition: background 0.3s ease;
}
.button-purple-grad:hover {
  background: #f6e9fb;
}
/************************************
** SUZURI商品ページ用
************************************/
.suzuri-plain-note {
  font-size: 0.95em;
  text-align: center;
  margin: 0.5em 0 0.8em;
  font-weight: bold;
  color: #a66ca6;
}

.suzuri-button-link {
  text-align: center;
  margin: 0.8em 0 1.5em;
}
/************************************
** ギャラリー背景など
************************************/
.wp-block-gallery {
  background-color: #222; /* 黒背景 */
  padding: 1rem;
  border-radius: 12px;
}

.wp-block-gallery img {
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(166, 108, 166, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

/* デフォルト（モバイルなど）では拡大あり */
.wp-block-gallery img:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 0 8px #000,
    0 0 20px rgba(0, 0, 0, 0.6);
  z-index: 10;
  position: relative;
}

/* PCサイズ以上では拡大なし */
@media (min-width: 768px) {
  .wp-block-gallery img:hover {
    transform: none;
  }
}
/************************************
** イメージ画像注意書き用
************************************/
.suzuri-img-warning {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.5em;
}