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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.main{
    background: rgba(255, 255, 255, 0.9);
}

.splide__slide img {
	display: grid;
	place-content: center;
	height: 100px;
	width: 100%;
	object-fit: contain;
}

/* トップ：今日の各知識DB（[brsm_today_picks]）のカード */
.brsm-today-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 1.5em 0;
}
.brsm-today-card {
	flex: 1 1 240px;
	min-width: 0;
	border: 1px solid #e0d4b8;
	border-radius: 8px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.6);
}
.brsm-today-label {
	font-size: 0.8rem;
	font-weight: bold;
	color: #a07d2c;
	margin-bottom: 6px;
}
.brsm-today-title {
	font-size: 1.1rem;
	line-height: 1.4;
	margin-bottom: 4px;
	word-break: break-word;
}
.brsm-today-title a { color: inherit; }
.brsm-today-sub {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 6px;
}
.brsm-today-desc {
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0;
}


/************************************
** ワイドモニタ対応：コンテンツ幅を最大1500pxまで拡張
**   親テーマは .wrap{width:1256px} 固定のため、広い画面だと左右が大きく余る。
**   1256px 以上のときだけ中央コンテナを最大1500pxまで広げ、増えた幅はメイン列へ。
**   サイドバーは376px固定。.content-in は flexbox なので、メインを flex:1 にすると
**   サイドバー有り＝残り幅いっぱい／サイドバー無し＝全幅、と両方とも崩れない。
************************************/
@media screen and (min-width: 1256px) {
	/* ヘッダー・ナビ・コンテンツ・フッター共通の中央コンテナを拡張 */
	body .wrap {
		width: auto;
		max-width: 1500px;
	}
	/* メインとサイドバーの間隔（space-between の余白が無くなるぶんを補う） */
	body .content-in {
		column-gap: 1.5rem;
	}
	/* メイン列を残り幅いっぱいに（サイドバーは親テーマの376px固定のまま）。
	   flex-basis は 0（=flex:1）にする。auto にすると幅広の表があるページで
	   基準幅がコンテンツ幅まで膨らみ、サイドバーが下へ折り返してしまうため。 */
	body .content-in > .main {
		flex: 1;
		min-width: 0;
	}
}


/************************************
** カスタマイザー「追加CSS」から移植（2026-06-09・内容はそのまま）
**   旧: 外観→カスタマイズ→追加CSS（DB保存・Git管理外）にあったもの。
**   バージョン管理のため子テーマへ移動。移植後はカスタマイザー側を空にする。
**   ※ #sidebar の rgba(...,64) や *{src:...} は元のまま（表示維持優先）。整理は別途。
************************************/

/* ページ遷移時のフラッシュ対策 */
html, body {
 background-color: #f5f5f5;
}

body {
  position: relative;
  background-size: cover;
  z-index: 0;
}

/* ビットマップフォント追加 */
@font-face{
 font-family: 'JF-Dot-jiskan16s';
 src: url('https://beernosusume.net/wp-includes/fonts/JF-Dot-MPlusH12_web.woff') format('woff'),
 url('https://beernosusume.net/wp-includes/fonts/JF-Dot-MPlusH12_web.eot') format('eot');
}

/* 全要素に適用（src は @font-face 専用なのでここでは font-family のみ） */
* {
 font-family: 'JF-Dot-jiskan16s';
}

/* body の背景画像を暗くする */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 0.5の部分で暗さを調整（0.1～0.9） */
    z-index: -1; /* 背景画像の上に配置しつつ、コンテンツの邪魔をしない */
}

/* header の背景画像のセンタリング */
#header {
    background-position: center center; /* 中央に配置 */
    background-size: cover; /* 画像のサイズをヘッダーに合わせて調整 */
}

/* サイドバーの背景を半透明の白に（opacity だと中の文字まで薄くなるため rgba で指定） */
#sidebar{
  background-color: rgba(255, 255, 255, 0.9);
}

/* a リンクのアンダーバー消す */
a {
    text-decoration: none;
}

.logo-text {
    padding: 20px 0 10px 0;
}
.tagline {
    margin: 0 0 2.0em
}


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

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

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