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

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

/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	background-color:initial;/*背景色リセット*/
	border:initial;/*上下左右の枠線リセット*/
	border-radius:initial;/*角の丸みリセット*/
}
/*h2見出し先頭のアイコン削除*/
.entry-content h2:before {
  display: none;
}

/* h2見出しデザイン */
.article h2 {
    position: relative;
    background: #a5c9c1;
    color: #fff;
    margin-top: 40px; 
}
.article h2:before,
.article h2:after {
    position: absolute;
    left: 0;
    width: 100%;
    content: '';
    border-top: 1px solid #fff; /* ライン：太さ・実線・色 */
}
.article h2:before {
    top: 3px;
}
.article h2:after {
    bottom: 3px;
}

/*h3見出しデザイン*/
.article h3 {
    position: relative;
    padding: 0.2em 0; /* 内側余白調整 */
    border-bottom: solid 3px #eee; /* 下線１：実線・太さ・色 */
    color: #333; /* 文字色（黒） */
    margin-top: 40px; /* 上の余白 */
}

.article h3:after {
    position: absolute;
    content: '';
    display: block;
    border-bottom: solid 3px #a5c9c1; /* 下線２：実線・太さ・色 */
    bottom: -3px;
    width: 30%; /* 下線２の幅 */
}

/*h4見出しデザイン*/
.article h4 {
    display: flex;
    align-items: baseline;
    column-gap: 8px;
    color: #333;
    padding-left: 0;
    margin-top: 40px; /* 上の余白 */
}

.article h4::before {
    width: 0.8em;
    height: 0.4em;
    border-bottom: 4px solid #a5c9c1;
    border-left: 4px solid #a5c9c1;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}

/*プレーンテキストデザイン*/
.article p {
    line-height: 1.4; 
    font-size: 0.95rem; 
}

/*リストデザイン*/
.single-post ul, .single-post ol {
  color: #1e366a;
  border-top: solid #a5c9c1 1px; /* 上のボーダー */
  border-bottom: solid #a5c9c1 1px; /* 下のボーダー */
  padding: 0.5em 0 0.5em 1.5em;
}
.single-post ul li, .single-post ol li {
  line-height: 1.5;
  padding: 0.5em 0;
  font-size: 0.95rem; 
}
.single-post #menu-global-navi {
  border-top: none; /* 上のボーダーを無効化 */
  border-bottom: none; /* 下のボーダーを無効化 */
  padding: 0; /* パディングを無効化 */
}

.single-post #menu-global-navi li {
  line-height: inherit; /* 親要素の行間を継承 */
  padding: 0; /* パディングを無効化 */
  font-size: inherit; /* 親要素のフォントサイズを継承 */
}


/* TOPページのグロナビ */
.navi .item-label, .navi .item-description {
    overflow: visible !important;    /* オーバーフローしても内容が見えるように */
    text-overflow: clip !important;  /* テキストが容器を超えても切り取る */
    white-space: normal !important;  /* テキストを自然に折り返す */
    line-height: 1.5 !important;     /* 行の高さを適切に設定 */
    max-height: 3em !important;      /* 2行分の高さを確保 */
    padding-left: 10px !important;   /* 左のパディングを増やす */
    padding-right: 10px !important;  /* 右のパディングを増やす */
    padding-top: 8px !important;     /* 上のパディングを増やす */
    padding-bottom: 8px !important;  /* 下のパディングを増やす */
    box-sizing: border-box;          /* パディングとボーダーを含めたサイズに */
}


/*サイドカラムのウィジェット*/
h3.widget-sidebar-scroll-title.widget-title {
    color: #84a8a5 !important; /* 文字色を緑色に設定 */
}

/*サイドカラムのウィジェットテキスト*/
.new-entry-card-title,
.widget-entry-card-title,
.card-title {
    line-height: 1.4; 
    font-size: 0.90rem;
}

/*メインカラム末尾の関連記事*/
.related-entry-main-heading.main-caption {
    color: #84a8a5 !important; /* 文字色を緑色に設定 */
}


/*テーブル内の囲みボタン（リンク）*/
table .btn-wrap,
table .btn-wrap a{
	margin-bottom: 0!important;/*下の余白を0にする*/
}

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

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

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


.c-blog-card {
  position: relative;
  padding-top: 24px;
}

.c-blog-card .c-blog-card__label {
  position: absolute;
  bottom: calc(100% - 24px);
  left: 0;
  margin-bottom: 0;
  padding: 6px 18px;
  border-radius: 6px 6px 0 0;
  background: #a5c9c1;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.c-blog-card a {
  display: flex;
  align-items: center;
  gap: 0 14px;
  padding: 24px 16px 24px 36px;
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  text-decoration: none;
}

.c-blog-card .c-blog-card__thumbnail {
  flex-shrink: 0;
  overflow: hidden;
  width: 140px;
  height: 80px;
}

.c-blog-card .c-blog-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.c-blog-card a:hover .c-blog-card__thumbnail img {
  transform: scale(1.1);
}

.c-blog-card .c-blog-card__content {

}

.c-blog-card .c-blog-card__time {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #999;
}

.c-blog-card .c-blog-card__title {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  margin-top: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media screen and (max-width: 1023px) {

  .c-blog-card a {
    padding: 12px;
  }

  .c-blog-card .c-blog-card__thumbnail {
    width: 120px;
    height: 72px;
  }

  .c-blog-card .c-blog-card__time {
    font-size: 12px;
  }

  .c-blog-card .c-blog-card__title {
	margin-top: 6px;
    font-size: 13px;
  }

}

.wp-block-table.is-top-left tr:first-child th,
.wp-block-table.is-top-left tr:first-child td,
.wp-block-table.is-top-left tr > *:first-of-type {
  background: #a5c9c1;
  color: #fff;
}

.wp-block-table.is-top tr:first-child th,
.wp-block-table.is-top tr:first-child td {
  background: #a5c9c1;
  color: #fff;
}

.wp-block-table.is-left tr > *:first-of-type {
  background: #a5c9c1;
  color: #fff;
}