@charset "UTF-8";
/* ==========================================================================
   まるまる経理 - 会計コラム単一投稿ページ専用 CSS
   親テーマ SWELL の single.php に対し、body.mm-single-column スコープで
   Figma 準拠デザインを上書きする。SEO/構造化データ/SWELL内部機能には影響なし。
   依存: assets/css/common/styles.css (CSS変数), components.css (ユーティリティ)
   ========================================================================== */

/* ===========================================================
   1. レイアウト幅・余白
   親テーマ SWELL の .l-mainContent.l-article > .l-mainContent__inner を
   --cw-std (1000px) に揃え、サイト全体のコンテンツ幅と整合させる。
   =========================================================== */

/* パンくず: SWELL は pos_breadcrumb='top' で #content の前に出力する。
   ヘッダー (position:fixed) の背後に隠れないようヘッダー高さ分の上余白を確保。 */
body.mm-single-column .p-breadcrumb {
	padding-top: var(--header-h);
	background: var(--color-bg);
}

/* #content にも padding-top: var(--header-h) が当たっているが、
   パンくずが #content の前に出ている場合は二重に空きすぎる。
   column 投稿では本文側のヘッダー余白は不要にする。 */
body.mm-single-column #content {
	padding-top: 0;
}

body.mm-single-column .l-mainContent.l-article {
	background: var(--color-bg);
	padding-block: 32px 64px;
}

body.mm-single-column .l-mainContent__inner {
	max-width: var(--cw-std);
	margin-inline: auto;
	padding-inline: 24px;
}

/* SWELL のサイドバー有無に関わらず本文幅を1000pxに固定 */
body.mm-single-column .l-content.l-content--has-sidebar,
body.mm-single-column .l-content {
	display: block;
}

/* SWELL の .l-content--has-sidebar グリッドが解除された後も、
   .l-mainContent には flex-basis / max-width が残るケースがあるため
   コラムページでは明示的にフル幅化する。 */
body.mm-single-column .l-mainContent.l-article {
	width: 100%;
	max-width: 100%;
	flex: none;
}

/* ===========================================================
   2-0. 監修者ブロック（タイトル直上）
   single-column.php で post_head の直前に挿入。
   marugoto.co.jp の構成に倣い、タイトル上に著者バッジ風で表示する。
   =========================================================== */
body.mm-single-column .mm-column-supervisor {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}
body.mm-single-column .mm-column-supervisor__avatar {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #d9d9d9;
	overflow: hidden;
}
body.mm-single-column .mm-column-supervisor__avatar--has-image {
	background: transparent;
}
body.mm-single-column .mm-column-supervisor__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.mm-single-column .mm-column-supervisor__text {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.6;
}

/* ===========================================================
   2. 記事ヘッダー (parts/single/post_head)
   h1 (.c-postTitle__ttl) はSWELL既定出力をそのまま使い、SEO階層を維持。
   コンテンツヘッダーが .l-mainContent__inner の外に出る設定でも保険を効かせる。
   =========================================================== */
body.mm-single-column .c-postTitle,
body.mm-single-column .p-articleHead {
	margin-bottom: 32px;
	position: relative;
}

body.mm-single-column .c-postTitle__ttl {
	font-family: var(--font-emphasis);
	font-size: clamp(1.75rem, 2.4vw + 0.5rem, var(--fs-4xl));
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}

/* タイトル横の縦書き日付 (.c-postTitle__date) は SWELL 標準の装飾。
   メタ情報側 (.p-articleMetas__times) と日付が重複し、薄色で視認性も低いため非表示にする。
   <time> 要素は HTML 内に残るためクローラからは引き続き認識可能。 */
body.mm-single-column .c-postTitle__date {
	display: none;
}

/* 記事メタ (日付・カテゴリ) */
body.mm-single-column .p-articleMetas.-top,
body.mm-single-column .p-articleMetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	font-family: var(--font-numeric);
	font-size: var(--fs-sm);
	color: var(--color-text);
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

body.mm-single-column .c-postTimes,
body.mm-single-column .c-postTimes time,
body.mm-single-column .p-articleMetas__times,
body.mm-single-column .p-articleMetas__times time {
	font-family: var(--font-numeric);
	color: var(--color-text);
	font-size: var(--fs-sm);
	opacity: 1;
}

/* SWELL の .u-thin (薄色ユーティリティ) を本文ヘッダー内では上書きして
   視認性のある通常色にする */
body.mm-single-column .p-articleHead .u-thin,
body.mm-single-column .p-articleMetas .u-thin {
	color: var(--color-text);
	opacity: 1;
}

body.mm-single-column .c-termList,
body.mm-single-column .c-postMeta__cat {
	display: inline-flex;
	gap: 8px;
}

body.mm-single-column .c-termList a,
body.mm-single-column .c-postMeta__cat a {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background .2s ease;
}

body.mm-single-column .c-termList a:hover,
body.mm-single-column .c-postMeta__cat a:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

/* ===========================================================
   3. アイキャッチ
   =========================================================== */
body.mm-single-column .p-postThumb,
body.mm-single-column .c-postThumb {
	margin: 32px 0 48px;
}

body.mm-single-column .p-postThumb img,
body.mm-single-column .c-postThumb img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	display: block;
}

/* ===========================================================
   4. 本文 (.post_content)
   見出しは h2 から始める運用。h1 は記事タイトルに集約しSEO階層を維持。
   =========================================================== */
body.mm-single-column .post_content {
	font-family: var(--font-base);
	font-size: var(--fs-md);
	line-height: 1.85;
	color: var(--color-text);
}

/* 段落 */
body.mm-single-column .post_content p {
	margin: 0 0 1.5em;
	line-height: 1.85;
}

/* 見出し階層
   親テーマ SWELL のカスタマイザーで設定された h2/h3 装飾（塗りつぶし帯・縦線等）を
   完全リセットしてから子テーマのスタイルを当てる。
*/
body.mm-single-column .post_content h2,
body.mm-single-column .post_content h3,
body.mm-single-column .post_content h4,
body.mm-single-column .post_content h5,
body.mm-single-column .post_content h6 {
	background: transparent;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	display: block;
	width: auto;
}

body.mm-single-column .post_content h2::before,
body.mm-single-column .post_content h2::after,
body.mm-single-column .post_content h3::before,
body.mm-single-column .post_content h3::after,
body.mm-single-column .post_content h4::before,
body.mm-single-column .post_content h4::after {
	content: none;
}

body.mm-single-column .post_content h2 {
	font-family: var(--font-emphasis);
	font-size: var(--fs-2xl);
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin: 56px 0 20px;
	padding: 0 0 14px;
	border-bottom: 4px solid var(--color-primary);
}

body.mm-single-column .post_content h3 {
	font-family: var(--font-emphasis);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.5;
	margin: 40px 0 16px;
	padding: 2px 0 2px 15px;
	border-left: 10px solid var(--color-primary);
}

body.mm-single-column .post_content h4 {
	font-family: var(--font-base);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-primary-dark);
	line-height: 1.5;
	margin: 32px 0 12px;
	padding: 0;
}

body.mm-single-column .post_content h5,
body.mm-single-column .post_content h6 {
	font-family: var(--font-base);
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.5;
	margin: 24px 0 12px;
	padding: 0;
}

/* 強調 */
body.mm-single-column .post_content strong,
body.mm-single-column .post_content b {
	font-weight: 700;
	color: var(--color-primary-dark);
}

body.mm-single-column .post_content em {
	font-style: normal;
	background: linear-gradient(transparent 65%, rgba(255, 198, 48, .55) 65%);
	padding: 0 .08em;
}

/* リンク */
body.mm-single-column .post_content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color .2s ease;
}

body.mm-single-column .post_content a:hover {
	color: var(--color-primary-darker);
	text-decoration-thickness: 2px;
}

/* リスト */
body.mm-single-column .post_content ul,
body.mm-single-column .post_content ol {
	margin: 0 0 1.5em;
	padding-left: 1.75em;
}

body.mm-single-column .post_content ul li,
body.mm-single-column .post_content ol li {
	margin-bottom: 0.5em;
	line-height: 1.85;
	list-style: revert;
}

body.mm-single-column .post_content ul li::marker {
	color: var(--color-primary);
}

body.mm-single-column .post_content ol li::marker {
	color: var(--color-primary);
	font-family: var(--font-numeric);
	font-weight: 700;
}

/* 引用 */
body.mm-single-column .post_content blockquote,
body.mm-single-column .post_content .wp-block-quote {
	background: var(--color-bg-mint-lightest);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	margin: 24px 0;
	color: var(--color-text);
	font-style: normal;
}

/* 親テーマ SWELL が blockquote::before/::after に挿入する装飾（縦線2本のクオートマーク）を打ち消す */
body.mm-single-column .post_content blockquote::before,
body.mm-single-column .post_content blockquote::after,
body.mm-single-column .post_content .wp-block-quote::before,
body.mm-single-column .post_content .wp-block-quote::after {
	content: none;
}

body.mm-single-column .post_content blockquote p:last-child {
	margin-bottom: 0;
}

body.mm-single-column .post_content blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	font-style: normal;
}

/* インラインコード */
body.mm-single-column .post_content code:not(pre code) {
	background: var(--color-bg-light);
	color: var(--color-primary-dark);
	padding: 2px 8px;
	border-radius: var(--radius-xs);
	font-size: 0.92em;
	font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* コードブロック */
body.mm-single-column .post_content pre,
body.mm-single-column .post_content .wp-block-code {
	background: var(--color-text);
	color: #fff;
	padding: 20px;
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: 24px 0;
	font-size: 0.9em;
	line-height: 1.6;
}

body.mm-single-column .post_content pre code,
body.mm-single-column .post_content .wp-block-code code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* テーブル */
body.mm-single-column .post_content table,
body.mm-single-column .post_content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: var(--fs-md);
}

body.mm-single-column .post_content .wp-block-table {
	margin: 24px 0;
	overflow-x: auto;
}

body.mm-single-column .post_content th {
	background: var(--color-bg-mint-lightest);
	color: var(--color-text);
	font-weight: 700;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	text-align: left;
}

body.mm-single-column .post_content td {
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
}

/* 画像・figure */
body.mm-single-column .post_content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	display: block;
}

body.mm-single-column .post_content figure {
	margin: 24px 0;
}

body.mm-single-column .post_content figcaption {
	margin-top: 8px;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	text-align: center;
	line-height: 1.6;
}

/* 区切り線 */
body.mm-single-column .post_content hr,
body.mm-single-column .post_content .wp-block-separator {
	border: 0;
	border-top: 1px dashed var(--color-border);
	margin: 48px 0;
	height: 0;
}

/* ===========================================================
   5. 記事下要素 (改ページ・シェア・関連・コメント)
   構造はSWELL既定を維持し、色とフォントだけブランドに馴染ませる。
   =========================================================== */

/* 改ページナビ */
body.mm-single-column .c-pagination.-post a,
body.mm-single-column .c-pagination.-post span {
	border-radius: var(--radius-md);
	color: var(--color-primary);
	border-color: var(--color-border-soft);
}

body.mm-single-column .c-pagination.-post .current,
body.mm-single-column .c-pagination.-post a:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* シェアボタン (上下) */
body.mm-single-column .p-shareBtns {
	margin: 32px 0;
}

body.mm-single-column .p-shareBtns__btn {
	border-radius: var(--radius-pill);
}

/* 記事下のラッパー */
body.mm-single-column #after_article.l-articleBottom {
	margin-top: 64px;
}

/* 著者 / 関連記事 / 次の記事 */
body.mm-single-column .c-postAuthor,
body.mm-single-column .p-relatedPosts,
body.mm-single-column .p-snsCta {
	font-family: var(--font-base);
	color: var(--color-text);
}

body.mm-single-column .p-relatedPosts__ttl,
body.mm-single-column .c-postAuthor__ttl,
body.mm-single-column .p-snsCta__ttl {
	font-family: var(--font-emphasis);
	color: var(--color-text);
	font-weight: 700;
}

/* 関連記事カード - 角丸とフォントだけ揃える */
body.mm-single-column .p-relatedPosts .p-postList__link,
body.mm-single-column .p-relatedPosts .c-postList__item {
	border-radius: var(--radius-lg);
	transition: transform .25s ease, box-shadow .25s ease;
}

body.mm-single-column .p-relatedPosts .p-postList__link:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

/* コメント欄 */
body.mm-single-column .commentlist,
body.mm-single-column #comments {
	font-family: var(--font-base);
	color: var(--color-text);
}

body.mm-single-column #comments .commentTtl,
body.mm-single-column #comments h2,
body.mm-single-column #comments h3 {
	font-family: var(--font-emphasis);
	color: var(--color-text);
}

/* ===========================================================
   6. レスポンシブ
   =========================================================== */
@media (max-width: 768px) {
	body.mm-single-column .l-mainContent.l-article {
		padding-block: 40px;
	}

	body.mm-single-column .l-mainContent__inner {
		padding-inline: 16px;
	}

	body.mm-single-column .c-postTitle__ttl {
		font-size: 1.5rem;
		line-height: 1.45;
	}

	body.mm-single-column .post_content {
		font-size: var(--fs-base);
	}

	body.mm-single-column .post_content h2 {
		font-size: 1.25rem;
		margin: 40px 0 16px;
	}

	body.mm-single-column .post_content h3 {
		font-size: 1.125rem;
		margin: 28px 0 12px;
	}

	body.mm-single-column .post_content h4 {
		font-size: 1rem;
		margin: 24px 0 10px;
	}

	body.mm-single-column .post_content blockquote,
	body.mm-single-column .post_content .wp-block-quote {
		padding: 16px 18px;
	}

	body.mm-single-column .post_content th,
	body.mm-single-column .post_content td {
		padding: 10px 12px;
		font-size: var(--fs-base);
	}

	body.mm-single-column .post_content hr,
	body.mm-single-column .post_content .wp-block-separator {
		margin: 32px 0;
	}

	body.mm-single-column #after_article.l-articleBottom {
		margin-top: 48px;
	}
}

@media (max-width: 480px) {
	body.mm-single-column .l-mainContent.l-article {
		padding-block: 32px;
	}

	body.mm-single-column .l-mainContent__inner {
		padding-inline: 14px;
	}

	body.mm-single-column .c-postTitle__ttl {
		font-size: 1.4rem;
	}
}

/* ===========================================================
   7. コラム単一投稿 サイドバー (無料相談フォーム)
   本文の右側に CF7 フォームを sticky 表示し、コラム読者の
   問い合わせ動線を強化する。
   - コンテンツ幅は body.mm-single-column のみ 1200px に拡張
   - .l-content の display:block (41-44行) には干渉せず、
     新規 .mm-column-layout レイヤーで grid 化する
   - CF7 フォーム ID は marumaru_get_cf7_id() で一元管理
     (functions.php 319行)
   =========================================================== */

/* コラム単独のコンテンツ幅 (他ページの --cw-std には影響させない) */
body.mm-single-column {
	--cw-column: 1200px;
}

body.mm-single-column .l-mainContent__inner {
	max-width: var(--cw-column);
}

/* 2カラムグリッド: 本文(1fr) + サイドバー(320px) + gap(40px)
   align-items は stretch (デフォルト) のままにすることで、.mm-column-aside の
   高さを本文と同じに引き伸ばし、その中で .mm-column-aside__inner が
   sticky として機能する空間を確保する。 */
body.mm-single-column .mm-column-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
}

body.mm-single-column .mm-column-main {
	min-width: 0; /* grid アイテムが本文の長文で溢れないように */
}

/* .mm-column-main は SWELL 目次 JS の `.l-mainContent__inner > .post_content`
   セレクタを満たすため l-mainContent__inner クラスを併用するが、
   外側 article 要素のための max-width / padding-inline は不要なので
   ここで打ち消す。grid item の幅自体は grid-template-columns が決定する。 */
body.mm-single-column .mm-column-main.l-mainContent__inner {
	max-width: none;
	padding-inline: 0;
}

/* 右カラム sticky 追従。ヘッダー高さ (var(--header-h)) はモバイルで自動的に
   64px に切り替わる (common/styles.css) ため、計算式のまま機能する。 */
body.mm-single-column .mm-column-aside__inner {
	position: sticky;
	top: calc(var(--header-h) + 24px);
}

/* フォームカード
   PC ノートPC幅 (1366×768) のファーストビュー (sticky top 118 + 高さ ≤ 626) に
   送信ボタンまで収まるよう、padding/gap を意図的に圧縮している。 */
body.mm-single-column .mm-aside-form {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.mm-single-column .mm-aside-form__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.mm-single-column .mm-aside-form__eyebrow {
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
}

body.mm-single-column .mm-aside-form__ttl {
	font-family: var(--font-emphasis);
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--color-text);
	text-align: center;
	margin: 2px 0 8px;
}

body.mm-single-column .mm-aside-form__lead {
	font-size: var(--fs-sm);
	color: var(--color-text);
	line-height: 1.6;
	margin: 0;
}

/* CF7 が hidden input を抱える <fieldset class="hidden-fields-container"> は
   デフォルトで 2px groove border を持ち、サイドバー幅では空欄に見えてしまう。
   display:contents で fieldset 自体を視覚から取り除き、中の hidden input は
   通常通りフォーム送信される。 */
body.mm-single-column .mm-aside-form__body .hidden-fields-container {
	display: contents;
}

/* CF7 wpcf7-form 直下の余白圧縮 (CF7 の <form> は子要素を縦並びにしている) */
body.mm-single-column .mm-aside-form__body .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* CF7 のフィールドをサイドバー幅に合わせてコンパクト化。
   フロント側 .contact (front-page.css 2945-3077行) には干渉せず、
   .mm-aside-form__body スコープでのみ縮小する。 */
body.mm-single-column .mm-aside-form__body .contact__field {
	gap: 4px;
}

body.mm-single-column .mm-aside-form__body .contact__label-row {
	gap: 6px;
}

body.mm-single-column .mm-aside-form__body .contact__label,
body.mm-single-column .mm-aside-form__body label {
	font-size: 13px;
	line-height: 1.4;
}

body.mm-single-column .mm-aside-form__body .contact__badge {
	font-size: 10px;
	padding: 1px 6px;
}

body.mm-single-column .mm-aside-form__body input[type="text"],
body.mm-single-column .mm-aside-form__body input[type="email"],
body.mm-single-column .mm-aside-form__body input[type="tel"],
body.mm-single-column .mm-aside-form__body textarea {
	padding: 6px 10px;
	font-size: 13px;
}

/* textarea は CF7 で rows="10" が指定され実高さ 230px になる。
   サイドバー幅でファーストビュー内に送信ボタンを収めるため、
   CSS の height で rows を上書きする。手動リサイズは有効のまま。 */
body.mm-single-column .mm-aside-form__body textarea {
	height: 60px;
	min-height: 60px;
	resize: vertical;
}

body.mm-single-column .mm-aside-form__body .contact__submit {
	width: 100%;
	max-width: 100%;
	height: 52px;
}

body.mm-single-column .mm-aside-form__body .contact__submit-label {
	font-size: 14px;
}

/* フォールバックリンク (CF7 取得失敗時) */
body.mm-single-column .mm-aside-form__fallback {
	display: block;
	text-align: center;
	background: var(--color-primary);
	color: #fff;
	padding: 14px 20px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease;
}

body.mm-single-column .mm-aside-form__fallback:hover {
	background: var(--color-primary-dark);
}

/* レスポンシブ: 960px以下で縦積み・sticky解除
   1200px - padding(48px) - sidebar(320px) - gap(40px) で本文≈792px、
   これ以下では2カラムが破綻し始めるためブレークポイントを 960px に設定。 */
@media (max-width: 960px) {
	body.mm-single-column .mm-column-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	body.mm-single-column .mm-column-aside__inner {
		position: static;
		max-height: none;
		overflow: visible;
	}

	body.mm-single-column .mm-aside-form {
		padding: 20px 18px;
	}
}