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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.archive-title{
margin-top:200px;
}
h1.archive-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 0px;
}
/* ヘッダーコンテナ（全体）に背景色を適用 */
.mobile-menu-buttons {
background: #0C1E35B2;
color: white;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){	
h1.archive-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 0px;
}
/* モバイルヘッダーの下にある白線（境界線）を消す */
  .mobile-menu-buttons {
    border-bottom: none !important;
    box-shadow: none !important; /* 念のため影も除去 */
  }

  #header,
  #header-container,
  #header-in {
    border-bottom: none !important;
    box-shadow: none !important;
  }

.logo-menu-button img {
	width: 150px;
    　　max-height: none;
	margin: 2px auto 0;
}
/*ヘッダーモバイルボタン高さ変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	height: 60px;
	padding-top: 8px;
}
	
/*ロゴを左に*/
.logo-menu-button {
  justify-content: flex-start !important;
  padding-left: 10px; /* 左端に余白を少し持たせる（任意） */
}
	
/* モバイル時のヘッダー全体を半透明ネイビーに */
  .mobile-menu-buttons {
    background-color: #0C1E35B2 !important;
	  z-index:3;
  }

  .mobile-header-logo {
    background-color: transparent !important; /* ロゴ背景を透明に */
  }

  #header,
  #header-container,
  #header-in,
  .header-in,
  .header-in.wrap {
    background-color: transparent !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /* 必要ならばここにコードを書く */
}
/************************************
** 2026-10-05 レスポンシブの修正（社長指摘：ポッドキャストのページで、画面の幅によって表示が崩れる）
** 1) ナレッジのカード（.knowledge-item）：追加CSSの「769〜1024px」の規則は、サムネイルの枠の高さを
**    padding-bottom で作り、画像を absolute で置く。835px以上ではカードが横並びになるのに、枠に幅の指定が無いため、
**    835〜1024px で画像の幅が0になり、画像が消えて余白だけが残っていた（エピソード・番組・映像・タグの各ページで実測）。
**    この幅に限り、枠に幅（45%）と16:9の比率を与え、上にそろえる。768px以下・834px以下（縦並び）と1025px以上は変えない。
** 2) ポッドキャスト番組一覧（.podcast-programs-row）：1枚200pxで5番組が並ぶと約1,060pxになり、
**    835〜1179px では5番組目（catalyst）が右端で切れていた。835px以上では、収まらないときだけカードを縮める。
**    1180px以上（今の幅で収まる）と834px以下（横にスクロールする並び）は変えない。
************************************/
@media (min-width: 835px) and (max-width: 1024px) {
  .knowledge-item .knowledge-thumbnail {
    width: 45% !important;
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 16 / 9;
    align-self: flex-start;
  }
}
@media (min-width: 835px) {
  .podcast-programs-row .podcast-program-card {
    flex: 0 1 200px;
    min-width: 0;
  }
}