@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
}


/************************************
** アンケートフォーム（Fluent Forms）をサイトの世界観に馴染ませる（2026-06-25）
**   配色はサイト共通: 琥珀アクセント #a07d2c / タン枠 #e0d4b8 / 半透明白パネル。
**   フォームIDに依存しないよう Fluent Forms 標準クラス（.fluentform / .ff-el-*）へ適用。
**   ドットフォントは全要素(*)指定で自動的に効くため、ここでは指定しない。
************************************/

/* アンケート見出し（本文の見出しブロックに追加CSSクラス『brsm-survey-heading』を付ける）。
   区切り線はフォームではなく“見出しの上”に出すことで「線→見出し→フォーム」の並びにする。 */
.brsm-survey-heading {
	position: relative;
	max-width: 640px;
	/* 上は広めに空けて『今日のお勉強』カード群と地続きに見えないようにする */
	margin: 3em auto 0;
	padding-top: 1.4em;
	text-align: center;
	color: #a07d2c;
}
.brsm-survey-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 2px;
	background: #a07d2c;
	border-radius: 2px;
}

/* フォーム全体をカード調パネルに（[brsm_today_card] と同じ枠色・角丸で統一） */
.fluentform {
	max-width: 640px;
	/* 上は見出しのすぐ下／下は回答フィードと近づけるので、どちらも控えめ */
	margin: 0.6em auto 0.4em;
	padding: 24px 28px;
	border: 1px solid #e0d4b8;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.85);
}

/* 各設問のまとまり */
.fluentform .ff-el-group {
	margin-bottom: 1.25em;
}

/* 設問ラベル（琥珀色・太字でサイトの『今日の○○』ラベルと統一） */
.fluentform .ff-el-input--label label {
	color: #a07d2c;
	font-weight: bold;
	margin-bottom: 6px;
}

/* 入力欄（テキスト・テキストエリア・セレクト共通） */
.fluentform .ff-el-form-control {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e0d4b8;
	border-radius: 6px;
	background: #fff;
	color: #333;
}
.fluentform .ff-el-form-control:focus {
	border-color: #a07d2c;
	outline: none;
	box-shadow: 0 0 0 2px rgba(160, 125, 44, 0.2);
}

/* ラジオ・チェックボックスの選択肢 */
.fluentform .ff-el-form-check {
	margin: 4px 0;
}
.fluentform .ff-el-form-check-label {
	margin-left: 4px;
	cursor: pointer;
}

/* 送信ボタン（琥珀色ベース。ホバーで濃く） */
.fluentform .ff-btn-submit {
	background: #a07d2c;
	border: none;
	border-radius: 6px;
	color: #fff;
	padding: 10px 28px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.2s;
}
.fluentform .ff-btn-submit:hover {
	background: #876722;
}

/* 狭い画面ではパネルの左右余白を詰める */
@media screen and (max-width: 480px) {
	.fluentform {
		padding: 18px 16px;
	}
}

/************************************
** アンケート最新回答フィード（[brsm_recent_survey]）
**   max-height は PHP 側で visible 件ぶんを inline 指定。ここでは枠と中身の体裁のみ。
************************************/
.brsm-survey-feed {
	max-width: 640px;
	/* 上はフォームのすぐ下に置くので詰める（下は次要素との間隔を確保） */
	margin: 0.4em auto 1.5em;
	overflow-y: auto;
	border: 1px solid #e0d4b8;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.85);
	-webkit-overflow-scrolling: touch;
}
.brsm-survey-item {
	padding: 12px 18px 12px 28px;
	border-bottom: 1px dashed #e0d4b8;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #333;
	word-break: break-word;
}
.brsm-survey-item:last-child {
	border-bottom: none;
}
/* 投稿日は先頭・控えめに */
.brsm-survey-date {
	margin-right: 1em;
	color: #888;
	font-size: 0.8rem;
}
/* 1件の回答は「[X] 回答内容」を横並びに（ラベル文言は出さない）。回答どうしを離す */
.brsm-survey-field {
	margin-right: 1.4em;
}
.brsm-survey-empty {
	padding: 16px;
	text-align: center;
	color: #888;
}


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

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

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