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

/************************************
** スムーススクロール（目次クリック時）
************************************/
html {
  scroll-behavior: smooth;
}

/************************************
** サイドバー幅を縮小
************************************/
.sidebar {
  width: 240px;
  flex-shrink: 0;
}
@media screen and (max-width: 834px) {
  .sidebar {
    width: 100%;
  }
}

/************************************
** メインとサイドバーの間隔を詰める
************************************/
.content-in {
  gap: 16px;
}
.main {
  flex: 1;
  min-width: 0;
}

/************************************
** サイドバー追従（sticky）
************************************/
.sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/************************************
** サイドバー カテゴリナビ モダン化
************************************/
.sidebar .widget_categories ul,
.sidebar .wp-block-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar .widget_categories li,
.sidebar .wp-block-categories-list li {
  margin: 0;
  padding: 0;
}
.sidebar .widget_categories li a,
.sidebar .wp-block-categories-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s ease;
  background: transparent;
}
.sidebar .widget_categories li a:hover,
.sidebar .wp-block-categories-list li a:hover {
  background: #f0fdf4;
  color: #059669;
  transform: translateX(2px);
}
/* 件数バッジ */
.sidebar .widget_categories li a .post-count,
.sidebar .wp-block-categories-list li a::after {
  font-size: 11px;
  color: #9ca3af;
  font-weight: normal;
}
/* 見出し */
.sidebar .widget-title,
.sidebar h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}
/* 検索ボックス */
.sidebar .wp-block-search__input {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
}
.sidebar .wp-block-search__button {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #059669;
  /* color set via inline style */
  border: none;
}
/* ウィジェット間 */
.sidebar .widget {
  margin-bottom: 20px;
}

/************************************
** サイドバー: 未分類・用語解説・トラブル対策をライフイベント欄から非表示
************************************/
.sidebar .wp-block-categories-list .cat-item-1,
.sidebar .wp-block-categories-list .cat-item-31,
.sidebar .wp-block-categories-list .cat-item-33 {
  display: none;
}

/************************************
** メイン・サイドバー独立スクロール
************************************/
.content-in {
  height: calc(100vh - 80px);
  overflow: hidden;
}
.main {
  overflow-y: auto;
  height: 100%;
}
.sidebar {
  overflow-y: auto;
  height: 100%;
  position: static;
}

/************************************
** 独立スクロールを取消→sticky復帰
************************************/
.content-in {
  height: auto;
  overflow: visible;
}
.main {
  overflow-y: visible;
  height: auto;
}
.sidebar {
  overflow-y: auto;
  height: auto;
  max-height: calc(100vh - 96px);
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/************************************
** カテゴリにライフイベントアイコン
************************************/
.sidebar .wp-block-categories-list li a::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  /* color set via inline style */
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}
.cat-item-32 > a::before { content: '引'; background: #0d9488; }
.cat-item-5 > a::before  { content: '相'; background: #4338ca; }
.cat-item-6 > a::before  { content: '離'; background: #475569; }
.cat-item-7 > a::before  { content: '税'; background: #1e40af; }
.cat-item-8 > a::before  { content: '婚'; background: #f43f5e; }
.cat-item-9 > a::before  { content: '産'; background: #ec4899; }
.cat-item-10 > a::before { content: '介'; background: #d97706; }
.cat-item-11 > a::before { content: '逝'; background: #4b5563; }
.cat-item-12 > a::before { content: '退'; background: #059669; }
.cat-item-13 > a::before { content: '住'; background: #0284c7; }
.cat-item-14 > a::before { content: '起'; background: #7c3aed; }
.cat-item-15 > a::before { content: '事'; background: #dc2626; }
.cat-item-16 > a::before { content: '災'; background: #ea580c; }
.cat-item-17 > a::before { content: '車'; background: #0891b2; }
.cat-item-34 > a::before { content: '売'; background: #65a30d; }

/************************************
** カテゴリリスト左揃え修正
************************************/
.sidebar .wp-block-categories-list {
  text-align: left;
}
.sidebar .wp-block-categories-list li a {
  justify-content: flex-start;
}

/************************************
** カテゴリ: 記事数を右端に寄せる
************************************/
.sidebar .wp-block-categories-list li a {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/************************************
** サイドバー見出し左揃え
************************************/
.sidebar h3,
.sidebar .widget-title {
  text-align: left;
}

/************************************
** カテゴリ名を左揃えに修正（上書き）
************************************/
.sidebar .wp-block-categories-list li a {
  justify-content: flex-start !important;
  text-align: left !important;
}

/************************************
** カスタムサイドバーナビ
************************************/
.sidebar-nav { font-family: 'Noto Sans JP', sans-serif; }
.sidebar-search {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.sidebar-search:focus { outline: none; border-color: #059669; }
.sidebar-heading {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e5e7eb;
}
.sidebar-events {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.sidebar-events li a {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.15s;
}
.sidebar-events li a:hover {
  background: #f3f4f6;
}
.ev-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  /* color set via inline style */
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 8px;
}
.ev-name {
  font-size: 13px;
  color: #374151;
  flex: 1;
}
.ev-count {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 4px;
}

/************************************
** サイドバー見出し スタイル修正
************************************/
.sidebar-heading {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 6px;
  padding: 0;
  border: none;
  border-bottom: none;
  background: none !important;
}

/************************************
** 記事内embed iframeのスクロール無効化
************************************/
.entry-content iframe[src*="embed=1"] {
  height: 180px;
  overflow: hidden;
  scrollbar-width: none;
}
.entry-content iframe[src*="embed=1"]::-webkit-scrollbar {
  display: none;
}

/************************************
** embed iframe高さ修正（上書き）
************************************/
.entry-content iframe[src*="embed=1"] {
  height: 100px !important;
}

/************************************
** embed iframe セクションを非表示
************************************/
.entry-content iframe[src*="embed=1"] {
  display: none !important;
}

/************************************
** embedセクション全体を非表示（親div含む）
************************************/
div:has(> iframe[src*="embed=1"]) {
  display: none !important;
}


/* details 開閉フェードアニメーション */
@keyframes detailsFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
details[open] > *:not(summary) {
  animation: detailsFade 0.3s ease-in-out;
}