/**
 * テーマ独自の調整CSS。
 *
 * 他のCSSより後に読み込まれるので、ここに書いた指定が優先される。
 * ベースCSS（generic/・blog.css・theme-overrides.css 等）への上書きは
 * 元ファイルを直接いじらず、このファイルにまとめる。
 */

/* アイキャッチ画像は幅100%（用語集・ブログ・固定ページ共通） */
.post_image img,
#post_image img {
	width: 100%;
	height: auto;
}

/* サイドバーバナー: 枠の飾りを外して素のバナー+間隔20px（下marginは同期CSS）に。
   .bannar-items はバナー1枚の枠で、複数バナーは枠が並ぶ。 */
.common-bannar .bannar-items {
	width: auto;
	padding: 0;
	border: none;
}

/* バナー画像は枠幅いっぱいに統一。元画像の解像度まかせだと
   バナーごとに表示幅がばらつく。小さい元画像は引き伸ばされるため、
   横600px以上での入稿を推奨（マニュアルに記載）。 */
.common-bannar .bannar-items img {
	display: block;
	width: 100%;
	height: auto;
}

/* 2列表示（751px〜1100px・同期CSS）ではバナー列の全体幅を抑えて中央寄せ。
   列幅が広すぎるとバナーが不自然に大きく・粗くなるため。
   750px以下は1列なので、この制限はかけない（サイドバーの幅いっぱいに出す）。 */
@media screen and (min-width: 751px) and (max-width: 1100px) {
	.common-bannar {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 2列グリッド時（1100px以下・同期CSS側で定義）にタイトルが列に入らないよう全幅に。 */
.common-bannar .bannar-title {
	grid-column: 1 / -1;
}

/* モバイルではサイドバーを縦積みに */
@media screen and (max-width: 750px) {
	#side_col {
		flex-direction: column;
	}
}

/* サイドバー追従（side_col_fix.js が .side_col_fixed を付与）
   固定表示になったら、ウィジェット設定で「スクロール追従に含める」に
   チェックしたもの（.stick_on_scroll）だけを残す。 */
#side_col {
	align-items: flex-start;
}

#side_col .side_col_fixed .side_col_item {
	display: none;
}

#side_col .side_col_fixed .side_col_item.stick_on_scroll {
	display: block;
}

/* バナーウィジェットの「追従時は固定CTAだけ残す」。
   PC幅の追従固定時のみ、固定CTA（.bannar-pinned）以外のバナーを隠す。
   1100px以下は side_col_fixed が常時付くため、メディアクエリでPC幅に
   限定しないと2列表示のバナーまで消えてしまう。 */
@media screen and (min-width: 1101px) {
	.side_col_fixed .stick-pinned-only .bannar-title,
	.side_col_fixed .stick-pinned-only .bannar-items {
		display: none;
	}

	.side_col_fixed .stick-pinned-only .bannar-items.bannar-pinned {
		display: block;
	}
}

/* 農業関連記事（RSS）。共通の見出しリセットに負けないよう !important 指定 */
#rss_feeds_list h3.title {
	margin-top: 10px !important;
}

/* ── ページCTA（ヘッダーCTA/フッターCTA）──
   前後のコンテンツとくっつかないよう余白を確保し、中央揃えで表示する。 */
.page_cta {
	text-align: center;
}

/* グローバルメニューの外部リンクに付く右上矢印。
   文字色に追従（currentColor）するので、hover時も自然に変わる */
.hs-menu-item .external-link-icon {
	margin-left: 5px;
	vertical-align: baseline;
}

/* CTAバナーは列の幅に収める。原寸が大きい画像（2048px等）を登録しても
   本文列からはみ出さないように */
.page_cta img,
.top_cta_item img,
.footer-banner-cta img,
.bannar-item img {
	max-width: 100%;
	height: auto;
}

/* 画像バナーのCTAはホバーで薄くする。
   設置場所は4種（本文上下=page_cta / トップのスライダー=
   top_cta_item / フッターバナー=footer-banner-cta / サイドバー=bannar-item）。

   **`> a > img` に絞る**のが要点。`.page_cta a:hover` と書くと
   ボタン型CTAの `<a class="q_custom_button bt_green">` にも当たり、緑の
   塗りつぶし hover（generic/design.css の .bt_green:hover）が半透明に
   なってしまう。画像を持つ image 形式だけを対象にすれば、ボタン型は本来の
   塗りつぶしのまま、埋め込み形式にも影響しない。 */
.page_cta > a > img,
.top_cta_item > a > img,
.footer-banner-cta > a > img,
.bannar-item > a > img {
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

.page_cta > a:hover > img,
.top_cta_item > a:hover > img,
.footer-banner-cta > a:hover > img,
.bannar-item > a:hover > img {
	opacity: 0.6;
}

.page_cta_header_cta {
	margin-bottom: 40px;
}

.page_cta_footer_cta {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* ── 製品リンク掲載希望フォーム（add_product_form）──
   本文との間の余白。見出しの色は .post_content 内に置くことで
   #article .post_content h1〜h6 のルール（#333固定）が効く。 */
.faq_list.add_product_form {
	margin-top: 40px;
}

/* 開閉は jQuery の slideToggle（高さ事前計測）だと HubSpot フォームの
   遅延描画で引っかかるため、CSSグリッドの 0fr/1fr で行う
   （ハンドラ差し替えは assets/js/add-product-form.js）。
   display に !important を付け、jscript.js のFAQアコーディオンが
   inline の display:none を与えても状態が壊れないようにする。 */
.add_product_form .answer {
	display: grid !important;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.4s ease, padding 0.4s ease;
}

.add_product_form .answer > .answer_inner {
	overflow: hidden;
}

.add_product_form .answer.is-closed {
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
}

/* カード内のカテゴリチップ（.categories ul.tags）には #article ul.tags の
   padding-bottom:30px（ブログトップ検索下のカテゴリ一覧用の余白）を適用しない。
   3カラム一覧でカードの間が空きすぎるため。 */
#article .categories ul.tags {
	padding-bottom: 0;
}

/* ── 記事下の執筆者/会社概要ボックス ── */
/* シェアボタンと隣接するため余白を確保 */
.blog-author-content {
	margin-top: 40px;
}

/* SVG画像はwidth/height属性が1になるため最低150px幅を保証 */
.blog-author-content .author-info-image img {
	width: 150px;
	height: auto;
}

/* ── サイドバー目次ウィジェット（side-tocBox）──
   中身の複製・開閉は assets/js/toc.js。 */
.widget .side-tocBox {
	max-height: calc(100vh - 420px);
	overflow-y: auto;
	border: 1px solid #eee;
	padding: 20px;
}

.widget .side-tocBox .tocTitle {
	display: block;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 0.5em;
	padding-bottom: 0.5em;
	position: relative;
}

.widget .side-tocBox ol {
	padding-left: 0;
	position: relative;
	list-style: none;
	margin-top: 5px;
	margin-bottom: 0;
}

.widget .side-tocBox ol:before {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 0.8rem;
	bottom: 0.8rem;
	width: 0.2rem;
	background: #b4d4b6;
}

.widget .side-tocBox ol li,
.widget .side-tocBox ol li ol li {
	display: flex;
	position: relative;
	flex-direction: column;
	margin: 10px 0;
	line-height: 1.4;
}

.widget .side-tocBox ol li::before {
	flex-shrink: 0;
	content: "";
	top: -5px;
	left: 3px;
	width: 10px;
	height: 10px;
	background: #b4d4b6;
	border: 2px solid #fff;
	border-radius: 50%;
	margin-right: 1rem;
	transform: translateY(0.5rem);
	position: absolute;
}

.widget .side-tocBox ol li ol li:before {
	top: 2px;
	left: 5px;
	width: 6px;
	height: 6px;
}

.widget .side-tocBox ol li ol {
	padding: 0;
	margin-top: 5px;
}

.widget .side-tocBox ol li ol:before {
	display: none;
}

.widget .side-tocBox ol li a {
	font-size: 14px;
	text-align: left;
	margin-left: 20px;
	color: #000;
}

.widget .side-tocBox ol li ol li a {
	color: #434648;
}

.widget .side-tocBox ol li a:hover,
.widget .side-tocBox ol li ol li a:hover {
	font-weight: bold;
}

.widget .side-tocBox ol li.hight:before {
	background: #379b05 !important;
}

@media screen and (min-width: 1025px) {
	.modal-open,
	.widget.sidebar-sticky .modal-close {
		display: none;
	}
}

@media screen and (max-width: 1024px) {
	.sidebar-sticky .modal-container {
		position: fixed;
	}

	.widget.sidebar-sticky .modal-close {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top: -30px;
		right: -5px;
		width: 30px;
		height: 30px;
		font-size: 30px;
		color: #fff;
		cursor: pointer;
	}

	.sidebar-sticky .modal-container.active {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		padding: 100px 0 40px;
		overflow: auto;
		transition: 0.3s;
		box-sizing: border-box;
		z-index: 1000;
	}

	.sidebar-sticky .modal-container:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}

	.widget .side-tocBox {
		max-height: calc(80vh - 120px);
		overflow-y: auto;
	}

	.sidebar-sticky .modal-body {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		max-width: 500px;
		width: 90%;
		background-color: #f6f6f6;
		padding: 15px;
		z-index: 1000;
	}

	.modal-open {
		width: 55px;
		height: 34px;
		padding: 4px 0;
		background-color: #379b05;
		text-align: center;
		position: fixed;
		right: 0;
		bottom: 80px;
		z-index: 100;
		opacity: 0.9;
		display: block;
		cursor: pointer;
	}

	.modal-open svg {
		display: block;
		margin: 0 auto;
	}

	.modal-open span {
		display: block;
		font-size: 9px;
		color: #fff;
		line-height: 1;
		margin-top: -1px;
	}
}

/* ── トップCTAカルーセル ──
   CTAマスタのバナーをスライドいっぱいに表示する。 */
.header_carousel .top_cta_item img {
	width: 100%;
	height: auto;
}

/* ── 動画一覧（youtube_cards）── */
.youtube_cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(min(300px, 100%), (100% - 60px) / 2), 1fr));
	align-items: flex-start;
	column-gap: 30px;
	row-gap: 45px;
	margin: 0 0 24px !important;
	list-style: none !important;
}

.youtube_card {
	display: grid;
	grid-template:
		" player player " auto
		" icon   title  " auto
		" icon   name   " 1fr
		/ 70px   1fr;
	column-gap: 15px;
}

.youtube_card .youtube_player {
	grid-area: player;
	width: 100%;
	height: auto;
	min-height: 150px;
	margin-bottom: 20px;
	aspect-ratio: 560 / 315;
}

.youtube_card .video_title {
	grid-area: title;
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.5 !important;
	font-weight: 700;
}

.youtube_card .channel_icon {
	grid-area: icon;
	width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}

.youtube_card .channel_icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.youtube_card .channel_name {
	grid-area: name;
	margin: 5px 0 0 !important;
	font-size: 12px;
	line-height: 1.5 !important;
	color: #7c7c7c;
}

@media screen and (max-width: 750px) {
	.youtube_cards {
		row-gap: 35px;
	}

	.youtube_card {
		column-gap: 10px;
		grid-template-columns: 50px 1fr;
	}

	.youtube_card .youtube_player {
		margin-bottom: 15px;
	}
}

/* ── 管理バー（ログイン時）との共存 ──
   バー高さ分の余白はWPコアが出力する html { margin-top } で確保されるため、
   ベースCSSの body.admin-bar { padding-top } は二重の余白になるので打ち消す。
   一方、fixed 配置の要素（固定ヘッダー・ドロワー）には html の margin が
   効かないため、バー分のオフセットは必要（既存ルールを残す／PCは追加）。 */
.pc body.admin-bar {
	padding-top: 0;
}

/* PC固定ヘッダー時：fixed になった #header が管理バーの下に潜るためバー分下げる
   （モバイルはJSが header_fix と header_fix_mobile を両方付与するため、
   ベースCSSの margin-top 32px/46px 指定を潰さないよう .pc に限定する） */
.pc body.admin-bar.header_fix #header {
	margin-top: 32px;
}

/* ベースCSSが admin-bar 用に 190px へ広げている固定ヘッダー時の余白を通常値へ戻す */
.pc body.admin-bar.header_fix {
	padding-top: 160px;
}

@media screen and (max-width: 1251px) {
	/* 通常時の二重余白を打ち消し（46px指定の781px以下もこのルールが後勝ちする） */
	body.admin-bar {
		padding-top: 0;
	}

	/* 固定ヘッダー時の余白も 102px / 126px から通常値の 60px へ戻す
	   （#header 自体のバー分オフセットはベースCSSの margin-top 32px / 46px が担う） */
	.mobile body.admin-bar.header_fix_mobile {
		padding-top: 60px;
	}
}

/* WPコアは600px以下で管理バーを position:absolute にする（スクロールで上へ
   流す標準挙動）。ただしテーマは body { position:relative } のため body が
   基準ボックスになり、バーの top:0 が「コアの html { margin-top:46px } の下」
   を指して46px下がりヘッダーに重なる。バーを本来のキャンバス最上部
   （htmlのマージン領域）へ戻す。 */
@media screen and (max-width: 600px) {
	body.admin-bar #wpadminbar {
		top: -46px;
	}

	/* バーはスクロールで画面外へ流れるため、固定ヘッダーをバー分下げる
	   ベースCSSの margin-top:46px（781px以下指定）は600px以下では不要
	   （画面上部に46pxの空白ができてヘッダーが下に落ちる）。
	   601px以上はバーが fixed で常に見えているため margin を維持する。 */
	body.admin-bar.header_fix_mobile #header {
		margin-top: 0;
	}
}

/* ----------------------------------------------------------------------
 検索結果: 件数表示と表示切替（カード⇔一覧）
---------------------------------------------------------------------- */
.hs-search-results .search_results_bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.hs-search-results .search_results_count {
	font-size: 14px;
	color: #333;
	margin: 0;
}

.hs-search-results .search_results_count span {
	color: #379b05;
	font-size: 20px;
	font-weight: 700;
	margin: 0 3px;
}

.hs-search-results .layout_switch {
	display: flex;
	gap: 5px;
}

.hs-search-results .layout_switch button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #c3c4c7;
	background: #fff;
	color: #7c7c7c;
	cursor: pointer;
	transition: all 0.2s ease;
}

.hs-search-results .layout_switch button:hover {
	color: #379b05;
	border-color: #379b05;
}

.hs-search-results .layout_switch button.is_active {
	background: #379b05;
	border-color: #379b05;
	color: #fff;
}

.hs-search-results .layout_switch .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	word-wrap: normal;
}

/* 一覧表示（サムネイル左・タイトル/説明右） */
#main_contents #hsresults.list_view {
	display: block;
}

#main_contents #hsresults.list_view .item {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 25px 0;
	border-bottom: 1px solid #e5e5e5;
}

#main_contents #hsresults.list_view .item:first-child {
	border-top: 1px solid #e5e5e5;
}

/* 一覧表示ではカード用の浮き上がりhover（top:-3px + box-shadow）を無効化。
   タイトル・説明の減光hoverのみ残す */
#main_contents #hsresults.list_view .item:hover {
	top: 0;
	box-shadow: none;
}

/* hoverで画像も減光（カード表示・一覧表示共通） */
.hs-search-results .blog_list .item .image img {
	transition: opacity 0.2s ease;
}

.hs-search-results .blog_list .item:hover .image img {
	opacity: 0.6;
}

#main_contents #hsresults.list_view .link {
	display: flex;
	align-items: flex-start;
	column-gap: 25px;
	height: auto;
}

#main_contents #hsresults.list_view .image_wrap {
	width: 200px;
	min-width: 200px;
	height: 120px;
}

#main_contents #hsresults.list_view .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#main_contents #hsresults.list_view .content {
	position: static;
	flex: 1;
	height: auto;
	border: none;
	background: none;
}

#main_contents #hsresults.list_view .content_inner {
	padding: 0;
}

#main_contents #hsresults.list_view .title {
	color: #379b05;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	margin-bottom: 8px;
}

#main_contents #hsresults.list_view .hs-search-results__description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
}

/* ── 検索結果カードの説明文をカード内に必ず収める──
   theme-overrides.css は説明文に
   `display: -webkit-inline-box` を指定している。インラインレベルのボックスには
   `overflow` が適用されないため、行数の切り詰め（-webkit-line-clamp）が効かず、
   説明文がカードの外へこぼれることがある。ブロックレベルの `-webkit-box` にして
   切り詰めを確実に効かせる。
   ※タイトル（.title）は触らないこと。theme-overrides 側が
   `-webkit-line-clamp: 1` を指定しており、ここで overflow を効かせると
   タイトルが1行に切られてしまう（実際の表示は内側の span の 3 行）。 */
.hs-search-results .blog_list.type1 .hs-search-results__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* 幅を明示して、行ごとに折り返し位置がばらつかないようにする。
	   `-webkit-inline-box` はインラインレベルなので幅が「中身なり」（shrink-to-fit）
	   に決まり、ブラウザによっては行によって箱の幅が変わって、1件だけ右へ
	   突き抜けて見えることがある。100% に固定すれば必ず全件同じ幅になる。 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;

	/* URL のような切れ目のない文字列が来ても必ず折り返す。 */
	overflow-wrap: anywhere;
}

/* カード表示では、万一中身が伸びても枠の外に描かれないようにする。 */
.hs-search-results .blog_list.type1:not(.list_view) .content {
	overflow: hidden;
}

@media screen and (max-width: 750px) {
	#main_contents #hsresults.list_view .item {
		padding: 15px 0;
	}

	#main_contents #hsresults.list_view .link {
		column-gap: 15px;
	}

	#main_contents #hsresults.list_view .image_wrap {
		width: 120px;
		min-width: 120px;
		height: 80px;
	}

	#main_contents #hsresults.list_view .title {
		font-size: 15px;
	}
}

/* ----------------------------------------------------------------------
 LPテンプレート: 本文が短いページでもフッターが浮かないように
 （旧 thanks-page.css の min-height をLP共通化）
---------------------------------------------------------------------- */
body.hide_global_menu #main_contents {
	min-height: calc(100vh - 500px);
}

@media screen and (min-width: 750px) and (max-width: 1251px) {
	body.hide_global_menu #main_contents {
		min-height: calc(100vh - 430px);
	}
}

@media screen and (min-width: 550px) and (max-width: 750px) {
	body.hide_global_menu #main_contents {
		min-height: calc(100vh - 380px);
	}
}

@media screen and (max-width: 550px) {
	body.hide_global_menu #main_contents {
		min-height: calc(100vh - 490px);
	}
}

/* まとめボックス（.summary_box）のチェックマーク。同期CSS
   （generic/style.css）は Font Awesome の \f058 を使うが、テーマは
   Font Awesome を読み込まない。販売店ページと同じ実物の
   チェックアイコンで置き換える（/membership/register で使用） */
.summary_box .summary_list li::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	top: 5px;
	background-image: url(../images/check-icon.png);
	background-size: contain;
	background-repeat: no-repeat;
}

/* ----------------------------------------------------------------------
 タイトル下の注記（赤文字）。/membership 系のページで使う。
---------------------------------------------------------------------- */
#post_title .title_note {
	color: red;
	margin-top: 5px;
	font-size: 130%;
	font-weight: bold;
}

/* ---- TablePress のメーカー表 -----------------------------------------------
 * theme-overrides.css は table 自体を display:block + overflow-x:scroll に
 * して横スクロールさせているが、TablePress は thead を分離するため、
 * その方式だとヘッダと本体で列がずれる。スクロールをラッパーへ移し、
 * table は通常の table のままにする。 */
#article .post_content .manufacturer-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#article .post_content .manufacturer-scroll::-webkit-scrollbar {
	height: 10px;
}

#article .post_content .manufacturer-scroll::-webkit-scrollbar-track {
	background: #eee;
}

#article .post_content .manufacturer-scroll::-webkit-scrollbar-thumb {
	background: #bbb;
}

#article .post_content table.manufacturer.tablepress {
	display: table;
	width: auto;
	min-width: 100%;
	overflow: visible;
	white-space: nowrap;
}

#article .post_content table.manufacturer.tablepress tbody {
	display: table-row-group;
	width: auto;
}

/* 縞模様は「データ2行目・4行目…が濃いグレー」。
 * thead が分かれることで tbody の nth-child が1つずれるため even を使う。 */
#article .post_content table.manufacturer.tablepress tbody tr:nth-child(odd) td {
	background-color: #f5f5f5;
}

#article .post_content table.manufacturer.tablepress tbody tr:nth-child(even) td {
	background-color: #e5e5e5;
}

/* TablePress が出力するテーブル名・説明・編集リンクは本文では使わない。 */
#article .post_content table.tablepress > caption {
	display: none;
}

/* 関連リンクボックスの見出しアイコン（旧 Font Awesome の電球をSVGへ置換）。
   本文にSVGを直接書くと wp_kses_post() で消えるため、空のspanへ背景画像で当てる。 */
#article .post_content .note .title .note-icon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.2em;
	vertical-align: -0.18em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.5.4.8 1 .9 1.6l.1.6h5.2l.1-.6c.1-.6.4-1.2.9-1.6A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ------------------------------------------------------------------
 * SNSシェアボタン（X / Facebook / はてブ / LINE / note）
 * アイコンフォントを使わずインラインSVGで描く。
 * ------------------------------------------------------------------ */
.single_share .nouzai-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 45px;
	padding: 0;
	list-style: none;
}

.single_share .nouzai-share__item {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background-image: none;
}

.single_share .nouzai-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 42px;
	padding: 0 8px;
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	background-color: #555;
	transition: opacity 0.2s ease;
}

.single_share .nouzai-share__link:hover,
.single_share .nouzai-share__link:focus {
	color: #fff;
	opacity: 0.75;
	text-decoration: none;
}

.single_share .nouzai-share__icon {
	display: inline-flex;
	flex: none;
	width: 18px;
	height: 18px;
}

.single_share .nouzai-share__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.single_share .nouzai-share__label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ブランドカラー */
.single_share .is-x .nouzai-share__link { background-color: #000; }
.single_share .is-facebook .nouzai-share__link { background-color: #1877f2; }
.single_share .is-hatebu .nouzai-share__link { background-color: #00a4de; }
.single_share .is-line .nouzai-share__link { background-color: #06c755; }
.single_share .is-note .nouzai-share__link { background-color: #41c9b4; }

/* 幅が足りない画面ではラベルを隠してアイコンだけにする */
@media screen and (max-width: 520px) {
	.single_share .nouzai-share {
		gap: 6px;
	}

	.single_share .nouzai-share__link {
		height: 40px;
		padding: 0 4px;
	}

	.single_share .nouzai-share__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ── 執筆者アーカイブ（/blog/author/…）の紹介ボックス ──
 * 記事下のボックス（blog.css の .Blog-Detail 配下）と同じ見た目にする。
 * アーカイブには .Blog-Detail ラッパーが無いため、ここで同等の指定を持つ。 */
.blog-author-content.is-archive {
	margin: 0 0 40px;
	border: 1px solid #379b05;
	border-radius: 3px;
}

.blog-author-content.is-archive .author-info-header {
	padding: 8px 24px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background: #379b05;
}

.blog-author-content.is-archive .author-wrap {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 20px;
}

.blog-author-content.is-archive .author-wrap .left-wrap {
	max-width: 200px;
}

.blog-author-content.is-archive .author-wrap .right-wrap {
	width: calc(100% - 200px);
}

.blog-author-content.is-archive .author-authorname {
	padding-bottom: 10px;
	border-bottom: 2px solid #e3e3e3;
	font-size: 18px;
	font-weight: 700;
}

.blog-author-content.is-archive .author-desc {
	margin-top: 10px;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.6;
	word-break: break-word;
}

.blog-author-content.is-archive .author-website {
	margin-top: 10px;
	font-size: 14px;
	word-break: break-all;
}

@media (max-width: 959px) {
	.blog-author-content.is-archive .author-wrap {
		display: grid;
	}

	.blog-author-content.is-archive .author-wrap .left-wrap {
		max-width: 100%;
		margin: 0 auto;
	}

	.blog-author-content.is-archive .author-wrap .right-wrap {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * サイドバーウィジェット（カテゴリ一覧 / 記事一覧）の補完
 *
 * 枠組みは generic/style.css（.category-list.pattern-1 / .post-list）にある。
 * ここでは 290px のサイドバー幅で破綻しないよう、長いカテゴリー名の
 * 折り返し・サムネイルの寸法・行の区切りを補う。
 * ------------------------------------------------------------------ */

/* ── カテゴリ一覧 ── */
/* 名前が長いと1行に収まらないので、高さ固定をやめて上下パディングで組む。 */
#side_col .category-list.pattern-1 li a {
	height: auto;
	min-height: 60px;
	padding: 12px 20px;
	gap: 10px;
	line-height: 1.5;
	flex-wrap: nowrap;
}

#side_col .category-list.pattern-1 li a .filter-link-name {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}

#side_col .category-list.pattern-1 li a .filter-link-count {
	flex: none;
	min-width: 40px;
	height: 26px;
	line-height: 24px;
}

/* hover の左詰めは padding-left だけを動かす（行の高さは変えない）。 */
#side_col .category-list.pattern-1 li a:hover {
	padding-left: 30px;
}

/* ── 記事一覧 ── */
.post-list .post-link {
	display: block;
	color: #333;
	text-decoration: none;
}

.post-list .post-link:hover {
	text-decoration: none;
}

/* サムネイルの枠と画像を同じ寸法にし、はみ出しを切る。 */
.post-list .post-img-wrap {
	float: none;
	flex: none;
	width: 102px;
	height: 102px;
	overflow: hidden;
	box-sizing: border-box;
}

.post-list .post-img-wrap .overflow-hidden {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* アイキャッチ未設定でも枠が空にならないよう no image を敷く。 */
.post-list .post-img {
	width: 100%;
	height: 100%;
	background: #f5f5f5 url("../images/no_image1.gif") no-repeat center center;
	background-size: cover;
}

.post-list .text-area {
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 102px;
	padding: 0 14px;
	border-left: none;
}

/* サムネイルを出さない設定のときは左の余白を詰める。 */
.post-list .d-flex > .text-area:first-child {
	border-left: 1px solid #ddd;
}

.post-list .text-area > div {
	width: 100%;
}

/* タイトルは3行で省略（サムネイルの高さ102pxに収める）。 */
.post-list .text-area .post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}

.post-list .post-link:hover .text-area .post-title {
	color: #379b05;
}

/* ── サイドバー見出しのサイズ調整──
 * generic/style.css は 22px / 高さ40px / 4px の縦線で組んでいるが、
 * 290px幅のサイドバーでは大きすぎるため 18px を基準に一段小さくする。
 * 種類ごとにばらけないよう、サイドバー内の見出しをまとめて指定する。 */
#side_col .category-list h3,
#side_col .post-list h3,
#side_col .post-slider h3,
#side_col .common-bannar .bannar-title,
#side_col .widget-title {
	margin: 0 0 14px;
	padding: 0 0 0 13px;
	height: auto;
	min-height: 26px;
	border-left: 3px solid #379b05;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

/* pattern-2（開閉式）の見出しは枠付きの別デザインなので対象外。 */
#side_col .category-list.pattern-2 h3 {
	margin: 0;
	padding: 0 18px;
	height: 60px;
	min-height: 0;
	border-left: 1px solid #ddd;
	font-size: 14px;
	font-weight: normal;
	line-height: 60px;
}

/* ── ブログ一覧カードのタイトル──
 * blog.css は 18px だが、サイドバー見出し(18px)と同じ大きさで
 * 主従が分かりにくいため 16px を基準にする。行間は文字が小さくなる分
 * 1.3 → 1.5 に広げて可読性を保つ。 */
#main_col.blog .posts .info .title h3 {
	font-size: 16px;
	letter-spacing: 1.6px;
	line-height: 1.5;
}

/* ── 検索結果のカード表示──
 * generic/style.css は `.image_wrap` を 230px 固定にしているが、
 * `img` 側に寸法指定が無いと width/height 属性のまま 350x230 に
 * 引き伸ばされて比率が崩れる。切り抜き（cover）にする。
 * あわせて、タイトル3行＋説明3行が `.content` の 162px 固定に収まらず
 * 枠外へ溢れていたため、カードの高さを中身に合わせる。flexの stretch で
 * 同じ行のカードの高さは揃う。 */
.hs-search-results .blog_list .item .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 高さの追従はカード表示のときだけ。一覧表示（list_view）は画像左・本文右の
   横並びで別途組んであるので、`:not(.list_view)` で必ず除外する
   （`flex-direction` のように list_view 側が指定していないプロパティは、
   詳細度が低くてもカード表示用の指定が効いてしまうため）。 */
.hs-search-results .blog_list.type1:not(.list_view) .item {
	height: auto;
}

.hs-search-results .blog_list.type1:not(.list_view) .link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hs-search-results .blog_list.type1:not(.list_view) .image_wrap {
	flex: none;
}

.hs-search-results .blog_list.type1:not(.list_view) .content {
	flex: 1 1 auto;
	height: auto;
	min-height: 162px;
}

/* ── 「この記事で分かること」の囲み（.box-list）──
 * wp_kses_post() は記事本文の <style> を落とすため、装飾はここに置く。
 * （!important は blog.css の `#article .post_content ul` 等に
 * 負けないために必要）。 */
.box-list {
	margin: 40px 0;
	padding: 0 !important;
	border: 1px solid #379b04;
}

.box-list .title {
	margin: 0;
	margin-top: 0;
	padding: 10px;
	color: #fff;
	text-align: center;
	background: linear-gradient(90deg, #379b04, #7bb55c);
}

.box-list p {
	margin-bottom: 0 !important;
}

.box-list ul {
	margin: 20px 0 !important;
	padding-right: 10px;
	padding-left: 30px;
}

/* ── お知らせ本文のグリッド（.Row / .Column--）のレスポンシブ補完 ──
 * 「農材ドットコム SNSの告知」の本文はグリッド（.Row / .Column--*）で
 * 組まれている。基本クラスは blog.css にあるが、タブレット幅の
 * レスポンシブ変種が無いのでここで補う（本文スコープ）。 */
@media screen and (max-width: 899px) and (min-width: 600px) {
	.post_content .Row {
		display: flex;
		gap: 0;
	}

	.post_content .Column--medium-3 {
		width: 30%;
	}

	.post_content .Column--medium-9 {
		width: 80%;
	}

	.post_content .Column--medium-9 p.img {
		text-align: center;
	}
}

@media screen and (max-width: 599px) {
	.post_content .Row {
		display: flex;
		flex-wrap: wrap;
	}

	.post_content .Column--small-12 {
		width: 100%;
	}

	.post_content .Column--small-12 p.img {
		text-align: center;
	}

	.post_content a.social span {
		word-break: break-all;
	}
}

/* ── 2カラムLPの左カラム見出し──
   modules.css（同期で作り直されるファイル）は PC 28px + 字間 2.8px、
   モバイル 26px + 2.6px。ヒーローと併用する構成になったため見出しを
   一回り小さくし、字間はなしに。ここ（同期対象外）で全幅一律に上書きする。
   タイトルは h2（.left-title）。ページ内のh1はヒーローが担う。 */
.form-section .form-twocolumn-content .left-column .left-title {
	font-size: 26px;
	letter-spacing: 0;
}

/* ── 1カラムLPの「本文 ⇄ フォーム」の余白──
   本文とフォームが隣り合ったときに 40px を与える。隣接セレクタなので
   本文が空のページでは余分な余白が付かない。上下どちらの並びでも効く。 */
.lp_content .post_content > * + .form-wrap,
.lp_content .post_content > .form-wrap + * {
	margin-top: 40px;
}

/* ── 資材ページの本文中の画像──
   本文中の画像は wpautop が `<p>` で包むだけなので、直前のリスト等と
   隙間ゼロでくっついてしまう。画像だけの段落に 20px の上余白を与える。
   本文中に文章と並ぶ画像には効かないよう `:only-child` に限定する。 */
.single-shizai #article .post_content p > img:only-child {
	margin-top: 20px;
}

/* ── 新着記事リスト（.top_post）のタイトルの行間──
   theme-overrides.css の `#article .post_content .top_post h3` が
   line-height: 2 を与えていて間延びして見えるため、1.4 に詰める。
   セレクタを揃えて後勝ちで上書き（このセクションにだけ効き、他のカードや
   見出しには影響しない）。 */
#article .post_content .top_post h3 {
	line-height: 1.4;
}

/* ── トップページ ──
   (1) メインビジュアルの画像を、PC幅では img の height 属性ではなく元画像の
   縦横比のまま表示する。属性（880×540）がそのまま高さになると、画面が広い
   ほど横に伸びて上下が切れてしまう。992px未満は属性の高さを使う。
   (2) 新着情報の5件目だけ下の余白を詰める。 */
@media screen and (min-width: 992px) {
	.slider .slick-slide img {
		height: auto;
	}
}

.tab_post_list .post_list .item:nth-child(5) .post_title,
.tab_post_list .post_list .item:nth-child(5) .date {
	margin-bottom: 0 !important;
}

/* ── SP幅のCTAカルーセル──
   750px以下では幅75%・中央寄せにする（画面いっぱいに広げない）。 */
@media screen and (max-width: 750px) {
	.header_carousel .top_cta_item > a {
		display: block;
	}

	.header_carousel .top_cta_item img {
		display: block;
		width: 75%;
		margin: 0 auto;
	}
}

/* ── フッター追従バナーはSP専用──
   表示のオン/オフはJS（footer-banner.js）がインラインstyleで制御するが、
   SPで表示したままPC幅へ広げるとインラインの表示状態が残る。PC幅では
   CSS側でも必ず非表示にして二重に保証する。 */
@media screen and (min-width: 750px) {
	.footer_banner .banner_row {
		display: none !important;
	}
}


/* ── サイドバーバナーはSP幅で1列 ──
   750px以下は同期CSS（responsive.css）の `display: block` に任せ、ここでは
   何も足さない。2列にしていた時期があるが、1枚あたりが小さくなりすぎるため
   1列に戻した。2列は 751px〜1100px の幅だけで使う。 */

/* ── 用語集 50音ページの音ナビ（SP）──
   glossary.css は .glossary-navigation を画面左端に固定表示するが、SPでは
   本文に重なって見出しが読めない。SPでは固定をやめて、見出しの上に
   横並びのボタン列として置く。 */
@media (max-width: 768px) {
	.glossary-navigation {
		position: static;
		transform: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
		margin: 0 0 16px;
		box-shadow: none;
	}

	.glossary-navigation a {
		margin: 0;
		padding: 8px 12px;
	}

	/* 行ボタン（わ行・か行）は文字が小さく、行の高さもその分低くなって
	   文字が上に寄って見える。行の高さを他のボタンと揃えて上下中央にする。 */
	.glossary-navigation .small {
		line-height: 1.5;
	}
}