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


/************************************
** 見出し用追加CSSのリセット用（リセットしないと反映されない）
************************************/
/*スタイルリセット用*/
main h2.wp-block-heading,
main h3.wp-block-heading,
main h4.wp-block-heading {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    font-weight: bold;
}
main h2.wp-block-heading:before,
main h3.wp-block-heading:before,
main h4.wp-block-heading:before,
main h2.wp-block-heading:after,
main h3.wp-block-heading:after,
main h4.wp-block-heading:after {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    margin: initial;
    content: initial;
    position: initial;
}

/************************************
** 見出し用追加CSS
************************************/
/*H2見出し*/
main h2.wp-block-heading {
    color: #008080;/*文字色*/
    font-size: 20px;
    padding: 30px 20px 15px;/*文字回りの余白（上 左右 下）*/
    display: block;
    position: relative;
}
main h2.wp-block-heading:before {
    content: '';
    background: #6fd8dd;/*背景色*/
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: 0px;
    left: 6px;
    z-index: -1;
    transform: rotate(1.5deg);/*背景影部の回転*/
}
main h2.wp-block-heading:after {
    content: '';
    background: #fff;/*背景色（白）*/
    border: 3px solid #6fd8dd;/*背景白部の囲み線（太さ 実線 色*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -5px;
    z-index: -1;
    transform: rotate(-.5deg);/*背景白部の回転*/
}
/*H3見出し*/
main h3.wp-block-heading {
    color: #576965;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 15px 15px 20px;/*文字回りの余白（上 左右 下）*/
    display: block;
    background-image: linear-gradient(transparent 85%, #6fd8dd 50%);/*下線含めた背景色*/
}
/*H4見出し*/
main h4.wp-block-heading {
    color: #576965;/*文字色*/
    font-size: 16px;/*文字サイズ*/
    display: block;
    position: relative;
    padding: 12px 40px;/*文字回りの余白（上下 左右）*/
}
main h4.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*チェックマークの太さ*/
    font-size: 30px;/*チェックマークのサイズ*/
    color: #6fd8dd;/*チェックマークの色*/
    left: 0;
    top: 0;
    content:"\f00c";
    position: absolute;
}
/************************************
** カテゴリラベル
************************************/
.entry-card-thumb .cat-label {
	top: -6px;
	left: 3%;
	padding: 11px 10px 5px 10px;
	background-color: rgba(125,165,52,0.8);
	border: 0;
	border-top-right-radius: 7px;
	overflow: visible;
	color:#fff;
}

.entry-card-thumb .cat-label::before,　.entry-card-thumb .cat-label::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
}

.entry-card-thumb .cat-label::before {
	top: 0;
	left: -6px;
	border-bottom: 6px solid rgb(125,165,52);
	border-left: 6px solid transparent;
}

/************************************
** カルーセルCSS
************************************/

/************************************
** タグクラウドのデザイン
************************************/
/*タグクラウドのカスタマイズ*/
.tagcloud a{
  border-radius: 0px; /*角の丸み*/
  background-color: #ffffff; /*背景の色*/
  color: #8195a2; /*アイコンと文字の色*/
}

/*タグクラウド：ホバー時のカスタマイズ*/
.tagcloud a:hover{
  color: #8195a2; /*アイコンと文字の色*/
}
/************************************
** サイドバーウィジェットの見出しデザイン
************************************/
/* サイドバー見出し */
.sidebar h3 {
  background: transparent;  /* 背景を透明にする */
  text-align: center;  /* 見出しの文を中央揃えにする */
  padding:0px;  /* 周囲の余白（内側） */
  margin: 0px 0px 10px 0px;  /* 周囲の余白（外側） */
  border-bottom: dashed 2px #a8bcc8;  /* 下部に波線を表示する */
  color: #5C676D;  /* 色の変更 */
}
/************************************
** フッター見出しデザイン
************************************/
/* フッター見出しデザイン */
.footer h3 {
  text-align: center; /* テキストの位置を真ん中にする */
  margin: 0px 0px 10px 0px; /* 周囲の余白 */
  border-bottom: dashed 2px #a8bcc8; /* 下部に2pxの波線を表示する */
  color: #5C676D; /* 色の変更 */
}
/************************************
** フロントページタブ一覧のデザイン
************************************/
/* オンのタブ */
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background-color: #7e9286;
border: 0px
}

/* オフのタブ */
index-tab-buttons .index-tab-button {
  background-color:blue;
border: 0px
}
/************************************
** ページ送り
************************************/
/*次ページボタンを無くす*/
.pagination-next-link {
  display: none;
}
/*ページネーションの番号ボタンを丸くする*/
.page-numbers{
	border-radius: 50%; /*角丸*/
}
/*ページネーションの番号ボタンをの色を変える*/
.page-numbers{
  color:#a8bcc8;  /*文字色*/
  font-weight: bold;  /*太文字にする*/
  border-color: #a8bcc8;  /*ボタンの境界線の色*/
}
/*ホバー時の背景色・文字色を変える*/
.pagination a:hover { 
  background: #f6f7f7;  /*背景色*/
  color:#a8bcc8;  /*文字色*/
}
/************************************
** エントリーカード
************************************/
/*エントリーカードアイキャッチ画像（サムネイル）の角を丸める*/
.card-thumb img{
  border-radius: 10px; /*サムネイルの角を丸める*/
  border: 0px solid #8195a2; /*サムネイルに囲い線をつける*/
}
/*エントリーカードホバー時の背景の色を変える*/
.entry-card-wrap:hover{
  background-color: #FDF5E6; /*背景の色*/
}
/*エントリーカード全体の角を丸める*/
.entry-card-wrap{
  border-radius: 10px; /*エントリーカード全体の角を丸める*/
}
/************************************
** ヘッダーロゴの大きさを変える
************************************/
/* ヘッダーロゴの大きさを変える */
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100px; /* ヘッダーの高さの指定 */
}
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100px; /* ヘッダーロゴ画像の高さの指定 */
}
#header {
  flex-shrink: 0; /* 要素の縮小率を0にする */
}
/************************************
** ウィジェットカード設定
************************************/
/* ウィジェットカード設定（Grid）---------------------------------------------- */

/* カード内の画像リンク最大幅を600pxに制限（横幅100%で拡縮対応） */
[class*="is-style-column-"] .widget-entry-cards.card-large-image .a-wrap {
	max-width: 600px;
	width: 100%;
}

/* 大きなサムネイル画像を中央寄せ */
[class*="is-style-column-"] .widget-entry-cards.large-thumb {
	justify-items: center; /* Gridのアイテムを水平方向に中央配置 */
}

/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
	display: grid;
}

/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
	grid-template-columns: repeat(2, 1fr);
}

/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
	grid-template-columns: repeat(3, 1fr);
}

/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
	grid-template-columns: repeat(4, 1fr);
}

/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {
	/* column-x-1系：モバイルでは1列 */
	:is(.is-style-column-2-1, .is-style-column-3-1, .is-style-column-4-1) .widget-entry-cards {
		grid-template-columns: 1fr;
	}

	/* column-x-2系：モバイルでは2列 */
	:is(.is-style-column-3-2, .is-style-column-4-2) .widget-entry-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}



/************************************
** カルーセル下のキャッチコピー
************************************/
.carousel-catch {
  background: linear-gradient(to right, #fefefe, #f3f8fc);
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.carousel-catch p {
  margin: 0;
  line-height: 1.6;
}


/************************************
** ヘッダー下余白
************************************/
.front-top-page .main {
  padding-top: 0;
}

/*---------------------------------
カテゴリの行間を狭くする
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.0;
}
/*---------------------------------
カテゴリの行間とフォントを小さくする
--------------------------------*/
.widget_categories ul li a{
	line-height: 0.9;
	font-size: 12px;
}

/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}
/*---------------------------------
固定ページの更新日非表示
--------------------------------*/
.post-19 .date-tags {
display: none;
}