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

/* === BN Carousel === */
.bn-swiper-wrap{position:relative;margin:12px auto 20px}
.bn-swiper{width:100%}
.bn-swiper .swiper-slide{height:clamp(220px,40vw,360px)}
.bn-slide{position:relative;display:block;width:100%;height:100%;border-radius:14px;overflow:hidden}
.bn-slide-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease}
.bn-slide-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 80%)}
.bn-slide-meta{position:absolute;top:14px;left:14px;right:14px;bottom:auto;color:#fff}
.bn-slide-cat{display:inline-block;font-size:.82rem;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.45);margin-bottom:6px}
.bn-slide-title{margin:0;font:700 clamp(16px,2.2vw,20px);line-height:1.1;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.bn-slide:hover .bn-slide-media{transform:scale(1.04)}
.bn-swiper .swiper-button-prev,.bn-swiper .swiper-button-next{color:#fff;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.35)}
.bn-swiper .swiper-button-prev::after,.bn-swiper .swiper-button-next::after{font-size:18px}
.bn-swiper .swiper-pagination-bullet{background:#fff;opacity:.6}
.bn-swiper .swiper-pagination-bullet-active{background:#fff;opacity:1}

/* ヘッダー直下のカルーセルコンテナ（Cocoon幅に合わせる） */
.bn-hero-area{
  max-width: 1200px;   /* Cocoon標準のメイン幅に合わせる */
  margin: 12px auto 20px;
  padding: 0 20px;
  clear: both;         /* サイドバーの回り込み回避 */
}
/* === Mobile: 2記事表示に合う高さ＆余白調整 === */
@media (max-width: 640px){
  .bn-hero-area{ padding: 0 8px; margin: 12px 0 16px; }
  .bn-swiper .swiper-slide{ height: clamp(160px, 42vw, 220px); }
  .bn-slide-title{ font-size: clamp(13px, 3.5vw, 16px); }
  .bn-slide-cat{ font-size: .8rem; padding: 3px 7px; }
}
/* === BN Carousel: 軽めの角丸に === */
.bn-slide {
  border-radius: 6px !important;   /* 角をほんの少し丸くする */
  /* overflow: hidden;                はみ出し防止 */
}
.bn-slide-media,
.bn-swiper .swiper-slide {
  border-radius: 6px !important;   /* 内側の画像も同じ角丸に */
}

/* === BN Carousel: サムネ比率を Cocoon 一覧と揃える === */

/* サムネ部分を16:9に固定 */
.bn-slide,
.bn-swiper .swiper-slide {
  aspect-ratio: 16/9;   /* 一覧と同じ比率にする */
  height: auto !important; /* 高さ固定を解除 */
}

/* 中の画像をカバーで合わせる */
.bn-slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* スマホ時は幅を「50% - 隙間/2」に固定して2枚＋隙間を収める */
@media (max-width: 767px){
  .bn-swiper .swiper-slide {
    width: calc(50% - 5px) !important; /* ← spaceBetweenと揃えて調整 */
  }
}

/* --- mainコンテンツ上の余白を詰める --- */
.main,
.l-main,
.p-main {
  padding-top: 5px !important;   /* デフォルトは20〜30pxくらい */
  padding-bottom: 0 !important;   /* デフォルトは20〜30pxくらい */
}
/* ヘッダー全体の余白を減らす */
.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-size: 1rem !important;     /* デフォ1rem → 少し小さめ */
    line-height: 1.3;
  }
}

.related-entry-card-snippet, .entry-card-snippet {
    margin: 0 0 2em 0;
}

.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);
}

@media screen and (max-width: 834px) {
    main.main, div.sidebar {
        padding: 3px 16px;
    }
}
#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;
  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 {
  margin: 15px 0;
}

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

/************************************
** 「次のページ」ページネーション
************************************/
.pagination-next {
  margin-top: 20px;
}

.pagination-next-link, .comment-btn {
   background-color: #FFF;
  border: solid 2px #A59ACA;
  border-radius:3px;
  color: #A59ACA;
  display: block;
  font-size: 1.2em;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 10px;
  display: block;
}
.pagination-next-link:hover, .comment-btn:hover {
  background-color: #A59ACA;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

.five-digits-or-more {
  font-size: 13px;
}

.six-digits-or-more {
  font-size: 11px;
}

.pagination .current {
  background-color: #fff;
}
.pagination a:hover {
  background-color: #A59ACA;
  transition: all 0.3s ease-in-out;
  color: #fff;
}
.page-numbers{
 color: #A59ACA;
 border: solid 2px #A59ACA;
}
/* トップのカード一覧で抜粋を非表示に（まず全部消す） */
.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;
}

/* スマホ～タブレットでカード間の縦間隔を一律に */
@media (max-width: 1024px){
  /* カードリスト（Cocoonの構造に合わせて両方ケア） */
  .entry-cards,
  .list {
    display: flex;
    flex-direction: column;
    gap: 16px; /* ← 好みの間隔 */
  }

  /* 子の個別マージンは無効化 */
  .entry-cards .entry-card,
  .list .entry-card {
    margin: 0 !important;
  }
}