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

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

/*最新の投稿リストを区切り線をつける*/
.wp-block-latest-posts__list {
  list-style: none;
  padding-left: 0;
}
.wp-block-latest-posts__list > li {
  border-bottom: 1px solid #ddd;
  padding: 16px 0;
}
.wp-block-latest-posts__list > li:last-child {
  border-bottom: none;
}


/*スマホ・タブレットではPC用ヘッダーを非表示にする*/
@media screen and (max-width: 1023px) {
  #navi {
    display: none !important;
  }
  .header-container {
    display: none !important;
  }
}

/*トップ　最新の投稿のタイトルの背景色・文字色・ホバー時の背景色を追加*/
.entry-content .wp-block-latest-posts__post-title {
  display: inline-block;
  background-color: #E3F2FD;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.entry-content .wp-block-latest-posts__post-title:hover {
  background-color: #1E88E5;
  color: #fff;
}

/*投稿記事に投稿日・更新日を表示　固定ページは非表示*/
.page .post-update,
.page .post-date {
  display: none;
}

/*画像にマウスオンするとやや明るくなる*/
.btn-hover-light:hover {
  opacity: 0.7;
  transition: 0.3s;
}

/*スマホ時では表示　PC時は非表示にする*/
.sp-only {
  display: none !important;
}

@media screen and (max-width: 1023px) {
  .sp-only {
    display: block !important;
  }
}

/*PC時では表示　スマホ時は非表示にする*/
.pc-only {
  display: block;
}

@media screen and (max-width: 1023px) {
  .pc-only {
    display: none;
  }
}

/*カラムの間隔を狭くする*/
/*.btn-columns-tight {
  gap: 1em;
}*/

/* ブログカードのタイトル */
.blogcard-title {
  font-size: 18px !important;
}

/* ブログカードの抜粋文(本文の説明部分) */
.blogcard-snippet {
  font-size: 18px !important;
}

/* セルの線を消す */
.entry-content .wp-block-table tbody {
  border: none !important;
}

/* セルは上下のみグレー線、左右はなし */
.entry-content .wp-block-table tbody td {
  border: none !important;
  border-top: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
  padding: 10px;
}

/* 1列目:グレー背景 */
.entry-content .wp-block-table tbody td:first-child {
  background-color: #f0f0f0;
}

/* 2列目:白背景 */
.entry-content .wp-block-table tbody td:nth-child(2) {
  background-color: #ffffff;
}

/* 表の幅を1列目60%、2列目40%に変更 */

.entry-content .wp-block-table tbody td:first-child {
  width: 60%;
}

.entry-content .wp-block-table tbody td:nth-child(2) {
  width: 40%;
}

/* グローバルメニューの項目幅を固定から可変に変更 */

#navi-in > ul li {
  width: auto !important;
}

#navi-in > ul li a,
#navi-in > ul li .caption-wrap,
#navi-in > ul li .item-label {
  width: auto !important;
}

/* 幅固定をやめた分、左右に余白を付けてメニュー同士の間隔を確保 */

#navi-in > ul li .caption-wrap {
  padding: 0 20px;
}

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

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

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