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


/* ↓↓ブログカードの右下、「続きを読む」のコード↓↓ */
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #004aad; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}

/* ↓↓ブログカードの左上、ラベルの色を変更するコード↓↓ */
.blogcard-type .blogcard-label{
  background-color:#004aad;
}

/* ↓↓ブログカードの抜粋文（説明文）を消すコード↓↓ */
.internal-blogcard-snippet{
    display: none;
}

/*囲みボタン*/
.btn-wrap,
 .btn-wrap a{
	margin-bottom: 0!important;/*下の余白を0にする*/
}

/*Cocoonボタン*/
 .button-block{
	margin-bottom: 0!important;/*下の余白を0にする*/
}

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

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

.-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;
}

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

/* -----------------------------------------------------
  ポチップ｜カスタムインラインボタンだけをキラッと光らせるCSS
  - 光の通過：超高速（0.5秒）
  - 光る間隔：やや空けた（2.5秒）
  - 適用対象：-custom.pochipp-inline__btnwrap 内のボタンのみ
------------------------------------------------------ */

.pochipp-inline__btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #dddddd;
  color: black;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  z-index: 0;
}

/* カスタムボタン内のみに限定した光アニメーション */
.-custom.pochipp-inline__btnwrap .pochipp-inline__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: skewX(-25deg);
  animation: pochipp-shine 2.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* 上記の続き（カスタムボタン）テキストや要素は光より前に表示 */
.pochipp-inline__btn * {
  position: relative;
  z-index: 2;
}

/* 上記の続き（カスタムボタン）アニメーション定義（速く通過して、間隔を空ける） */
@keyframes pochipp-shine {
  0% {
    left: -100%;
  }
  20% {
    left: -100%;
  }
  40% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}



/* サイドカテゴリ―カスタマイズ設定----------------------------------------------*/

.sidebar h3 {
  background: none;
  font-size: 16px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  color: #ffc679; /* サイドバータイトルの色を指定 */
}
.sidebar h3::before,
.sidebar h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #ffc679; /* サイドバータイトル横のバーの色を指定 */
}
.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}
.widget_categories ul li a {
  color: #333;
  text-decoration: none;
  padding: 6px 0;
  display: block;
  padding-right: 4px;
  padding-left: 4px;
  border-top: 1px dotted #ccc;
  font-size: 16px;
}
.widget_categories ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07b";
  padding-right: 10px;
}
.widget_categories > ul > li > a:first-child {
  border-top: none;
}
.widget_categories > ul > li > a:last-child {
  border-bottom: 1px dotted #ffc679;
}
.widget_categories ul li a .post-count {
  display: block;
  float: right;
  background: #fff;
  padding: 0 1em;
  font-size: 14px;
  margin-top: 0.2em;
  border-radius: 4px;
}
.widget_categories ul li a:hover {
  background: none;
  transition: 0.5s;
  color: #ffc679;
}
.widget_categories ul li a:hover .post-count {
  background: #ffc679;
  color: #fff;
  transition: 0.5s;
}
.widget_categories ul li ul {
  border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a {
  color: #333;
  text-decoration: none;
  padding: 0 4px 4px 4px;
  display: block;
  border: none;
}
.widget_categories ul li ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  padding-right: 0.45em;
  font-weight: bold;
}
.author-box .sns-follow-buttons a.follow-button {
  background-color: #fff;
  color: black;
  border: 0px;
}
.author-box {
  border: 0px;
}
.author-box p {
  margin-top: 0.3em;
  line-height: 1.6;
}
.author-box p a {
  text-decoration: none;
}
.author-box p a:hover {
  text-decoration: underline;
  color: #008cee; /* プロフィールにリンクを貼っている場合, ホバーした際の色指定 */
}
/* スマホサイドバー設定 */
#sidebar .author-box {
  border: none;
  border-radius: 4px;
  margin: 1em 0;
  line-height: 1.4;
  position: relative;
  padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
  float: none;
  width: 100%;
  margin: 9px auto 0;
  height: 0;
  padding-top: 75px;
  position: relative;
}
#sidebar .author-thumb img {
  border: 3px dashed #ffc679;
  width: 35%;
  padding: 6px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
}
#sidebar .author-content {
  margin-top: 16%;
  font-size: 0.9em;
}

/*ポチップのカスタムボタンを先頭にする*/
.pochipp-box__btnwrap.-custom {
	order: -3;
}

/*リストの線を細くする*/
ul.is-style-border-dashed {
  border-width: 1px !important; /* ← 線の太さを細く設定 */
  border-style: dashed;
  border-color: #898989; /* ← 点線の色（変更可能） */
  border-radius: 6px;
  padding: 1.2em;
  margin-bottom: 1.5em;
}

/*タブ見出しボックスのスタイル ----------------------------------------------*/

:where(.is-style-custom2,.is-style-custom3,.is-style-custom4,.is-style-custom6,.is-style-custom7).tab-caption-box {
	position: relative;/* 配置 */
}

/* スタイル1：見出しが左上に配置されるデザイン*/
.is-style-custom1 .tab-caption-box-content {
	padding: 1.5em 2em; /* ボックスの内側余白 */
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
	margin-top: -1px;/*位置調整*/
}

.is-style-custom1 .tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 1px 1px 0 0;/* 見出しの丸み */
	display: inline-flex; /* タイトルの幅を内容に合わせる */
}


/* スタイル2：見出しが左上枠内にぴったり配置されるデザイン */
.is-style-custom2 .tab-caption-box-content {
	padding: 2.5em 2em 1.5em; /* ボックスの内側余白 */
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
}

.is-style-custom2 .tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 1px;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: 0;
	left: 0;
}

/* スタイル3：見出しが少し浮いたように見えるデザイン */
.is-style-custom3 .tab-caption-box-content {
	padding: 2em 2em 1.5em; /* ボックスの内側余白 */
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
}

.is-style-custom3 .tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 1px;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: -.8em;
	left: 1em;
}

/* スタイル4：見出しが少し浮いたように見えるデザイン（丸み) */
.is-style-custom4 .tab-caption-box-content {
	padding: 2em 2em 1.5em; /* ボックスの内側余白 */
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
}

.is-style-custom4 .tab-caption-box-label {
	padding: 0 1.2em;/* 見出しの内側余白 */
	border-radius: 30px;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: -.8em;
	left: 1em;
}

/* スタイル5：見出しが幅いっぱいに広がり、テキストが中央に配置されるデザイン*/
.is-style-custom5 .tab-caption-box-content {
	padding: 1.5em 2em 1.5em;/* ボックスの内側余白 */
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
}

.is-style-custom5 .tab-caption-box-label {
	padding: .5em 1em;/* 見出しの内側余白 */
	border-radius: 0;/* 見出しの丸み */
	width: 100%;/* 幅いっぱいに */
	text-align: center;/*テキスト中央寄せ*/
}

/* スタイル6,7 共通設定 */
:where(.is-style-custom6,.is-style-custom7) .tab-caption-box-label {
    display: grid; /* グリッドレイアウトを利用して要素を配置 */
    place-content: center; /* 要素を中央に配置 */
    position: absolute; /* 絶対配置を使用し、親要素を基準に配置 */
    line-height: 2em; /* ラベルの行間を設定 */
}
:where(.is-style-custom6,.is-style-custom7) .block-box-label::before {
    margin-right: 0; /* ラベルアイコンの余白をリセット */
}

:where(.is-style-custom6,.is-style-custom7) .tab-caption-box-label-text {
    display: none; /* ラベルテキストを非表示にする */
}

/* スタイル6：アイコンが左上に表示される */
.is-style-custom6 .tab-caption-box-content {
    padding: 1.5em 2em; /* ボックスの内側余白を設定 */
    border-radius: 4px; /* ボックスの角を直線に設定 */
    border-width: 2px; /* 枠線の太さを設定 */
  }
.is-style-custom6 .tab-caption-box-label {
    width: 2em; /* ラベルの幅を指定 */
    height: 2em;
    padding: 0; /* ラベル内の余白をリセット */
    border-radius: 99px; /* ラベルを円形にする */
    top: -0.9em; /* ラベルの上方向位置を指定 */
    left: 1em; /* ラベルの左方向位置を指定 */
    box-shadow: 0 0 0 2px;
    font-size: 1em;
  }


/* スタイル7：アイコンが左に表示される */
.is-style-custom7 .tab-caption-box-content {
    padding:1.5em 1.5em 1.5em 3.5em; /* 左側に余白を多く設定 */
    border-radius: 0; /* ボックスの角を直線に設定 */
    border-width: 1px; /* 枠線の太さを指定 */
  }
.is-style-custom7 .tab-caption-box-label {
    padding: 0; /* 左右に適切な余白を設定 */
    border-radius: 0; /* ラベルの丸みを削除 */
    top: 0; /* ラベルの上方向位置をリセット */
    left: 0; /* ラベルの左方向位置をリセット */
    height: 100%; /* ラベルを親要素の高さに合わせる */
    width:2.2em;
}

/* 見出しテキストはみだし処理：三点リーダー（…）を表示 */
:where(.is-style-custom1,.is-style-custom2,.is-style-custom3,.is-style-custom4) .tab-caption-box-label {
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    display:flex;
}

:where(.is-style-custom1,.is-style-custom2,.is-style-custom3,.is-style-custom4) .tab-caption-box-label-text {
    min-width: 0; /* flexの場合これがないと text-overflow が効かない */
    flex-grow: 1; /* 必要に応じて伸縮 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

/* 白抜きボックスのスタイル（切り替え） --------------------------------------------------- */

.blank-box:where(.is-style-blank-1,.is-style-blank-2,.is-style-blank-3,.is-style-blank-4,.is-style-blank-5,.is-style-blank-6,.is-style-blank-7,.is-style-blank-8,.is-style-blank-9,.is-style-blank-10,.is-style-blank-11,.is-style-blank-12,.is-style-blank-13){
	padding:2em!important; /*ボックスの内側余白*/
}

/* スタイル 1: ダブル線の枠線と幅4pxのボックス */
.blank-box.is-style-blank-1 {
	border-radius: 0; /* 角丸をなしに */
	border-width: 4px; /* 枠線の幅を4pxに */
	border-style: double; /* ダブル線の枠線スタイル */
}

/* スタイル 2: 幅1pxのシンプルな枠線 */
.blank-box.is-style-blank-2 {
	border-radius: 0;
	border-width: 1px;
}

/* スタイル 3: 幅2pxのシンプルな枠線 */
.blank-box.is-style-blank-3 {
	border-radius: 0;
	border-width: 5px;
}

/* スタイル 4: 幅1pxの点線スタイル */
.blank-box.is-style-blank-4 {
	border-radius: 0;
	border-width: 1px;
	border-style: dashed; /* 点線の枠線スタイル */
}

/* スタイル 5: 幅2pxの点線スタイル */
.blank-box.is-style-blank-5 {
	border-radius: 0;
	border-width: 2px;
	border-style: dashed;
}

/* スタイル 6: 幅2pxのドット線スタイル */
.blank-box.is-style-blank-6 {
	border-radius: 20px;
	border-width: 2px;
	border-style: dotted; /* ドット線の枠線スタイル */
}

/* スタイル 7: 幅4pxのドット線スタイル */
.blank-box.is-style-blank-7 {
	border-radius: 20px;
	border-width: 4px;
	border-style: dotted;
}

/* スタイル 8: 右・左・下の枠線なし、上のみ幅5pxの枠線 */
.blank-box.is-style-blank-8 {
	border-radius: 0;
	border-width: 5px;
	border-right: none;
	border-left: none;
	border-bottom: none;
}

/* スタイル 9: 左・上・下の枠線なし、右のみ幅5pxの枠線 */
.blank-box.is-style-blank-9 {
	border-radius: 0;
	border-width: 5px;
	border-right: none;
	border-top: none;
	border-bottom: none;
}

/* スタイル 10: ストライプ背景（斜めの繰り返し線） */
.blank-box.is-style-blank-10 {
	border-radius: 0;
	border-width: 0;
	background-image: repeating-linear-gradient(-45deg, #f2f3f7 0, #f2f3f7 3px, transparent 3px, transparent 6px); /* ストライプパターン */
}

/* スタイル 11: チェックパターンの背景 */
.blank-box.is-style-blank-11 {
	border-radius: 0;
	border-width: 0;
	background-image: linear-gradient(0deg, transparent 19px, #ccc 20px), linear-gradient(90deg, transparent 19px, #ccc 20px); /* チェックパターン */
	background-size: 20px 20px; /* パターンのサイズ設定 */
}

/* スタイル 12: 右上に折り返し効果を追加 */
.blank-box.is-style-blank-12 {
	border-radius: 0;
	border-width: 0;
	position: relative;
}

.blank-box.is-style-blank-12:after {
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 20px 20px 0; /* 三角形の折り返し部分 */
	border-style: solid;
	border-color: #ccc #fff #ccc; /* 三角形の色 */
	box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影の効果 */
}

/* スタイル 13: 外枠の破線を追加 */
.blank-box.is-style-blank-13 {
	border-radius: 0;
	border-width: 0;
	position: relative;
	z-index: 0;
}

.blank-box.is-style-blank-13:before {
	position: absolute;
	border: 2px dashed #fff; /* 破線の太さと色 */
	content: '';
	display: block;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: 5px; /* 内側の余白 */
	z-index: -1;
	border-radius: 3px; /* 破線の角丸設定 */
}