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

/*=====ここから下は自分で入力=====*/

/*日付の非表示設定 数字のところにID入力する*/
.post-1532 .date-tags {
display: none;
}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}
/*プロフィールボックスの設定*/
.author-box {
    border: none;/*外側の枠線を消す*/
}
body {
	overflow-x:clip;/*水平スクロールバー非表示*/
}
/*セクションフルワイド*/
body .full-wide {
	margin: 0 calc(50% - 50vw);/*左右の余白調整*/
	padding: 0px calc(50vw - 50%);/*左右の内側余白調整*/
}
/*テキストのサイト名を非表示*/
.site-name-text {
display: none;
}

/*見出しデザイン*/
.article h2 {
	--tan-color:#b2aba1;
	position: relative;
	padding: 1rem 2rem;
	background: var(--tan-color);
	color: #fff;
}
.article h2:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	bottom: -10px;
	left: 1.5em;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: var(--tan-color) transparent transparent transparent;
}
/*見出しデザイン*/
.article h3 {
  position: relative;
  border:none;
}
.article h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #d4dfbb, #d4dfbb 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #d4dfbb, #d4dfbb 2px, #fff 2px, #fff 4px);
}

/*背景ストライプ(ピンク)*/
.box3-8{
	padding:2em;/*内側余白*/
	background: repeating-linear-gradient(-45deg, #f2f3f4 0 6px, #fff 6px 12px);
}

/* タブブロックのスタイル -----------*/
:root {
	--cocoon-tab-label-color: #f2f2f2; /* タブの背景色 */
	--cocoon-tab-label-active-color: #404453; /* 選択したタブの背景色 */
}

/* タブ全体のグループスタイル */
:where(.is-style-simple, .is-style-tab-balloon, .is-style-circle, .is-style-simple-border, .is-style-border-balloon, .is-style-circle-border, .is-style-circle-balloon, .is-style-circle-border-balloon,.is-style-simple-line) .tab-content-group {
    border: none; /* タブ内容の枠線をなしにする */
    padding: 1.2em 0; /* 上下の余白を設定 */
}

/* タブのラベル部分のスタイル */
:where(.is-style-simple-fit,.is-style-simple, .is-style-tab-balloon, .is-style-circle, .is-style-simple-border, .is-style-border-balloon, .is-style-circle-border, .is-style-circle-balloon, .is-style-circle-border-balloon,.is-style-simple-line) .tab-label-group .tab-label {
    padding: 0.6em 1.5em; /* タブの内側余白を設定 */
    text-align: center; /* 文字を中央揃え */
    border-radius: 0; /* タブの角丸をなしにする */
    flex: 1; /* 各タブの幅を自動調整 */
}

/*タブ間の余白なしスタイル*/
.is-style-simple-fit .tab-label-group{
	gap:0;
}

.is-style-simple-fit .tab-content-group {
    border-radius: 0;
}

/* =====吹き出しスタイル===== */

/* 吹き出しスタイルのラベルグループの下部余白 */
:where(.is-style-tab-balloon, .is-style-border-balloon, .is-style-circle-balloon, .is-style-circle-border-balloon) .tab-label-group {
    padding-bottom: 1em; /* 吹き出し先端部分のための余白 */
}
/* 吹き出しラベルのスタイル */
:where(.is-style-tab-balloon, .is-style-border-balloon, .is-style-circle-balloon, .is-style-circle-border-balloon) .tab-label-group .tab-label {
    position: relative; /* 吹き出し先端を位置調整できるようにする */
}
/* 選択された吹き出しラベルに吹き出し先端を追加 */
:where(.is-style-tab-balloon, .is-style-border-balloon, .is-style-circle-balloon, .is-style-circle-border-balloon) .tab-label-group .tab-label.is-active:before {
    background-color: var(--cocoon-tab-label-active-color); 
/* 吹き出し先端の色 */
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形の形状を指定 */
    content: ''; /* 空の内容を追加（装飾目的） */
    position: absolute; /* 吹き出し先端を位置指定 */
    left: 50%; /* 水平方向の中央揃え */
    transform: translateX(-50%); /* 中央揃えを補正 */
    bottom: -7px; /* タブラベルから下に配置 */
    height: 8px; /* 吹き出し先端の高さ */
    width: 12px; /* 吹き出し先端の幅 */
}
/* 丸いタブスタイル */
:where(.is-style-circle, .is-style-circle-border, .is-style-circle-balloon, .is-style-circle-border-balloon) .tab-label-group .tab-label {
    border-radius: 99px; /* タブを完全に丸くする */
}
/* ボーダースタイル */
/* ラベルの枠線スタイル */
:where(.is-style-simple-border, .is-style-border-balloon, .is-style-circle-border, .is-style-circle-border-balloon) .tab-label-group .tab-label {
    border: 1px solid var(--cocoon-tab-label-active-color); 
/* 枠線を追加 */
}
/* 選択されていないタブラベルの背景をなしにする */
:where(.is-style-simple-border, .is-style-border-balloon, .is-style-circle-border, .is-style-circle-border-balloon) .tab-label-group .tab-label:not(.is-active) {
    background-color: unset; 
/* 背景色をリセット */
}/* 下線スタイル */
/* タブラベルのスタイル */
.is-style-simple-line .tab-label-group .tab-label {
    background: none; /* 背景色をなしにする */
    border-bottom: 2px solid var(--cocoon-tab-label-color); /* 下線を追加 */
    color: var(--cocoon-tab-label-active-color); /* 文字色を設定 */
}
/* 選択されたタブのスタイル */
.is-style-simple-line .tab-label-group .tab-label.is-active {
    border-color: var(--cocoon-tab-label-active-color); /* 下線の色を変更 */
}
/*ホバー時*/
:where(.is-style-simple-fit,.is-style-simple, .is-style-tab-balloon, .is-style-circle, .is-style-simple-border, .is-style-border-balloon, .is-style-circle-border, .is-style-circle-balloon, .is-style-circle-border-balloon) .tab-label-group .tab-label:hover{
	background-color:var(--cocoon-tab-label-active-color);
	color: var(--cocoon-white-color);
}
.is-style-simple-line .tab-label-group .tab-label:hover {
	border-color:var(--cocoon-tab-label-active-color);
    color: var(--cocoon-tab-label-active-color);
}
タブの色を変更できるように、先頭に下記のカスタムプロパティも含めました。
:root {
--cocoon-tab-label-color: #f2f2f2; /* タブの背景色 */
--cocoon-tab-label-active-color: #404453; /* 選択したタブの背景色 */
}
/* =====プロフィール全体===== */
.nwa .author-box {
	border: none;
	padding: 0 20px;
}
/* アイコン */
.nwa .author-box .author-thumb{
	width: 110px;
}
.nwa .author-box .author-thumb img{
	box-shadow: 0 1px 3px rgba(0,0,0,.18)
}
/* 下側 */
.nwa .author-box .author-content {
	padding: 1em 0;
}
/* 名前 */
.author-box .author-name {
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	color: #文と同じ色; /* リンク色にしない */
	font-size: 1.2em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}
/* スタイル 6: アイコンボックス全体のスタイル */
.wp-block-cocoon-blocks-icon-box {
	border-width: 2px; /* 外枠の太さを2pxに設定 */
	border-radius: 0; /* 外枠の角を四角く設定 */
	padding: 1em 1.5em; /* 内側余白を上下1em、左右1.5emに設定 */
	margin-left: 10px; /* ボックスの左側に10pxの余白を設定 */
}
/* =====アイコンのスタイル===== */
.wp-block-cocoon-blocks-icon-box::before {
	top: -15px; /* 上からの位置 */
	left: -10px; /* 左からの位置 */
	display:grid; /* アイコンを中央揃え */
	place-content:center; /* アイコンの配置を中央揃え */
	margin: 0; /* 余白なし */
	padding:0; /* パディングなし */
	width: 2em; /* アイコンの幅 */
	height:2em; /* アイコンの高さ */
	border-right: 0; /* 右側のボーダーなし */
	border-radius: 99px; /* アイコン背景の角を丸く */
	font-size: .9em; /* アイコンのフォントサイズ */
	color: #fff; /* アイコンの色 */
	box-shadow: 0 0 0 2px;
}
/* 情報 (i): 水色の背景色 */
.information-box::before {
	background-color: #87cefa;
}
/* 質問 (?): ゴールドの背景色 */
.question-box::before {
	background-color: gold;
}
/* アラート (!): 薄赤色の背景色 */
.alert-box::before {
	background-color: #f3aca9;
}
/* メモ: 緑色の背景色 */
.memo-box::before {
	background-color: #7ad0b6;
}
/* コメント: 灰色の背景色 */
.comment-box::before {
	background-color: #999;
}
/* OK: 青色の背景色 */
.ok-box::before {
	background-color: #3cb2cc;
}
/* NG: 赤色の背景色 */
.ng-box::before {
	background-color: #dd5454;
}
/* GOOD: 緑色の背景色 */
.good-box::before {
	background-color: #98e093;
}
/* BAD: ピンク色の背景色 */
.bad-box::before {
	background-color: #eb6980;
}
/* プロフィール: 灰色の背景色 */
.profile-box::before {
	background-color: #999;
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}