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

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



/* ──── 見出し（タイトルバー） ──── */
.info-list-caption {
  background-color: #0099cc;    /* Cocoon Simple Blue のブルーバーと同じ色に */
  color: #ffffff;               /* 白文字 */
  padding: 10px 15px;
  font-size: 18px;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin: 0;
}

/* ──── 全体ラッパー（枠線＋背景） ──── */
.info-list {
  border: 1px solid #cccccc;    /* 周囲と馴染む薄めグレー */
  border-radius: 6px;
  background-color: #ffffff;    /* 真っ白背景 */
  margin: 20px 0;
  overflow: hidden;
}

/* ──── リストアイテム ──── */
.info-list .info-list-item {
  padding: 12px 15px;
  border-bottom: 1px dashed #e0e0e0;  /* Dashed で軽く区切る */
}
.info-list .info-list-item:last-child {
  border-bottom: none;
}

/* ──── 記事タイトルリンク ──── */
.info-list .info-list-item-content-link {
  color: #006bb3;               /* Simple Blue のリンク色に寄せる */
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}
.info-list .info-list-item-content-link:hover {
  color: #004a80;               /* ホバーで濃く */
  text-decoration: underline;
}

/* ──── 日付表示 ──── */
.info-list .info-list-item-date {
  display: block;
  margin-top: 6px;
  color: #666666;               /* 少し落ち着いたグレー */
  font-size: 14px;
}


/* ── 新着記事/人気記事のタブ設定 ── */
/* ── ラッパー全体 ── */
.js-tab-wrap {
  margin: 30px 0;
  font-family: sans-serif;
  border: 1px solid #ccc;      /* テーマブルー枠線 */
  border-radius: 4px;
  overflow: hidden;
}

/* ── ボタン行 ── */
.js-tab-buttons {
  display: flex;
}

/* ── タブラベル（共通） ── */
.js-tab-button {
  flex: 1;
  padding: 12px 0;
  margin: 0;
  background: #ffffff;            /* 白背景 */
  border: none;
  border-right: 1px solid #ccc;/* テーマブルー枠線 */
  cursor: pointer;
  font-size: 15px;
  color: #0099cc;                 /* テーマブルー文字 */
  transition: background .2s, color .2s;
}

/* ── 最後のタブだけ右側枠線を消す ── */
.js-tab-button:last-child {
  border-right: none;
}

/* ── ホバー時 ── */
.js-tab-button:hover {
  background: rgba(0,153,204,0.1);/* 透過ブルーで軽く強調 */
}

/* ── アクティブなタブ ── */
.js-tab-button.active {
  background: #0099cc;            /* テーマブルー背景 */
  color: #ffffff;                 /* 白文字 */
  font-weight: bold;
}

/* ── コンテンツエリア ── */
.js-tab-content {
  padding: 20px;
  background: #ffffff;            /* 白背景 */
  border-top: 1px solid #0099cc;  /* テーマブルー境界線 */
}

/* ── コンテンツ内リンク ── */
.js-tab-content a {
  color: #000000;                 /* テーマブルーリンク */
  text-decoration: none;
}
.js-tab-content a:hover {
  text-decoration: underline;
  color: #006bb3;                 /* 少し濃いブルー */
}






















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

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

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