/*
Theme Name: Fukasawa Child
Template: fukasawa
Version: 1.0
*/

/* ========================================
   ??????? 2????????
   ????
   ??ACF
======================================== */

.category-banner .banner-layout {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

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

.category-banner .banner-acf {
	flex: 0 0 280px;
	background: #f7f7f7;
	padding: 24px;
	border: 1px solid #e5e5e5;
}

.category-banner .banner-acf p {
	margin-bottom: 20px;
	line-height: 1.7;
}

.category-banner .banner-acf p:last-child {
	margin-bottom: 0;
}

.category-banner .banner-acf strong {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	color: #333;
}

/* ??????????????? */

.category-banner .banner-main .post-content .alignnone,
.category-banner .banner-main .post-content .aligncenter,
.category-banner .banner-main .post-content .wp-block-image,
.category-banner .banner-main .post-content figure {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.category-banner .banner-main .post-content img.alignnone,
.category-banner .banner-main .post-content .alignnone img,
.category-banner .banner-main .post-content img.aligncenter,
.category-banner .banner-main .post-content .aligncenter img,
.category-banner .banner-main .post-content .wp-block-image img,
.category-banner .banner-main .post-content figure img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

.category-banner .banner-main .post-content .alignleft,
.category-banner .banner-main .post-content .alignright {
	float: none;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ?????? */

@media (max-width: 1000px) {
	.category-banner .banner-layout {
		flex-direction: column;
		gap: 32px;
	}

	.category-banner .banner-acf {
		flex: none;
		width: 100%;
	}
}




.category-banner .post-inner {
	width: 973px;
	max-width: 92%;
}



.blog .post-header {
	display: none;
}



.single.category-banner .featured-media {
	display: none;
}
















/* =========================
   TOP?????
   ??4? + ??4??
   ========================= */

.blog .posts .post,
.archive .posts .post,
.home .posts .post {
	position: relative;
	overflow: visible;
}

/* ??4? */
.blog .posts .post::before,
.archive .posts .post::before,
.home .posts .post::before {
	content: "";
	position: absolute;
	top: -6px;
	right: -6px;
	bottom: -6px;
	left: -6px;
	pointer-events: none;
	opacity: 0;
	z-index: 20;

	background-image:
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC);
	background-repeat: no-repeat;
	background-size: 3px 3px, 3px 3px, 3px 3px, 3px 3px;
	background-position:
		left top,
		right top,
		left bottom,
		right bottom;
}

/* ??4?? */
.blog .posts .post::after,
.archive .posts .post::after,
.home .posts .post::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 19;

	background-image:
		/* ?? ?? */
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC),

		/* ?? ?? */
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC),

		/* ?? ?? */
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC),

		/* ?? ?? */
		linear-gradient(#042DBC, #042DBC),
		linear-gradient(#042DBC, #042DBC);

	background-repeat: no-repeat;

	background-size:
		15px 2px, 2px 15px,
		15px 2px, 2px 15px,
		15px 2px, 2px 15px,
		15px 2px, 2px 15px;

	background-position:
		/* ?? */
		left 6px top 12.5px,
		left 12.5px top 6px,

		/* ?? */
		right 6px top 12.5px,
		right 12.5px top 6px,

		/* ?? */
		left 6px bottom 12.5px,
		left 12.5px bottom 6px,

		/* ?? */
		right 6px bottom 12.5px,
		right 12.5px bottom 6px;
}














/* ????
   ????????
   ??????????
*/
.blog .posts .post:hover::before,
.archive .posts .post:hover::before,
.home .posts .post:hover::before {
	animation: cornerPulse 0.55s linear forwards;
}

.blog .posts .post:hover::after,
.archive .posts .post:hover::after,
.home .posts .post:hover::after {
	animation: crossOn 0.12s linear forwards;
	animation-delay: 0.06s;
}

/* ????
   ?? ? 3??? ? ???? */
@keyframes cornerPulse {
	0%   { opacity: 0; }
	10%  { opacity: 0; }

	18%  { opacity: 1; }
	26%  { opacity: 0; }

	34%  { opacity: 1; }
	42%  { opacity: 0; }

	50%  { opacity: 1; }
	58%  { opacity: 0; }

	72%  { opacity: 1; }
	100% { opacity: 1; }
}

/* ???
   ??????????? */
@keyframes crossOn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}