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

/* ヘッダー全体の余白を減らす */
.l-header,
#header-container {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* === Header hamburger === */

/* ボタン */
.bn-hamburger{
  margin-left:auto; display:inline-flex; flex-direction:column; gap:4px;
  width:36px; height:20px; padding:0; background:transparent; border:0; cursor:pointer;
}
.bn-hamburger span{ display:block; height:2px; width:100%; background:#111; transition:transform .25s, opacity .2s; }
@media (min-width:1024px){ .bn-hamburger{ display:none; } } /* PCでは非表示（必要なら外す） */

/* ドロワー（右から） */
.bn-drawer{ position:fixed; inset:0 0 0 auto; width:82vw; max-width:360px; height:100vh;
  transform:translateX(100%); transition:transform .3s ease; z-index:9999; pointer-events:none; }
.bn-drawer__inner{ height:100%; background:#fff; padding:20px 16px; overflow:auto;
  box-shadow:-10px 0 30px rgba(0,0,0,.15); }
.bn-drawer__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); border:0; padding:0;
  opacity:0; pointer-events:none; transition:opacity .2s; }

/* 開いた状態 */
.bn-drawer.is-open{ transform:translateX(0); pointer-events:auto; }
.bn-drawer.is-open + #bnBackdrop,
.bn-drawer.is-open ~ #bnBackdrop{ opacity:1; pointer-events:auto; }

/* メニュー内 */
.bn-menu{ list-style:none; margin:0; padding:0; }
.bn-menu li{ border-bottom:1px solid #eee; }
.bn-menu a{ display:block; padding:12px 4px; color:#111; text-decoration:none; }

/* Xアニメ（任意） */
.bn-hamburger.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.bn-hamburger.is-active span:nth-child(2){ opacity:0; }
.bn-hamburger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ==== Header: center logo + right hamburger (mobile) ==== */
#header-container .header-in{
  position: relative;              /* ハンバーガーの定位先 */
  display: flex;
  align-items: center;
  padding: 8px 12px;               /* お好みで */
}
/* ロゴブロック（画像/テキストどちらでも） */
#header-container .logo.logo-header.logo-image,
#header-container .site-name.site-name-text-link{
  margin: 0 !important;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}
/* ロゴ画像を“小さすぎない”サイズに（正方形想定） */
#header-container .logo.logo-header.logo-image img{
  display: block;
  height: 56px;                    /* ← 小さ過ぎたら数値を上げる（48〜64pxで調整） */
  width: auto;                      /* 正方形でも比率維持でOK */
  object-fit: contain;
}

/* ハンバーガーは右上に固定（ロゴと独立） */
.bn-hamburger{
  position: absolute;
  top: 100%;
  right: 12px;                      /* 端からの余白 */
  transform: translateY(-50%);
  width: 30px; height: 15px;
  padding: 0; border: 0; background: transparent;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.bn-hamburger span{
  display: block; width: 100%; height: 2px; background: #111;
}

/* PCでは非表示にしたい場合 */
@media (min-width: 1024px){
  .bn-hamburger{ display: none; }
}

/* キャッチフレーズが2段目を作る場合は隠す（任意） */
@media (max-width: 767px){
  .header-tagline, .site-description{ display: none; }
}

/* ==== ヘッダー余白の調整 ==== */
#header-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#header-container .header-in {
  padding-top: 4px;   /* 上下の余白を小さめに */
  padding-bottom: 4px;
}

/* ==== ロゴとハンバーガーの縦中央を揃える ==== */
#header-container .logo.logo-header.logo-image,
#header-container .site-name.site-name-text-link {
  display: flex;
  align-items: center;  /* 中央揃え */
}

#header-container .logo.logo-header.logo-image img {
  display: center;
  height: 45px;   /* ロゴを見やすい大きさに調整（40〜56pxで調整可） */
  width: auto;
  object-fit: contain;
  margin: 0;
}

/* ハンバーガーを右端に配置＆ロゴと中央線を揃える */
.bn-hamburger {
  position: absolute;
  top: 30%;
  right: 12px;
  transform: translateY(-50%); /* ← ロゴと中央線を揃える */
  width: 30px;
  height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
}
.bn-hamburger span {
  display: block;
  height: 1px;
  background: #111;
}
/* header 全体の高さをロゴ画像にフィットさせる */
#header-container,
#header-container-in,
#header-container .header,
#header-container .header-in {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: 50px !important;
  min-height: 0 !important;
}

/* ロゴブロックのリセット */
#header-container .logo.logo-header.logo-image {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ハンバーガーボタンをロゴと中央揃え */
.bn-hamburger {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0;
}
.bn-hamburger span {
  display: block;
  height: 2px;
  background: #111;
}
/* デフォルト（スマホ〜タブレット用） */
#header-container .logo.logo-header.logo-image img {
  height: 52px;   /* スマホに最適なサイズ */
  width: auto;
  object-fit: contain;
}

/* PC表示時にロゴを大きく */
@media (min-width: 1024px) {
  #header-container .logo.logo-header.logo-image img {
    height: 60px;   /* ← PC用。見やすい大きさに調整（60〜80pxくらいが目安） */
  }

  /* ハンバーガーを非表示にしたい場合（PCは不要なら） */
  .bn-hamburger { display: none; }
}
/* ---- Drawer: "Categories" section ---- */
.bn-menu-section{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.bn-menu-heading{
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: .01em;
}

/* wp_list_categories の標準UL/LI をドロワー風に */
.bn-menu-section > ul{ list-style: none; margin: 0; padding: 0; }
.bn-menu-section > ul > li{ border-bottom: 1px solid #f2f2f2; }
.bn-menu-section a{
  display: block;
  padding: 12px 4px;
  color: #111;
  text-decoration: none;
}
.bn-menu-section .children{ padding-left: 12px; border-left: 2px solid #f2f2f2; }
.bn-menu-section .children a{ padding: 10px 4px; }

/* アコーディオンにしたい時のアクセント（任意） */
.bn-cat-toggle{
  float: right;
  opacity: .6;
}

/* Drawer のカテゴリリスト: 点を消す */
.bn-menu-section ul,
.bn-menu-section li.cat-item {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* 各カテゴリ項目の下に線を引く */
.bn-menu-section li.cat-item {
  border-bottom: 1px solid #ddd !important;  /* 薄い灰色 */
}

/* 最後の li は線を消す */
.bn-menu-section li.cat-item:last-child {
  border-bottom: none !important;
}

/* リンク領域を広げる */
.bn-menu-section li.cat-item a {
  display: block;
  padding: 12px 4px;
  color: #111;
  text-decoration: none;
}

 /* タイトル部分の文字サイズを少し小さく */
  .entry-card-title,
  .post-card-title,
  .entry-card-content .card-title,
  .card-content .card-title,
  .e-card-content .card-title {
	font-weight: bold;
    font-size: 0.8rem !important;     /* デフォ1rem → 少し小さめ */
    line-height: 1.3;
  }
}

.widget-entry-card {
    font-weight: bold;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 1px);
}

#header-container {
  position: sticky;
  top: 0;
  z-index: 9999; /* 他要素より前面に出す */
}

/* 固定ページでは読了時間を非表示 */
.page .read-time {
  display: none !important;
}

/* ==== Categories widget: PC=1列 / Mobile=2列 + big color dots ==== */

/* ベース（PCは1列） */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li{
  margin: 0 10px;
  padding: 0;
}
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li > a{
  display: inline-flex;
  align-items: center;
  gap: 10px;                       /* ドットと文字の間隔 */
  text-decoration: none;
  color: #111;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ドット（大きめに変更） */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li > a::before{
  content: "";
  width: 14px;                     /* ドット幅 */
  height: 14px;                    /* ドット高さ */
  border-radius: 50%;
  flex: 0 0 14px;
  background: #3B82F6;             /* デフォルト色 */
}

/* 10色ループ */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+1) > a::before{ background:#3B82F6; } /* blue */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+2) > a::before{ background:#10B981; } /* green */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+3) > a::before{ background:#F59E0B; } /* amber */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+4) > a::before{ background:#EF4444; } /* red */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+5) > a::before{ background:#8B5CF6; } /* violet */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+6) > a::before{ background:#EC4899; } /* pink */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+7) > a::before{ background:#14B8A6; } /* teal */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+8) > a::before{ background:#6366F1; } /* indigo */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+9) > a::before{ background:#F97316; } /* orange */
.widget.widget-sidebar.widget-sidebar-standard.widget_categories > ul > li:nth-child(10n+10) > a::before{ background:#84CC16; } /* lime */

/* スマホのみ：カテゴリーリスト2列グリッド */
@media (max-width: 767px){
  .widget.widget-sidebar.widget-sidebar-standard.widget_categories ul{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
  }
}

/* フッターメニューのリンクを縦線で区切る */
.navi-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* 余白は調整 */
  justify-content: center; /* 中央寄せ */
}

.navi-footer  ul li {
  list-style: none;
  margin: 0;
  padding: 0 8px; /* テキストの左右に余白 */
  position: relative;
}

/* 奇数項目（左側の列）の右端に縦線を入れる */
@media (max-width: 767px){
.navi-footer ul li:nth-child(odd)::after {
  content: "|";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #999; /* 線の色 */
}
}

.footer {
  margin-top: 0;
  padding: 0;
}

@media (max-width: 767px){
 main.main,
  div.sidebar {
    margin: 10px 10px 0;
  }
}

/* ==== Hamburger menu categories with color dots ==== */
.bn-drawer .bn-menu-section li a{
  display: inline-flex;
  align-items: center;
  gap: 8px;                     /* ドットと文字の間 */
  text-decoration: none;
  color: #111;
  font-size: 15px;
  line-height: 1.4;
}

/* ドット共通 */
.bn-drawer .bn-menu-section li a::before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
  background: #3B82F6;          /* デフォルト色 */
}

/* 色を順番でループ（10色） */
.bn-drawer .bn-menu-section li:nth-child(10n+1) a::before{ background:#3B82F6; } /* blue */
.bn-drawer .bn-menu-section li:nth-child(10n+2) a::before{ background:#10B981; } /* green */
.bn-drawer .bn-menu-section li:nth-child(10n+3) a::before{ background:#F59E0B; } /* amber */
.bn-drawer .bn-menu-section li:nth-child(10n+4) a::before{ background:#EF4444; } /* red */
.bn-drawer .bn-menu-section li:nth-child(10n+5) a::before{ background:#8B5CF6; } /* violet */
.bn-drawer .bn-menu-section li:nth-child(10n+6) a::before{ background:#EC4899; } /* pink */
.bn-drawer .bn-menu-section li:nth-child(10n+7) a::before{ background:#14B8A6; } /* teal */
.bn-drawer .bn-menu-section li:nth-child(10n+8) a::before{ background:#6366F1; } /* indigo */
.bn-drawer .bn-menu-section li:nth-child(10n+9) a::before{ background:#F97316; } /* orange */
.bn-drawer .bn-menu-section li:nth-child(10n+10) a::before{ background:#84CC16; } /* lime */

.entry-title,
.archive-title {
  font-size: 20px;
  margin: 15px 5px;
}

.widget-sidebar-title.widget-title::after {
  content: "";
  display: block;
  width: 100%;                /* 横幅いっぱい */
  height: 2px;
  background-color: #E6002F;
  margin-top: 6px;
}

/* トップのカード一覧で抜粋を非表示に（まず全部消す） */
.entry-card .entry-card-snippet,
.related-entry-card .related-entry-card-snippet{
  display: none;
}

/* 最新（bn-latest）だけ抜粋を表示 */
.entry-card.bn-latest .entry-card-snippet,
.related-entry-card.bn-latest .related-entry-card-snippet{
  display: block;
}

.carousel-entry-card-title,
.card-title {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 1) 画面幅いっぱいに（中央寄せの体裁は保つが左右ガターなし） */
.wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;     /* 中央寄せの“形式”は維持 */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) 横並びの親は左詰め+gap管理（左右端の空白を作らない） */
.content-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* space-between は左右に空白を作るのでNG */
  gap: 0;                        /* ここで要素間の余白を0に */
}

 .content {
    margin-top: 0;
  }

.carousel-content .slick-track {
  padding: 0;
}

.a-wrap {
  padding: 2px;
}

.main.main,
  div.sidebar {
    padding: 0 5px 10px;
    margin: 0;
}

.sidebar h2,
.sidebar h3 {
  /*background-color: var(--cocoon-xx-thin-color);*/

  padding: 12px 5px;
  /*margin: 16px 0;*/
}

.archive-title .fa-folder-open::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #FFD700; /* ドットの色 */
  border-radius: 50%;        /* 丸にする */
  margin-right: 8px;
}

.ect-entry-card .a-wrap .card-thumb,
  .rect-entry-card .a-wrap .card-thumb,
  .ect-big-card-first .a-wrap .card-thumb {
    margin-bottom: 0px;
  }

/* タイトル直下の行（カテゴリ1つ＋PV） */
.bn-under{
  margin: 6px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  align-items: center;
  font-size: .9em;
  line-height: 1.4;
}

.bn-cat{
  padding: .15em .55em;
  border-radius: 999px;
  background: rgba(19,65,146,.08); /* #134192の淡色 */
  color: #134192;
}

.bn-views{
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: #666;
}

.bn-views::before {
  font-family: "FontAwesome";
  content: "\f06e"; /* fa-eye */
  font-size: 0.9em;
  opacity: 0.6;     /* 薄くして柔らかい印象に */
}

/* 既存の“カード下のカテゴリ列”が不要なら非表示に */
.entry-card-categorys.e-card-categorys{ display: none; }

/* ダークモード微調整（任意） */
@media (prefers-color-scheme: dark){
  .bn-cat{ background: rgba(255,255,255,.12); color:#cfe0ff; }
  .bn-views{ color:#bbb; }
}

.entry-card {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.pagination-next-link {
  display: none;
}

/*ページネーションの番号ボタンを丸くする*/
.page-numbers{
	border-radius: 50%; /*角丸*/
}

/*ページネーションの番号ボタンを丸くする*/
.page-numbers{
	border-radius: 50%; /*角丸*/
}