@charset "UTF-8";
/* ==========================================================================
   フクダ不動産 スタッフブログ  ブログ固有スタイル
   本体サイトの reset/base/common/tab/smp.css の後に読み込まれる。
   ブレークポイントは本体サイトに合わせて 960px / 560px。
   ========================================================================== */

:root {
	--fk-teal:      #419499;
	--fk-teal-dark: #337579;
	--fk-orange:    #e75500;
	--fk-ink:       #231815;
	--fk-text:      #333;
	--fk-muted:     #666;
	--fk-line:      #ccc;
	--fk-line-soft: #e5e5e5;
	--fk-bg:        #f2f2f2;
	--fk-white:     #fff;
	--fk-serif:     'Noto Serif JP', serif;
	--fk-sans:      'Noto Sans JP', sans-serif;
	--fk-en:        'Barlow', sans-serif;
}

/* --------------------------------------------------------------------------
   レイアウト
   -------------------------------------------------------------------------- */
.blog-layout {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 80px;
	display: flex;
	gap: 48px;
	align-items: flex-start;
	font-family: var(--fk-sans);
	color: var(--fk-text);
}

.blog-main {
	flex: 1 1 auto;
	min-width: 0;
}

.blog-side {
	flex: 0 0 280px;
	width: 280px;
}

/* カテゴリーナビの現在地 */
#Sub_Menu_Box li a.is-current {
	background: var(--fk-teal);
	border-color: var(--fk-teal);
	color: var(--fk-white);
}

/* --------------------------------------------------------------------------
   記事一覧（カード）
   -------------------------------------------------------------------------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.blog-card {
	background: var(--fk-white);
	border: 1px solid var(--fk-line);
	transition: box-shadow .3s ease, transform .3s ease;
}

.blog-card:hover {
	box-shadow: 0 6px 20px rgba(35, 24, 21, .12);
	transform: translateY(-3px);
}

.blog-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.blog-card__thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--fk-bg);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(35, 24, 21, .022) 0px,
		rgba(35, 24, 21, .022) 1px,
		transparent 1px,
		transparent 8px
	);
}

.blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

/* アイキャッチ未設定時のロゴ。box-sizing に依存しないよう絶対配置で中央に置く。 */
.blog-card__thumb .blog-card__thumb-fallback {
	position: absolute;
	top: 50%;
	left: 50%;
	/* ロゴは 341x49 の横長。幅を基準にすると高さが出ないため広めに取る。 */
	width: 68%;
	height: auto;
	max-height: 56%;
	padding: 0;
	object-fit: contain;
	opacity: .3;
	transform: translate(-50%, -50%);
}

/* ホバー時の拡大は実写のアイキャッチのみに適用する（代替ロゴは中央配置を壊さない） */
.blog-card:hover .blog-card__thumb img:not(.blog-card__thumb-fallback) {
	transform: scale(1.05);
}

.blog-card:hover .blog-card__thumb .blog-card__thumb-fallback {
	opacity: .32;
}

.blog-card__body {
	padding: 20px 20px 24px;
}

.blog-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 82%;
}

.blog-card__date {
	font-family: var(--fk-en);
	color: var(--fk-muted);
	letter-spacing: .04em;
}

.blog-card__cat {
	background: var(--fk-teal);
	color: var(--fk-white);
	padding: 2px 10px;
	font-size: 92%;
	line-height: 1.6;
}

.blog-card__title {
	font-family: var(--fk-serif);
	font-size: 118%;
	line-height: 1.6;
	margin: 0 0 10px;
	color: var(--fk-ink);
}

.blog-card__excerpt {
	font-size: 90%;
	line-height: 1.85;
	color: var(--fk-muted);
	margin: 0 0 14px;
}

.blog-card__more {
	display: inline-block;
	font-size: 86%;
	color: var(--fk-teal);
	font-weight: bold;
}

.blog-card:hover .blog-card__more {
	color: var(--fk-orange);
}

.blog-empty {
	padding: 60px 0;
	text-align: center;
	color: var(--fk-muted);
}

/* --------------------------------------------------------------------------
   ページネーション
   -------------------------------------------------------------------------- */
.blog-pager {
	margin: 56px 0 0;
}

.blog-pager ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-pager a,
.blog-pager span {
	display: block;
	min-width: 42px;
	padding: 9px 12px;
	text-align: center;
	border: 1px solid var(--fk-line);
	background: var(--fk-white);
	color: var(--fk-text);
	font-family: var(--fk-en);
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.blog-pager a:hover {
	background: var(--fk-teal);
	border-color: var(--fk-teal);
	color: var(--fk-white);
}

.blog-pager .current {
	background: var(--fk-ink);
	border-color: var(--fk-ink);
	color: var(--fk-white);
}

/* --------------------------------------------------------------------------
   記事詳細
   -------------------------------------------------------------------------- */
.blog-article {
	background: var(--fk-white);
	border: 1px solid var(--fk-line);
	padding: 48px;
}

.blog-article__head {
	border-bottom: 1px solid var(--fk-line-soft);
	padding-bottom: 28px;
	margin-bottom: 32px;
}

.blog-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 86%;
	margin-bottom: 14px;
}

.blog-article__date {
	font-family: var(--fk-en);
	color: var(--fk-muted);
	letter-spacing: .04em;
}

.blog-article__cat {
	background: var(--fk-teal);
	color: var(--fk-white);
	padding: 3px 12px;
	text-decoration: none;
	line-height: 1.6;
}

.blog-article__cat:hover {
	background: var(--fk-teal-dark);
	color: var(--fk-white);
}

.blog-article__title {
	font-family: var(--fk-serif);
	font-size: 200%;
	line-height: 1.5;
	color: var(--fk-ink);
	margin: 0 0 18px;
	word-break: break-word;
}

.blog-article__author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 88%;
	color: var(--fk-muted);
}

/* Gravatar の代わりの投稿者アイコン。外部リクエストを発生させない。 */
.blog-article__author-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fk-bg);
	color: var(--fk-teal);
	font-size: 15px;
	flex: 0 0 auto;
}

.blog-article__thumb {
	margin: 0 0 36px;
}

.blog-article__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

/* 本文（投稿者がエディタで書く部分） */
.blog-article__body {
	font-size: 100%;
	line-height: 2;
	color: var(--fk-text);
}

.blog-article__body > * + * {
	margin-top: 1.6em;
}

.blog-article__body h2 {
	font-family: var(--fk-serif);
	font-size: 150%;
	line-height: 1.5;
	color: var(--fk-ink);
	border-left: 5px solid var(--fk-teal);
	padding: 4px 0 4px 16px;
	margin-top: 2.4em;
}

.blog-article__body h3 {
	font-family: var(--fk-serif);
	font-size: 125%;
	line-height: 1.6;
	color: var(--fk-ink);
	border-bottom: 1px solid var(--fk-line);
	padding-bottom: 8px;
	margin-top: 2.2em;
}

.blog-article__body h4 {
	font-size: 110%;
	font-weight: bold;
	color: var(--fk-ink);
	margin-top: 2em;
}

.blog-article__body p {
	margin: 0;
}

.blog-article__body a {
	color: var(--fk-teal);
	text-decoration: underline;
}

.blog-article__body a:hover {
	color: var(--fk-orange);
}

.blog-article__body ul,
.blog-article__body ol {
	padding-left: 1.6em;
}

.blog-article__body ul { list-style: disc; }
.blog-article__body ol { list-style: decimal; }
.blog-article__body li { margin: .4em 0; }

.blog-article__body img {
	max-width: 100%;
	height: auto;
}

.blog-article__body figure { margin: 0; }

.blog-article__body figcaption {
	font-size: 86%;
	color: var(--fk-muted);
	text-align: center;
	padding-top: 8px;
}

.blog-article__body blockquote {
	background: var(--fk-bg);
	border-left: 4px solid var(--fk-line);
	padding: 20px 24px;
	color: var(--fk-muted);
}

.blog-article__body blockquote p { margin: 0; }

.blog-article__body table {
	width: 100%;
	border-collapse: collapse;
}

.blog-article__body th,
.blog-article__body td {
	border: 1px solid var(--fk-line);
	padding: 10px 14px;
	text-align: left;
}

.blog-article__body th {
	background: var(--fk-bg);
	font-weight: bold;
}

.blog-article__body .wp-caption { max-width: 100%; }

.blog-article__body .alignleft  { float: left;  margin: 0 1.6em 1.2em 0; }
.blog-article__body .alignright { float: right; margin: 0 0 1.2em 1.6em; }
.blog-article__body .aligncenter { display: block; margin-left: auto; margin-right: auto; }

.blog-article__body::after {
	content: "";
	display: block;
	clear: both;
}

.blog-article__tags {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--fk-line-soft);
	font-size: 88%;
}

.blog-article__tags a {
	display: inline-block;
	border: 1px solid var(--fk-line);
	padding: 3px 12px;
	margin: 0 6px 6px 0;
	color: var(--fk-muted);
	text-decoration: none;
}

.blog-article__tags a:hover {
	border-color: var(--fk-teal);
	color: var(--fk-teal);
}

/* 前後の記事 */
.blog-adjacent {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	font-size: 90%;
}

.blog-adjacent__prev,
.blog-adjacent__next {
	flex: 1 1 0;
	min-width: 0;
}

.blog-adjacent__next { text-align: right; }

.blog-adjacent a {
	color: var(--fk-text);
	text-decoration: none;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.blog-adjacent a:hover { color: var(--fk-teal); }

.blog-adjacent__home {
	flex: 0 0 auto;
}

.blog-adjacent__home a {
	border: 1px solid var(--fk-line);
	background: var(--fk-white);
	padding: 9px 22px;
	font-weight: bold;
}

.blog-adjacent__home a:hover {
	background: var(--fk-teal);
	border-color: var(--fk-teal);
	color: var(--fk-white);
}

/* 関連記事 */
.blog-related {
	margin-top: 64px;
}

.blog-related__title {
	font-family: var(--fk-serif);
	font-size: 140%;
	color: var(--fk-ink);
	text-align: center;
	margin: 0 0 28px;
}

.blog-related .blog-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.blog-related .blog-card__body { padding: 14px 14px 18px; }
.blog-related .blog-card__title { font-size: 100%; }
.blog-related .blog-card__excerpt { display: none; }

/* --------------------------------------------------------------------------
   サイドバー
   -------------------------------------------------------------------------- */
.blog-side__block {
	background: var(--fk-white);
	border: 1px solid var(--fk-line);
	padding: 24px;
	margin-bottom: 24px;
}

.blog-side__title {
	font-family: var(--fk-serif);
	font-size: 112%;
	color: var(--fk-ink);
	border-bottom: 2px solid var(--fk-teal);
	padding-bottom: 10px;
	margin: 0 0 16px;
}

.blog-side__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 92%;
}

/* wp_list_categories / wp_get_archives は「<a>名前</a> (件数)」を出力する。
   a を display:block にすると件数が改行されるため、余白は li 側に持たせる。 */
.blog-side__list li {
	position: relative;
	border-bottom: 1px dotted var(--fk-line);
	padding: 10px 0 10px 16px;
	color: var(--fk-muted);
}

.blog-side__list li:last-child { border-bottom: none; }

.blog-side__list li:before {
	font-family: FontAwesome;
	content: '\f105';
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--fk-teal);
}

.blog-side__list a {
	color: var(--fk-text);
	text-decoration: none;
}

.blog-side__list a:hover { color: var(--fk-teal); }

/* 子カテゴリーの入れ子 */
.blog-side__list li ul {
	list-style: none;
	margin: 8px 0 0;
	padding: 0 0 0 4px;
}

.blog-side__list li ul li:last-child { border-bottom: none; padding-bottom: 0; }

.blog-side__recent {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-side__recent li { border-bottom: 1px dotted var(--fk-line); }
.blog-side__recent li:last-child { border-bottom: none; }

.blog-side__recent a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 0;
	color: var(--fk-text);
	text-decoration: none;
}

.blog-side__recent-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: var(--fk-bg);
}

.blog-side__recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-side__recent-text {
	flex: 1 1 auto;
	min-width: 0;
}

.blog-side__recent-date {
	display: block;
	font-family: var(--fk-en);
	font-size: 80%;
	color: var(--fk-muted);
}

.blog-side__recent-title {
	display: block;
	font-size: 88%;
	line-height: 1.6;
	margin-top: 2px;
}

.blog-side__recent a:hover .blog-side__recent-title { color: var(--fk-teal); }

/* 検索フォーム */
.blog-searchform {
	display: flex;
	border: 1px solid var(--fk-line);
	background: var(--fk-white);
}

.blog-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	padding: 11px 14px;
	font-size: 92%;
	font-family: var(--fk-sans);
	background: transparent;
	color: var(--fk-text);
}

.blog-searchform__input:focus {
	outline: 2px solid var(--fk-teal);
	outline-offset: -2px;
}

.blog-searchform__submit {
	flex: 0 0 auto;
	border: none;
	background: var(--fk-teal);
	color: var(--fk-white);
	padding: 0 18px;
	cursor: pointer;
	transition: background .25s ease;
}

.blog-searchform__submit:hover { background: var(--fk-teal-dark); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.blog-404 {
	background: var(--fk-white);
	border: 1px solid var(--fk-line);
	padding: 56px 40px;
	text-align: center;
}

.blog-404__lead {
	line-height: 2;
	color: var(--fk-muted);
	margin: 0 0 28px;
}

.blog-404 .blog-searchform {
	max-width: 420px;
	margin: 0 auto;
}

.blog-404__back { margin: 28px 0 0; }

.blog-404__back a {
	display: inline-block;
	border: 1px solid var(--fk-line);
	padding: 11px 28px;
	color: var(--fk-text);
	text-decoration: none;
	font-weight: bold;
}

.blog-404__back a:hover {
	background: var(--fk-teal);
	border-color: var(--fk-teal);
	color: var(--fk-white);
}

/* --------------------------------------------------------------------------
   タブレット（560px〜959px）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 959px) {
	.blog-layout {
		width: 90%;
		display: block;
		padding-bottom: 60px;
	}

	.blog-side {
		width: 100%;
		margin-top: 56px;
	}

	.blog-article { padding: 36px 32px; }
	.blog-article__title { font-size: 168%; }
	.blog-related .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   スマートフォン（〜559px）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 559px) {
	.blog-layout {
		width: 92%;
		/* スマホ固定フッターに隠れないよう余白を確保する */
		padding-bottom: 96px;
	}

	.blog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.blog-card__body { padding: 16px 16px 20px; }
	.blog-card__title { font-size: 108%; }

	.blog-article {
		padding: 24px 20px 32px;
		border-left: none;
		border-right: none;
		margin: 0 -4%;
	}

	.blog-article__title { font-size: 140%; }
	.blog-article__body { line-height: 1.95; }
	.blog-article__body h2 { font-size: 128%; }
	.blog-article__body h3 { font-size: 114%; }

	.blog-adjacent {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.blog-adjacent__home {
		grid-column: 1 / -1;
		order: 3;
		text-align: center;
	}

	.blog-adjacent__home a { display: block; }

	.blog-related .blog-grid { grid-template-columns: 1fr; }
	.blog-related .blog-card__excerpt { display: block; }

	.blog-pager a,
	.blog-pager span {
		min-width: 38px;
		padding: 8px 10px;
		font-size: 92%;
	}

	.blog-404 { padding: 40px 20px; }
}

/* --------------------------------------------------------------------------
   ブログ用ヒーロー
   本体サイト下層ページの #Movie_SubArea（動画・黒背景）を、
   ブランドカラーの背景に置き換える。高さは本体サイトと同一のため、
   #Hero_SubTTL / #Hero_SubTXT の位置指定はそのまま使える。
   -------------------------------------------------------------------------- */
#Movie_SubArea.Blog_Head {
	background:
		radial-gradient(ellipse at 22% 18%, rgba(65, 148, 153, .55) 0%, rgba(65, 148, 153, 0) 58%),
		radial-gradient(ellipse at 82% 78%, rgba(231, 85, 0, .28) 0%, rgba(231, 85, 0, 0) 55%),
		linear-gradient(135deg, #231815 0%, #2f4b4d 52%, #3c7b80 100%);
}

/* 斜めのテクスチャを薄く重ねて、単色の平板さを避ける */
#Movie_SubArea.Blog_Head:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, .035) 0px,
		rgba(255, 255, 255, .035) 1px,
		transparent 1px,
		transparent 7px
	);
	pointer-events: none;
}

/* 下端をわずかに暗く落としてパンくずとの境界を作る */
#Movie_SubArea.Blog_Head:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	background: linear-gradient(to bottom, rgba(35, 24, 21, 0) 0%, rgba(35, 24, 21, .38) 100%);
	pointer-events: none;
}

/* #Movie_SubArea は line-height:0em（動画の余白除去用）。
   #Hero_SubTTL には line-height の指定がなくこれを継承するため、
   見出しの高さが 0 になり表示が不安定になる。ブログ側で明示する。
   h1（トップ）と div（下層）のどちらでも同じ見た目にする。 */
#Movie_SubArea.Blog_Head #Hero_SubTTL {
	line-height: 1.35;
	font-weight: normal;
}

#Movie_SubArea.Blog_Head h1#Hero_SubTTL {
	font-size: 360%;
}

@media screen and (max-width: 959px) {
	#Movie_SubArea.Blog_Head h1#Hero_SubTTL { font-size: 240%; }
}

@media screen and (max-width: 559px) {
	#Movie_SubArea.Blog_Head h1#Hero_SubTTL { font-size: 180%; }
}

/* サイドバー最新記事のアイキャッチ未設定時 */
.blog-side__recent-thumb .blog-side__recent-fallback {
	object-fit: contain;
	opacity: .25;
	background: var(--fk-bg);
}

/* --------------------------------------------------------------------------
   スマホでのカテゴリーナビ・パンくず
   本体サイトの smp.css は #Sub_Menu_Area / #Qz_Area を display:none にしている。
   会社サイトでは妥当だが、ブログではカテゴリーナビが主要な回遊導線であり、
   閲覧の大半がスマホであるため、ブログ側でのみ再表示する。
   （blog.css は smp.css より後に読み込まれるため、同一詳細度で上書きできる）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 559px) {

	#Sub_Menu_Area {
		display: block;
		background: var(--fk-bg);
	}

	/* 項目数が多いため横スクロールさせる。スクロールバーは隠す。 */
	#Sub_Menu_Box {
		margin: 0;
		padding: 10px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#Sub_Menu_Box::-webkit-scrollbar { display: none; }

	#Sub_Menu_Box ul {
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 0 4%;
		list-style: none;
		width: max-content;
		min-width: 100%;
	}

	#Sub_Menu_Box li { flex: 0 0 auto; }

	#Sub_Menu_Box li a {
		display: block;
		border: 1px solid var(--fk-line);
		background: var(--fk-white);
		color: var(--fk-text);
		font-weight: bold;
		font-size: 88%;
		padding: 7px 16px;
		white-space: nowrap;
		text-decoration: none;
	}

	#Sub_Menu_Box li a.is-current {
		background: var(--fk-teal);
		border-color: var(--fk-teal);
		color: var(--fk-white);
	}

	#Qz_Area {
		display: block;
		background: var(--fk-white);
		border-bottom: 1px solid var(--fk-line-soft);
	}

	#Qz_Box {
		width: 92%;
		margin: auto;
		padding: 9px 0;
		font-size: 76%;
		color: var(--fk-muted);
		/* 記事タイトルまで含めると長くなるため1行に収める */
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#Qz_Box::-webkit-scrollbar { display: none; }

	#Qz_Box ul { list-style: none; margin: 0; padding: 0; }

	#Qz_Box li { display: inline-block; margin: 0 6px 0 0; }

	#Qz_Box li:before {
		font-family: FontAwesome;
		content: '\f105';
		padding: 0 4px 0 0;
		color: var(--fk-line);
	}

	#Qz_Box li:first-child:before { content: none; }

	#Qz_Box a { color: var(--fk-teal); text-decoration: none; }
}