@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){
  /*必要ならばここにコードを書く*/
}

/* カスタマイズされたリストの点 */
.ullist {
    list-style: none; /* デフォルトの点を消す */
    line-height: 1.8; /* 行間を広げる */
}

.ullist > li { 
    position: relative; /* 点の配置基準 */
}

.ullist > li:before {
    content: ''; /* 点の内容を空に */
    background-color: #007acc; /* 点の色 */
    position: absolute; /* 点の位置 */
    top: 11px; /* 垂直位置の調整 */
    left: -1em; /* 水平位置の調整 */
    width: 7px; /* 点の幅 */
    height: 7px; /* 点の高さ */
    border-radius: 50%; /* 点を丸くする */
}

/* 人気記事ランキング全体のデフォルトラベル背景色 */
.widget-entry-cards.ranking-visible .card-thumb::before {
    background: #666666; /* ラベル全体のデフォルト背景色（グレー） */
}

/* ランキング1位のラベル背景色（金色） */
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
    background: #cca11f; /* ゴールド */
}

/* ランキング2位のラベル背景色（銀色） */
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
    background: #b1b1b3; /* シルバー */
}

/* ランキング3位のラベル背景色（銅色） */
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
    background: #b37036; /* ブロンズ */
}

/* 新着記事のNEW!（背景色付き） */
.new-txt {
    background-color: #ff0000; /* 背景色：赤 */
    color: #fff; /* 文字色：白 */
    font-size: .8em;
    padding: .1em .5em; /* 内側余白 */
    border-radius: 1px; /* 角の丸み */
    margin-right: 5px; /* 右側の余白 */
}

/* 点滅効果 */
.new-txt {
    animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.widget_toc{
	max-height: 800px; /* 目次の高さを調整 */
	overflow-y: auto; /* 垂直スクロールバーを有効にする */
}

/*ポチップ*/
.pochipp-box {
	box-shadow: none!important;/*影を消す*/
	background-color: initial!important;/*ポチップ背景色を無効にする*/
}

/* ボタンのスタイルを調整する：アウトラインスタイルの設定 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn{
	box-shadow: none!important;
	border:1px solid currentColor;
}

 /* マウスオーバー時に文字色を白に変更 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn:hover {
	color: #fff !important;
}

/* マウスオーバー時に背景色をAmazonカラーに設定 */
.pochipp-box[data-btn-style=outline] .-amazon>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-amazon) !important;
	border-color:var(--pchpp-color-amazon);
}

 /* マウスオーバー時に背景色を楽天カラーに設定 */
.pochipp-box[data-btn-style=outline] .-rakuten>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-rakuten) !important;
	border-color:var(--pchpp-color-rakuten);
}

/* マウスオーバー時に背景色をYahooカラーに設定 */
.pochipp-box[data-btn-style=outline] .-yahoo>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-yahoo) !important; 
	border-color:var(--pchpp-color-yahoo);
}

/* マウスオーバー時に背景色をメルカリカラーに設定 */
.pochipp-box[data-btn-style=outline] .-mercari>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-mercari) !important; 
	border-color:var(--pchpp-color-mercari);
}

/* ポチップ｜インラインボタン色個別設定----------------------------------------------*/

.-amazon.pochipp-inline__btnwrap>.pochipp-inline__btn{
	 background-color:var(--pchpp-color-amazon)!important;
}

.-rakuten.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-rakuten)!important;
}

.-yahoo.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-yahoo)!important;
}

/*ウィジェット記事の更新日を表示・更新日がない場合は投稿日を表示*/
.widget-entry-card-date > span:nth-last-of-type(2) {
   display:none;
	text-align: right;/*右寄せ*/
}

/* 白ステッチをつける */
.box3-4 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em; /* 内側余白 */
    position: relative;
    z-index: 0;
    background-color: #d6e0ea; /* 淡いブルーグレー */
}

.box3-4::before {
    content: '';
    position: absolute;
    inset: 0; /* top, right, bottom, left を一括指定 */
    margin: 5px;
    border: 2px dashed #fff;
    border-radius: 3px;
    z-index: -1;
    display: block;
}

/* pタグの余白 */
.box3-4 p {
    margin: 0;
}