/**
 * ひとぅブログ デザイン改善案（オプション）
 * 必要なものだけ style.css にコピーするか、functions.php でこのファイルを読み込んでください。
 */

/* ========================================
   1. 文字サイズ・読みやすさ
   ======================================== */

/* サイト全体の字間を -0.05em に（SWELLのカスタマイザー字間より優先） */
:root {
	--swl-letter_spacing: -0.05em !important;
}
html,
body {
	letter-spacing: -0.05em !important;
}
.post_content,
#main_content .post_content,
.post_content p,
.post_content li,
.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4 {
	letter-spacing: -0.05em !important;
}

/* 表も -0.05em */
.post_content table,
.post_content th,
.post_content td,
#main_content .post_content table,
#main_content .post_content th,
#main_content .post_content td {
	letter-spacing: -0.05em !important;
}

/* サイドバーの目次も -0.05em */
#sidebar .p-toc,
#sidebar .p-toc a,
#sidebar .p-toc .p-toc__item {
	letter-spacing: -0.05em !important;
}

/* SWELLが個別指定している要素も -0.05em で上書き */
.l-header__bar .c-catchphrase,
.p-postSlider__title,
.c-pageTitle__subTitle,
.swell-block-abTest .swl-tabControl .components-button,
.swell-block-review__rating .__label {
	letter-spacing: -0.05em !important;
}

/* 記事本文：PCは16px、SPは17px。行間1.7 */
.post_content,
#main_content .post_content {
	font-size: 16px !important;
	line-height: 1.7 !important;
}
@media (max-width: 959px) {
	.post_content,
	#main_content .post_content {
		font-size: 17px !important;
	}
}

/* 本文の文字色をやや柔らかく（#333）：目に優しい */
.post_content {
	color: #333 !important;
}

/* 記事タイトル（h1）：端末間で一貫したサイズ。2行時の行間を詰める */
.c-postTitle__ttl {
	font-size: 1.75rem !important;
	line-height: 1.25 !important;
}

/* 見出しのサイズ階層をはっきりさせる（字間は body 継承、2行時の行間 1.25） */
.post_content h2 { font-size: 1.5em !important; line-height: 1.25 !important; }
.post_content h3 { font-size: 1.25em !important; line-height: 1.25 !important; }
.post_content h4 { font-size: 1.1em !important; line-height: 1.25 !important; }


/* ========================================
   2. 余白・コンテンツ幅
   ======================================== */

/* スマホのみ：白い本文エリアを左右いっぱいまで広げる（薄い緑の余白を見せない） */
@media (max-width: 959px) {
	.l-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.-frame-on .l-mainContent {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* 文字が端に張り付かないよう、内側に余白を確保（読みやすさのためやや広め） */
	.l-mainContent__inner {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	/* 記事タイトル（H1）の横余白を狭める */
	.p-articleHead .l-topTitleArea__body,
	.p-articleHead .c-postTitle__ttl {
		padding-left: -10px !important;
		padding-right: -10px !important;
		box-sizing: border-box;
	}
	/* H2の緑の帯を画面左右いっぱいに。文字の開始位置は本文より少し内側に（余白やや詰める） */
	.post_content > h2 {
		margin-left: -20px !important;
		margin-right: -20px !important;
		width: calc(100% + 40px) !important;
		max-width: none !important;
		padding-left: calc(10px) !important;
		padding-right: calc(10px) !important;
		box-sizing: border-box;
	}
	/* H3・H4も文字開始位置の左右余白を少し詰める（本文より4px内側に） */
	.post_content > h3,
	.post_content > h4 {
		margin-left: -4px !important;
		margin-right: -4px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: calc(100% + 8px) !important;
		box-sizing: border-box !important;
	}
	/* 記事内の画像を画面左右いっぱいに（迫力アップ） */
	.post_content .wp-block-image,
	.post_content figure.aligncenter {
		margin-left: -20px !important;
		margin-right: -20px !important;
		width: calc(100% + 40px) !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}
	.post_content .wp-block-image img,
	.post_content figure.aligncenter img {
		width: 100% !important;
		display: block !important;
	}
	/* 本文中の目次をモバイルで画面幅いっぱいに（左右10px詰め） */
	#main_content .p-toc {
		margin-left: -10px !important;
		margin-right: -10px !important;
		width: calc(100% + 20px) !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}
	/* 表：左右を詰めて表示。横に長い場合は左右スクロールで見る（1画面に収めない） */
	.post_content .wp-block-table {
		margin-left: -10px !important;
		margin-right: -10px !important;
		width: calc(100% + 20px) !important;
		max-width: none !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		box-sizing: border-box !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	/* 表本体は内容幅を保ち、親のスクロールで横スクロール可能に */
	.post_content .wp-block-table > table {
		min-width: max-content;
	}
}

/* 記事エリアの最大幅をやや狭くして、1行の文字数をおさえる（40〜50字程度が読みやすい） */
.l-article .post_content {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
}


/* ========================================
   3. リンク・インタラクション
   ======================================== */

/* 記事内リンク：下線＋ホバーで視認性向上 */
.post_content a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.post_content a:hover {
	opacity: 0.85;
}

/* キーボード操作時のフォーカス表示（アクセシビリティ） */
.post_content a:focus-visible,
.post_content button:focus-visible {
	outline: 2px solid var(--color_main, #2d6a4f);
	outline-offset: 2px;
}


/* ========================================
   4. サイドバー・補足情報
   ======================================== */

/* サイドバーのフォントサイズを少し統一（小さすぎないように） */
/*
.l-sidebar {
	font-size: 14px;
}
.l-sidebar .widget-title {
	font-size: 1em;
}
*/


/* ========================================
   5. 広告ラベル（既存を微調整）
   ======================================== */

/* 広告ラベルの文字を少し読みやすく */
.swell-ad-label {
	font-size: 11px !important;
	letter-spacing: 0.02em;
}