/*
Theme Name: ひとりの時間 オリジナル
Theme URI: https://hitorinozikann.com/
Author: ashibaa
Description: オリジナルテーマ
Version: 0.15.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hitorinozikann-original
*/

/* 文字設定（フォント選択）で使用するWebフォントの読込。
   ※ 以前はここに @import url(fonts.googleapis.com/...) を置いていましたが、
   CSSの@importは仕様上「同期的」にしか読み込めず、ブラウザの描画を
   数秒単位でブロックしてしまう（PageSpeed Insightsの「レンダリングを
   ブロックしているリクエスト」の主因になっていた）ため廃止しました。
   同じ3書体・同じウェイト（400/700/900）は
   functions.php の hzo_preload_google_fonts() で
   非同期（preload → onloadでstylesheet化）で読み込むように変更しています。
   フォントの種類・太さは一切変えていません。読み込み方法だけの変更です。 */

/* =========================================================
   0. ベースレイアウト（news-magazine-x のクラス名を踏襲し、
      既存の追加CSSがそのまま機能するようにしています）
   ========================================================= */

* { box-sizing: border-box; }

body {
	margin: 0;
	line-height: 1.7;
	color: var(--hzo-text-color, #292929);
	background-color: #eeeef5;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; }

.newsx-container {
	max-width: var(--hzo-main-width, 1360px);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---- ヘッダー ---- */
#site-header.newsx-site-header {
	background-color: #fff;
}

.newsx-header-grid {
	display: flex;
	flex-direction: column;
	/* ヘッダーに置かれる要素は「メインエリアサイズ」の範囲の中に中央表示する。
	   幅指定は親の .newsx-container（max-width: var(--hzo-main-width)）に委ねる。 */
}

.newsx-header-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.newsx-header-cell {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	min-height: 1px;
	/* 検索バーを全幅にした時、他のセル（ロゴ等）が圧迫されて潰れないようにする */
	flex-shrink: 0;
}

/* ↑ flex-shrink:0 はPC表示では意図通りだが、スマホ幅では逆に
   「セル自体が縮まない＝中の折り返し(flex-wrap:wrap)が発動しない」
   ため、ロゴ＋タイトル＋メニュー等を合計した本来の幅（画面より広い）
   のままヘッダーが表示され、これがスマホビューでの横ズレ・
   端が切れる・ピンチアウトしても切れたままになる不具合の原因だった。
   スマホ幅では縮小・折り返しを許可して、画面幅に収まるようにする。 */
@media (max-width: 782px) {
	.newsx-header-row {
		gap: 4px;
	}
	.newsx-header-cell {
		flex-shrink: 1;
		min-width: 0;
		max-width: 100%;
	}
}

.site-logo img {
	max-width: 120px;
	height: auto;
}

.newsx-site-title-tagline .site-title {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.newsx-site-title-tagline .site-title a {
	color: inherit;
}

.newsx-header-cell .site-description {
	margin: 0;
	font-size: 12px;
	color: #67737e;
}

.newsx-header-freetext,
.newsx-header-code {
	font-size: 14px;
}

#newsx-header-menu-primary {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
}

/* メニューが画面幅に収まらない場合、折り返して「メニュー」「メニューの
   続きが途切れて見える行」のように2行になってしまう／文字が途中で
   見切れるのを防ぐ。
   スマホ幅では折り返さず1行に固定し、収まりきらない「メニュー項目」は
   （文字の途中でカットするのではなく、その項目ごと）非表示にして、
   代わりに末尾の「⋯」ボタンを押すと収まらなかった項目だけが一覧で
   表示されるようにする。実際の表示/非表示の判定は項目ごとの実測幅で
   行うため assets/js/hzo-header-menu.js が担当し、ここでは見た目だけ定義する。 */
@media (max-width: 782px) {
	.newsx-header-cell .site-navigation {
		min-width: 0;
		max-width: 100%;
		flex: 1 1 auto;
		position: relative;
	}
	#newsx-header-menu-primary {
		flex-wrap: nowrap;
		white-space: nowrap;
		/* overflow:hidden は入れない。入れると、収まらなかった項目を表示する
		   .hzo-menu-more-panel（このul内の要素に対して絶対配置）まで一緒に
		   クリップされ、「⋯」を押しても何も表示されなくなってしまうため。
		   はみ出た項目自体はJSが display:none にして隠すので、これで問題ない。 */
	}
	#newsx-header-menu-primary li {
		flex: 0 0 auto;
	}
}

/* JSにより、収まりきらなかった項目にこのクラスが付与される（見切れ表示を防ぐ）。
   画面幅を問わず常に適用（PC幅ではそもそもJSがこのクラスを付けない）。 */
#newsx-header-menu-primary li.hzo-menu-hidden {
	display: none !important;
}

/* 「⋯」もっと見るボタン。
   ★重要：display:none はメディアクエリの中に入れてはいけない。
   中に入れると「広い画面幅ではこのルール自体が無効」になり、
   ボタン要素のブラウザ既定表示（inline-block＝表示された状態）が
   そのまま出てしまう（PC幅でも「⋯」が見えてしまう不具合の原因だった）。
   常時 display:none を基本とし、JSがスマホ幅でのみ is-visible を付与
   したときだけ表示されるようにする。 */
.hzo-menu-more {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #f0f0f0;
	color: #292929;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.hzo-menu-more.is-visible {
	display: inline-flex;
}

/* もっと見るボタンを押すと開く、収まらなかった項目だけのサジェスト風パネル。
   同じ理由で、これも画面幅を問わず常に display:none を基本にする。 */
.hzo-menu-more-panel {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin: 4px 0 0;
	padding: 8px 0;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0,0,0,0.12);
	border-radius: 6px;
	min-width: 180px;
	max-width: min(80vw, 320px);
	max-height: 60vh;
	overflow-y: auto;
	z-index: 60;
	list-style: none;
	white-space: normal;
}
.hzo-menu-more-panel.is-open {
	display: block;
}
.hzo-menu-more-panel li {
	flex: initial;
}
.hzo-menu-more-panel a {
	display: block;
	padding: 10px 16px;
	white-space: nowrap;
	color: #292929;
	font-weight: 700;
}

#newsx-header-menu-primary li {
	position: relative;
}

#newsx-header-menu-primary a {
	display: inline-block;
	padding: 6px 0;
	color: #292929;
	font-weight: 700;
}

#newsx-header-menu-primary .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	padding: 8px 0;
	min-width: 200px;
	z-index: 50;
	list-style: none;
}

#newsx-header-menu-primary li:hover > .sub-menu {
	display: block;
}

#newsx-header-menu-primary .sub-menu a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
}

.search-form {
	display: flex;
	gap: 6px;
	width: 100%;
	flex-wrap: nowrap;
}

.search-form label {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
}

.search-field {
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.search-submit {
	padding: 6px 14px;
	border: none;
	border-radius: 4px;
	background: var(--hzo-accent, #2A69D5);
	color: #fff;
	cursor: pointer;
}

/* 検索バーデザイン：丸型 */
body.hzo-search-style-rounded .search-field {
	border-radius: 999px 0 0 999px;
	padding-left: 16px;
}
body.hzo-search-style-rounded .search-submit {
	border-radius: 0 999px 999px 0;
	padding-right: 18px;
}

/* 検索バーデザイン：ミニマル（下線のみ） */
body.hzo-search-style-minimal .search-field {
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
	background: transparent;
	padding-left: 2px;
}
body.hzo-search-style-minimal .search-submit {
	background: transparent;
	color: var(--hzo-accent, #2A69D5);
	border-bottom: 1px solid transparent;
}

/* ---- メインエリア（記事エリア＋サイドバーを内包する中間レイヤー） ----
   レイヤー構造：サイト全体(#page.site) > メインエリア(#content.site-content) > 記事エリア＋サイドバー
   幅・背景色はどちらもカスタマイザー「サイト構成」「サイトカラー」から変更できる。 */
#content.site-content {
	max-width: var(--hzo-main-width, 1360px) !important;
	margin: 0 auto !important;
	padding: 30px 20px !important;
	background-color: var(--hzo-main-bg, #ffffff) !important;
}

/* ---- 個別記事 ---- */
.newsx-single-post-header h1 {
	margin: 0 0 10px;
}

.newsx-post-meta {
	color: #8e9ba7;
	font-size: 13px;
	margin-bottom: 6px;
}

.newsx-post-tags {
	margin-left: 8px;
}

.newsx-post-tags a {
	color: #8e9ba7;
	text-decoration: underline;
}

.newsx-single-inner {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* 記事エリア：
   ・サイドバーがある場合 → 「記事サイズ」を上限（max-width）としつつ、
     flex:1 1 0 でメインエリアの残り幅（＝メインエリア - サイドバー - gap）に
     必ず収まるように可変にする。これにより記事＋サイドバーが常にメインエリア内に収まる。
   ・サイドバーがない場合 → 下の :only-child ルールで上限を外し、メインエリア全幅まで広がる。 */
#primary.content-area {
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--hzo-content-width, 1000px);
	background: var(--hzo-content-bg, #fff);
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 8px 1px rgba(0,0,0,0.05);
}

/* サイドバーがないページ（TOPページ等）：コンテンツ表示領域はメインエリアそのもの。
   記事エリアが「記事サイズ」の上限を超えて、メインエリア分の幅まで広がる。 */
.newsx-single-inner > #primary.content-area:only-child,
.newsx-archive-page-inner > #primary.content-area:only-child {
	max-width: 100%;
}

.newsx-post-thumbnail img {
	border-radius: 8px;
	margin-bottom: 20px;
}

.newsx-post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 40px 0;
	padding: 15px 0;
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
}

/* ---- サイドバー ---- */
.newsx-sidebar.widget-area {
	flex: 0 0 var(--hzo-sidebar-width, 280px);
	/* 「サイドバーに枠線を付ける」チェックボックス単独で機能させる。
	   （旧: サイドバーデザインの枠スタイルが「each/whole」の時だけ発動する
	   body クラスにしか枠線CSSがなく、チェックだけでは反映されなかった） */
	border: var(--hzo-sidebar-border-width, 0px) solid var(--hzo-sidebar-border-color, #e8e8e8);
	/* サイドバーの角丸は、背景色・枠スタイルの設定有無に関わらず、
	   表示されているサイドバー自体に常に適用する。 */
	border-radius: var(--hzo-sidebar-radius, 5px);
}

/* ---- 追従（スティッキー）表示（922px以上のみ） ----
   PC表示時、記事を読み進めてスクロールしても「サイドバーの下端」が画面内に
   留まり続けるように追従する。
   ポイントは align-self: flex-end。これにより、追従していない通常状態でも
   サイドバーは記事エリアの「下端」を基準にした位置に置かれる（上端基準ではない）。
   その状態で position:sticky + bottom を組み合わせることで、画面をスクロールする間
   サイドバー下部が画面下端付近に固定されたまま追従し、記事エリアの上端まで
   スクロールし切ると自動的に追従が解除される。
   height: fit-content は、サイドバーが記事エリアの高さいっぱいに伸びてしまう
   （align-items:stretch相当の挙動になる）のを防ぎ、自身のコンテンツ量ぶんの
   高さだけを持たせるために必須。 */
@media screen and (min-width: 922px) {
	.newsx-single-inner {
		overflow: visible;
	}
	.newsx-sidebar.widget-area {
		position: -webkit-sticky;
		position: sticky;
		bottom: 20px;
		align-self: flex-end;
		height: fit-content;
	}
}

@media (max-width: 921px) {
	.newsx-sidebar.widget-area {
		/* スマホ・タブレット幅ではサイドバーが記事の下に縦積みになるため、追従は無効化する */
		position: static;
		align-self: auto;
		height: auto;
	}
}

/* デフォルト：枠なし・背景なし。ウィジェット同士の間隔だけ確保 */
.newsx-sidebar .widget {
	margin-bottom: 25px;
}

.newsx-sidebar .widget-title {
	margin-top: 0;
	font-size: 16px;
}

/* サイドバーデザイン：コンテンツごとに枠で囲む */
body.hzo-sidebar-frame-each .newsx-sidebar .widget {
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 8px 1px rgba(0,0,0,0.05);
	border: var(--hzo-sidebar-border-width, 0px) solid var(--hzo-sidebar-border-color, #e8e8e8);
}

/* サイドバーデザイン：サイドバー全体を枠で囲む */
body.hzo-sidebar-frame-whole .newsx-sidebar.widget-area {
	border: var(--hzo-sidebar-border-width, 1px) solid var(--hzo-sidebar-border-color, #e8e8e8);
	border-radius: var(--hzo-sidebar-radius, 5px);
	padding: 20px;
}

/* サイドバー背景カラーの適用範囲 */
body.hzo-sidebar-bg-whole .newsx-sidebar.widget-area {
	background: var(--hzo-sidebar-bg, #fff);
	border-radius: var(--hzo-sidebar-radius, 5px);
}
body.hzo-sidebar-bg-each .newsx-sidebar .widget {
	background: var(--hzo-sidebar-bg, #fff);
	border-radius: 5px;
}

@media (max-width: 921px) {
	.newsx-single-inner {
		flex-direction: column;
	}
	.newsx-sidebar.widget-area {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ---- 固定ページ / フロントページ ---- */
.newsx-default-page-wrap {
	background: transparent;
}

/* ---- 記事一覧（アーカイブ・検索） ---- */
.newsx-archive-page-header {
	margin-bottom: 25px;
}

.newsx-archive-page-inner {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.newsx-posts-feed {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.newsx-grid-item {
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 8px 1px rgba(0,0,0,0.05);
}

.newsx-grid-content {
	padding: 15px;
}

.newsx-grid-title {
	font-size: 16px;
	margin: 8px 0;
}

.newsx-grid-title a {
	color: #292929;
}

.newsx-grid-date-time,
.newsx-grid-categories {
	font-size: 12px;
	color: #8e9ba7;
}

/* 記事一覧デザイン：フラット（左に画像・右にテキスト、画像:テキスト＝1:2。スマホでも同じ横並び） */
body.hzo-archive-design-flat .newsx-grid-item {
	display: flex;
	align-items: stretch;
	gap: 16px;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid #e8e8e8;
	padding-bottom: 15px;
}
body.hzo-archive-design-flat .newsx-grid-media {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}
body.hzo-archive-design-flat .newsx-grid-media img {
	width: 100%;
	height: 100%;
	min-height: 110px;
	object-fit: cover;
	border-radius: 4px;
}
body.hzo-archive-design-flat .newsx-grid-content {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}

/* 記事一覧デザイン：ミニマル（画像小さめ・テキスト中心） */
body.hzo-archive-design-minimal .newsx-grid-item {
	display: flex;
	gap: 12px;
	background: transparent;
	box-shadow: none;
	border-bottom: 1px solid #e8e8e8;
	border-radius: 0;
	padding-bottom: 12px;
}
body.hzo-archive-design-minimal .newsx-grid-media {
	flex: 0 0 100px;
	width: 100px;
}
body.hzo-archive-design-minimal .newsx-grid-media img {
	height: 70px;
	object-fit: cover;
}
body.hzo-archive-design-minimal .newsx-grid-content {
	flex: 1 1 0;
	padding: 0;
}
body.hzo-archive-design-minimal .newsx-grid-excerpt {
	display: none;
}

@media (max-width: 921px) {
	.newsx-archive-page-inner {
		flex-direction: column;
	}
}

/* ---- フッター ---- */
.newsx-site-footer {
	margin-top: 40px;
	background-color: var(--hzo-footer-bg, #191919);
	color: #adadad;
}

.newsx-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 30px;
	padding: 30px 20px;
}

.newsx-footer-widgets .widget-title {
	color: #ececec;
	font-size: 15px;
}

.newsx-footer-widgets a {
	color: #ccc;
}

.newsx-footer-bottom-wrap {
	background-color: #111111;
	padding: 15px 20px;
}

.newsx-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.newsx-copyright,
.newsx-footer-menu a {
	color: #888;
	font-size: 12px;
}

.newsx-footer-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%; /* 親(.newsx-footer-bottom)がflexのため、指定がないと中身の幅だけに縮んでしまい、
	                結果としてメインエリア幅(ヘッダーと同じ基準)まで広がらなかった。これを修正。 */
}

.newsx-footer-code {
	color: #888;
	font-size: 12px;
}

.newsx-footer-menu ul {
	display: flex;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* コメント欄 最小限のスタイル */
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 20px; }
#respond { margin-top: 30px; }
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	width: 100%;
	max-width: 500px;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* =========================================================
   1. 既存の追加CSS（wp-custom-css）をそのまま移植
      ※ ここから下は現行サイトの管理画面「追加CSS」の内容と同一です。
   ========================================================= */

/* =====
   1. フォント・基本デザイン設定
   （Webフォントの @import はファイル先頭に移動済み）
   ===== */

body {
    font-family: var(--hzo-body-font, 'Zen Maru Gothic', sans-serif) !important;
    font-feature-settings: "palt";
    font-size: 16px !important;
}

h1, h2, h3, h4, h5, h6, .site-title, .entry-title {
    font-family: var(--hzo-heading-font, 'Zen Maru Gothic', sans-serif) !important;
}

h1 {
    font-size: var(--hzo-h1-size, 26px) !important;
    padding-left: 15px;
}

h2 {
    font-size: var(--hzo-h2-size, 23px) !important;
    padding-left: 15px;
}

h3 {
    font-size: var(--hzo-h3-size, 20px) !important;
    padding-left: 15px;
}


.wp-block-table {
    border-collapse: separate; /* 角丸を正常に機能させるために必要 */
    border-spacing: 0;
    border: 1px solid #000000; /* 黒枠 */
    border-radius: 8px;        /* 角丸の大きさ（お好みで調整してください） */
    overflow: hidden;          /* 中のセルが角丸からはみ出るのを防ぐ */
    background-color: #a5caae21; /* ご指定の背景色 */
}

/* テーブル内のセル（境界線）の調整 */
.wp-block-table th,
.wp-block-table td {
    border-bottom: 1px solid #000000; /* 行間の区切り線（黒） */
    border-right: 1px solid #000000;  /* 列間の区切り線（黒） */
    padding: 0.5em 1em;               /* セル内の余白 */
}

/* 一番右の列の右枠線を消す（外枠との重複を防ぐ） */
.wp-block-table th:last-child,
.wp-block-table td:last-child {
    border-right: none;
}

/* 一番下の行の下枠線を消す（外枠との重複を防ぐ） */
.wp-block-table tr:last-child th,
.wp-block-table tr:last-child td {
    border-bottom: none;
}



/*TOPのへっだーカラー*/
.newsx-middle-section-wrap,
.newsx-section-wrap {
    background-color: var(--hzo-header-bg, #e0c200) !important;
}

ul.wp-block-list.has-background,
.wp-block-column {
    border-radius: 12x;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
}

/* =====
   2. サイト全体の背景・レイアウト
   ===== */
/* レイヤー構造（外側→内側）
   div#page.site        … サイト全体（幅の指定なし、背景色のみ: --hzo-site-bg）
   #content.site-content … メインエリア（幅: --hzo-main-width / 背景色: --hzo-main-bg。ヘッダー・フッターの中身の幅もこれに揃える）
   #primary + サイドバー  … 記事エリア＋サイドバー（幅はそれぞれ --hzo-content-width / --hzo-sidebar-width） */
body, div#page.site {
    background-color: var(--hzo-site-bg, #f8f4f0) !important;
}
#site-header {
    background-color: #ffffff !important;
    margin-bottom: 0 !important;
}
/* メインエリアの中に入る各テンプレートの外側ラッパーは、実体の箱を持つ親
   （#content.site-content）に幅・背景色を委ね、自身は幅100%で追従させる。
   .newsx-container由来のpadding（左右20px）は幅計算を狂わせるので打ち消す。 */
main#main.site-main,
.newsx-single-wrap,
.newsx-default-page-wrap,
.newsx-archive-page-wrap {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}

/* タイトル・パンくずなど：
   ・サイドバーがある場合 → 記事エリアと左端を揃えるため「記事サイズ」に合わせる（中央寄せしない）
   ・サイドバーがない場合 → メインエリア全幅まで広がる（記事エリアの挙動と揃える） */
.newsx-single-post-header,
.newsx-archive-page-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.newsx-single-wrap:has(.newsx-single-inner > .newsx-sidebar) .newsx-single-post-header,
.newsx-archive-page-wrap:has(.newsx-archive-page-inner > .newsx-sidebar) .newsx-archive-page-header {
    width: var(--hzo-content-width, 1000px) !important;
    max-width: 100% !important;
}

/* =====
   3. サイドバー配置とカラム制御
   ===== */
.wp-block-columns { flex-wrap: wrap; }
.wp-block-column { min-width: 195px; }

/* スマホ閲覧時（is-layout-mobile） */
body.is-layout-mobile .newsx-single-inner,
body.is-layout-mobile .site-content .row {
    display: block !important;
}
body.is-layout-mobile #primary,
body.is-layout-mobile .newsx-single-inner,
body.is-layout-mobile .site-main,
body.is-layout-mobile .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
body.is-layout-mobile div#content div.newsx-sidebar.widget-area {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin: 40px 0 0 0 !important;
    display: block !important;
    float: none !important;
    clear: both;
}
body.is-layout-mobile .entry-content ul,
body.is-layout-mobile .entry-content ol {
    list-style-position: inside;
    padding-left: 1.5em;
}

/* =====
   4. パーツ装飾・その他
   ===== */
/* p_left_margin_basic */
p {
    margin-left: 5px;
}
.newsx-row.newsx-fp-row-1 {
    margin-bottom: 15px;
}
.newsx-single-inner,
.newsx-single-content-wrap,
#primary.content-area.primary,
article[class*="post-"],
.newsx-post-content {
    box-shadow: none;
}
div.newsx-single-post-header { padding: 15px 0 !important; }
div.newsx-middle-section-wrap.newsx-section-wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* 検索バーの横幅：
   ・検索フォーム自体は常に1行で折り返さない（サイズ変更で縦の高さが変わらないようにする）
   ・「全幅」は検索バーを含むヘッダーセル自体を伸縮させ、行の残り幅を必ず埋める
     （他の要素の幅に関係なく、検索バーが余白をすべて占有する）
   ・「中」「小」はヘッダーセルを伸縮させず、検索バー自体の幅だけを固定値にする */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

body.hzo-search-size-full .newsx-header-row .newsx-header-cell:has(.newsx-header-el-search) {
	flex: 1 1 0;
}
body.hzo-search-size-full .newsx-header-el-search {
	flex: 1 1 0;
	width: 100%;
}
body.hzo-search-size-full .newsx-header-search {
	width: 100% !important;
}

body.hzo-search-size-medium .newsx-header-search { width: 320px !important; max-width: 100% !important; }
body.hzo-search-size-small .newsx-header-search { width: 200px !important; max-width: 100% !important; }


/* YouTube動画装飾 */
.wp-block-embed.is-provider-youtube:hover::after { opacity: 1; }
.wp-block-embed iframe { border-radius: 12px; }


/*ボタン*/

/* WordPress標準ボタンブロックのカスタマイズ */
.wp-block-button__link {
    display: inline-block;
    background-color: var(--hzo-btn-bg, #A7C8AD);
    /* 縦横の余白はカスタマイザーの「ボタン設定」で変更可能 */
    padding: var(--hzo-btn-pad-v, 12px) var(--hzo-btn-pad-h, 36px) !important;
    color: var(--hzo-btn-text, #ffffff) !important;
    text-align: center;
    text-decoration: none;
    border-radius: var(--hzo-btn-radius, 15px); /* 指定の角丸 */

    /* タイポグラフィ */
    font-family: var(--hzo-body-font, 'Zen Maru Gothic', sans-serif);
    font-weight: 700;
    font-size: 15px; /* わずかに小さくして余白を強調 */
    line-height: 1.2; /* 行間を詰め、中央配置を安定させる */


    /* アニメーション */
    transition: all 0.2s ease-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/*リスト*/

/* ベース */
.wp-block-list, .entry-content ul {
    padding-left: 60px;
    list-style: none;
}

/* 共通li */
.wp-block-list li, .entry-content ul li {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e0e0e0;
}

/* ===== 第1階層 ===== */
.wp-block-list > li::before, .entry-content > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 6px;
    height: 20px;
    background: #A5CAAE;
    border-radius: 2px;
}

/* ===== 第2階層 ===== */
.wp-block-list li ul, .entry-content ul ul {
    padding: 8px 0 0 5px;
}

.wp-block-list li ul li, .entry-content ul ul li {
    border-bottom: none;
    margin-bottom: 5px;
    padding-bottom: 0;
}

.wp-block-list li ul li::before, .entry-content ul ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 3px;
    height: 16px;
    background: #c3ddd0;
    border-radius: 1px;
}

/* ===== 第3階層：文字の下に下線を配置 ===== */
.wp-block-list li ul ul, .entry-content ul ul ul {
    padding: 6px 0 0 10px; /* 全体の位置調整 */
}

.wp-block-list li ul ul li::before {
    content: "";
    /* 左端に固定される absolute をやめ、文字の下に配置 */
    position: absolute;
    bottom: 0;
    left: 0;

    /* 下線のデザイン：文字幅いっぱいに広がる */
    width: 100%;
    height: 2px;
    background: #F7F7F7;
    border-radius: 1px;

    /* 他の階層のプロパティ（topなど）をリセット */
    top: auto;
}


/*コメント*/
/* メディアとテキストブロックの角丸設定（重複していた2つの .komesen を統合） */
.komesen {
    border-radius: 12px;
    overflow: hidden; /* 角のハミ出しをカット */
    margin: 10px; /* 少し余白を設けて角丸を見えやすくする場合 */
}


/*senndennカード*/
/* ボタンブロック自体のコンテナを全幅にする */
.senndenn {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #DEDEDE; /* 黒枠 */
    border-radius: 20px;       /* 角丸 */
    overflow: hidden;
    margin: 2em 0;
    background-color: #ffffff;
    align-items: stretch;
}
.senndenn .wp-block-buttons {
    width: 100%;
    margin-top: auto; /* コンテンツ量に関わらず下部に固定 */
}

/* ボタン要素を端から端まで広げる */
.senndenn .wp-block-button {
    width: 100% !important;
}

.senndenn .wp-block-button__link {
    display: block !important;
    width: 100% !important; /* リンク要素を全幅化 */
    text-align: center;
    background-color: #a67363;
    color: #ffffff !important;
    text-decoration: none;
    padding: 15px 0; /* 左右パディングは0にして幅を確保 */
    border-radius: 50px;
    font-weight: bold;
    transition: opacity 0.3s;
    box-sizing: border-box; /* パディングを含めた幅計算 */
}

.senndenn .wp-block-button__link:hover {
    opacity: 0.8;
}


/* コードブロック本体 */
.wp-block-code {
    position: relative;
    background: #E8E8E8;
    /* 上部の余白を広げて、案内表示との距離を確保 */
    padding: 32px 16px 16px 16px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s ease;
}

/* コード文字 */
.wp-block-code code {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    font-family: monospace;
}

/* コピー案内 */
.wp-block-code::after {
    content: "クリックでコピー";
    position: absolute;
    /* 位置を上端に固定 */
    top: 8px;
    right: 12px;
    font-size: 12px;
    color: #666;
    pointer-events: none;
    line-height: 1;
}

/* コピー成功 */
.wp-block-code.copied::after {
    content: "コピーしました";
    color: #008000;
}


/* teteble */
.teteble {
    background: #FAFAFA;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
    padding: 10px;
}


/* サイト全体のリンクカラーの設定
   ※元コードは同一ルール内に text-decoration: underline; と text-decoration: none; が
     両方書かれており、後勝ちで underline の指定が常に無効化される二重ロジックでした。
     下線は不要という意図とみなし none のみに統一しています。 */
a {
    color: var(--hzo-link-color, #2A69D5);
    text-decoration: none;
}

/* マウスホバー時の設定 */
a:hover {
    color: var(--hzo-link-color, #2A69D5);
    opacity: 0.8;
    text-decoration: none; /* ホバー時に下線を消す場合 */
}


/* 親コンテナのリセット */
.wp-block-embed.is-type-wp-embed {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* iframeの装飾（枠線はここだけで管理） */
.wp-block-embed.is-type-wp-embed iframe {
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
}
/* ※元コードにあった余分な閉じカッコ「}」（構文エラーの原因）は削除済み */


/*NEW記事デザイン*/

/* リスト全体の余白と背景 */
.wp-block-latest-posts {
    background-color: #FBF7F1;
    padding: 5px !important;
    border-radius: 10px !important;
    list-style: none;
    margin: 0 !important;
}

/* 記事1件のGrid設定：画像120px + テキスト */
.wp-block-latest-posts li {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    column-gap: 10px;
    align-items: start;
    padding: 5px 0 !important;
    border-bottom: 1px solid #e0dcd7;
    margin: 0 !important;
}

/* 画像：固定 */
.wp-block-latest-posts__featured-image {
    grid-column: 1;
    grid-row: 1 / 3; /* 行を占有させて右側のテキストと揃える */
    margin: 0 !important;
}

.wp-block-latest-posts__featured-image img {
    width: 120px !important;
    height: 90px !important;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* 右側のテキスト要素（タイトルと日付） */
.wp-block-latest-posts li > a:not(.wp-block-latest-posts__featured-image),
.wp-block-latest-posts__post-date {
    grid-column: 2; /* 常に右側の列に配置 */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* タイトル */
.wp-block-latest-posts li > a:not(.wp-block-latest-posts__featured-image) {
    font-size: 0.95rem;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 日付：タイトルの直下に密着させる */
.wp-block-latest-posts__post-date {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0px !important; /* タイトルとの隙間を最小限に */
}

/* メニューのフォント設定（再定義） */
#newsx-header-menu-primary a {
    font-family: var(--hzo-heading-font, 'Zen Maru Gothic', sans-serif) !important;
}



/*カラムの間隔*/
.wp-block-columns.is-layout-flex {
    gap: 1px !important;
}

/* =========================================================
   2. リストデザイン バリエーション（カスタマイザー「リストデザイン」用）
   bar = 上のカラーバー装飾（標準）／ default = 標準の黒丸
   ========================================================= */
body.hzo-list-default .wp-block-list,
body.hzo-list-default .entry-content ul {
    list-style: disc;
    padding-left: 24px;
}
body.hzo-list-default .wp-block-list li,
body.hzo-list-default .entry-content ul li {
    display: list-item;
    padding-left: 0;
    border-bottom: none;
}
body.hzo-list-default .wp-block-list li::before,
body.hzo-list-default .entry-content ul li::before {
    content: none;
}

/* =========================================================
   3. パンくずリスト
   ========================================================= */
.newsx-breadcrumbs {
    font-size: var(--hzo-breadcrumb-size, 12px);
    color: var(--hzo-breadcrumb-color, #8e9ba7);
    margin-bottom: 15px;
}

.newsx-breadcrumbs a {
    color: var(--hzo-breadcrumb-color, #8e9ba7);
}

/* =========================================================
   4. スライダー（TOPページ上部／ヘッダーとメインエリアの間）
   ・表示位置：#page の直下（オレンジ色のサイト背景エリア）
   ・幅：メインエリアと同じ --hzo-main-width。左右は端から端まで。
   ・5種類のデザインは body ではなく .hzo-slider-wrap に付く
     .hzo-slider-designN クラスで切り替える。
   ========================================================= */
.hzo-slider-wrap {
	max-width: var(--hzo-main-width, 1360px);
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}

.hzo-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.hzo-slider-track {
	display: flex;
	width: 100%;
	transition: transform 0.5s ease;
}

.hzo-slide {
	flex: 0 0 100%;
	max-width: 100%;
	position: relative;
}

.hzo-slide-inner {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.hzo-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: #d9d9d9;
}

.hzo-slide-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.hzo-slide-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--hzo-accent, #2A69D5);
	color: #fff;
	letter-spacing: 0.05em;
}

.hzo-slide-catch {
	font-size: 14px;
	font-weight: 600;
	opacity: 0.85;
}

.hzo-slide-maintext {
	font-size: 28px;
	font-weight: 900;
	font-family: var(--hzo-heading-font);
	line-height: 1.4;
}

.hzo-slide-btn {
	display: inline-block;
	margin-top: 6px;
	padding: var(--hzo-btn-pad-v, 12px) var(--hzo-btn-pad-h, 36px);
	border-radius: var(--hzo-btn-radius, 15px);
	background: var(--hzo-btn-bg, #A7C8AD);
	color: var(--hzo-btn-text, #fff);
	font-size: 14px;
	font-weight: 700;
}

/* --- 矢印ボタン・ドット --- */
.hzo-slider-prev,
.hzo-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.85);
	color: #292929;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.hzo-slider-prev { left: 16px; }
.hzo-slider-next { right: 16px; }
.hzo-slider-prev:hover,
.hzo-slider-next:hover { background: #fff; }

.hzo-slider-dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 5;
}
.hzo-slider-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.6);
	padding: 0;
	cursor: pointer;
}
.hzo-slider-dot.is-active {
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

/* ---- デザイン1：フルワイド・オーバーレイ型 ---- */
.hzo-slider-design1 .hzo-slide-inner { height: var(--hzo-slider-height, 420px); }
.hzo-slider-design1 .hzo-slide-image { position: absolute; inset: 0; }
.hzo-slider-design1 .hzo-slide-content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 40px 60px;
	background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
	color: #fff;
}
.hzo-slider-design1 .hzo-slide-maintext { color: #fff; }
.hzo-slider-design1 .hzo-slide-catch { color: #f2f2f2; }

/* ---- デザイン2：左右分割型（画像左・テキスト右） ---- */
.hzo-slider-design2 .hzo-slide-inner {
	display: flex;
	height: var(--hzo-slider-height, 360px);
	background: #fff;
}
.hzo-slider-design2 .hzo-slide-image { flex: 0 0 55%; height: 100%; }
.hzo-slider-design2 .hzo-slide-content {
	flex: 1;
	justify-content: center;
	padding: 40px;
	background: #fff;
}
.hzo-slider-design2 .hzo-slide-maintext { color: #292929; }

/* ---- デザイン3：ミニマル下部キャプション型 ---- */
.hzo-slider-design3 .hzo-slide-inner { height: var(--hzo-slider-height, 380px); }
.hzo-slider-design3 .hzo-slide-image { position: absolute; inset: 0; }
.hzo-slider-design3 .hzo-slide-content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 18px 24px;
	background: rgba(255,255,255,0.92);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.hzo-slider-design3 .hzo-slide-maintext { font-size: 18px; margin: 0; }
.hzo-slider-design3 .hzo-slide-catch { font-size: 12px; }
.hzo-slider-design3 .hzo-slide-btn { margin-top: 0; padding: 8px 20px; }

/* ---- デザイン4：円形バッジ強調型 ---- */
.hzo-slider-design4 .hzo-slide-inner { height: var(--hzo-slider-height, 400px); }
.hzo-slider-design4 .hzo-slide-image { position: absolute; inset: 0; }
.hzo-slider-design4 .hzo-slide-content {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px;
	background: rgba(0,0,0,0.35);
	color: #fff;
}
.hzo-slider-design4 .hzo-slide-badge {
	font-size: 16px;
	padding: 14px 22px;
	background: var(--hzo-accent, #2A69D5);
	box-shadow: 0 4px 10px rgba(0,0,0,0.25);
	margin-bottom: 4px;
}
.hzo-slider-design4 .hzo-slide-maintext { color: #fff; font-size: 32px; }
.hzo-slider-design4 .hzo-slide-catch { color: #f2f2f2; }

/* ---- デザイン5：カード型（角丸・影付き） ---- */
.hzo-slider-design5 { padding: 20px 0; }
.hzo-slider-design5 .hzo-slide { padding: 0 10px; box-sizing: border-box; }
.hzo-slider-design5 .hzo-slide-inner {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	background: #fff;
	height: var(--hzo-slider-height, 380px);
	position: relative;
}
.hzo-slider-design5 .hzo-slide-image { position: absolute; inset: 0; }
.hzo-slider-design5 .hzo-slide-content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 26px;
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 75%);
	color: #fff;
}
.hzo-slider-design5 .hzo-slide-badge {
	position: absolute;
	top: 18px;
	right: 18px;
}
.hzo-slider-design5 .hzo-slide-maintext { color: #fff; }
.hzo-slider-design5 .hzo-slide-catch { color: #f2f2f2; }

@media (max-width: 782px) {
	.hzo-slider-design1 .hzo-slide-inner,
	.hzo-slider-design3 .hzo-slide-inner,
	.hzo-slider-design4 .hzo-slide-inner,
	.hzo-slider-design5 .hzo-slide-inner { height: min(var(--hzo-slider-height, 420px), 320px); }
	.hzo-slider-design2 .hzo-slide-inner { flex-direction: column; height: auto; }
	.hzo-slider-design2 .hzo-slide-image { flex: 0 0 200px; width: 100%; }
	.hzo-slide-maintext { font-size: 20px; }
	.hzo-slider-design1 .hzo-slide-content,
	.hzo-slider-design5 .hzo-slide-content { padding: 20px; }
	.hzo-slider-prev, .hzo-slider-next { width: 32px; height: 32px; font-size: 13px; }
}