@charset "utf-8";

/* --------------------------------------------------- */
/* Spirit */
/* --------------------------------------------------- */
#chain h2,
#chain h2 + p { display: none; }

#spirit archive {
	display: flex;
	flex-wrap: wrap;
	gap: 3.0em 3%;
}
#spirit archive a {
	display: block;
	width: 22.75%;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.08);
}
#spirit archive a:hover {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	transform: scale(0.97);
}



#spirit archive a figure {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
}
#spirit archive a figure::before {
	content: '';
	display: block;
	padding-top: 75%;
	width: 100%;
}
#spirit archive a div {
	padding: 5%;
}
#spirit archive h3 {
	margin: 0.25em 0;
	font-family: "Noto Serif JP", serif;
	font-size: 1.8rem;

}
#spirit archive p[data-num] {
	font-size: 1.3rem;
	color: rgba(12, 128, 70, 0.8);
}
#spirit archive p[data-num] span { vertical-align: middle; }
#spirit archive p[data-num]::before {
	content: '第'attr(data-num)'回' ;
	display: inline-block;
	margin-right: 0.5em;
	width: 48px;
	background-color: rgba(12, 128, 70, 0.8);
	color: #fff;
	font-size: 80%;
	text-align: center;
	vertical-align: middle;
}
#spirit archive p[data-farm] {
	font-family: "Noto Serif JP", serif;
	font-size: 1.6rem;
	text-align: right;
}
#spirit archive p[data-farm] span { vertical-align: middle; }
#spirit archive p span[data-honor]::after {
	content: attr(data-honor)'';
	font-size: 75%;
}
#spirit archive p[data-farm]::before {
	content: attr(data-farm) ;
	display: inline-block;
	margin-right: 1.0em;
	font-size: 80%;
	vertical-align: middle;
}



@media screen and (max-width: 1024px) {
	#spirit archive { gap: 2.5em 3.5%; }
	#spirit archive a { width: 31.0%; }
}
@media screen and (max-width: 767px) {
	#spirit archive { gap: 2.0em 4%; }
	#spirit archive a { width: 48.0%; }
}
@media screen and (max-width: 480px) {
	#spirit archive { gap: 2.0em 0; }
	#spirit archive a { width: 100.0%; }
}


/* --------------------------------------------------- */
/* Spirit Article */
/* --------------------------------------------------- */
.pghead h4[data-num] span { vertical-align: middle; }
.pghead h4[data-num]::before {
	content: '第'attr(data-num)'回';
	display: inline-block;
	margin-right: 0.5em;
	width: 72px;
	background-color: rgba(12, 128, 70, 0.8);
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 75%;
	text-align: center;
	vertical-align: middle;
}

#spirit article .halfbox {
	display: flex;
	justify-content: space-between;
}
#spirit article .halfbox .pic,
#spirit article .halfbox div:not(.pic) { width: 47.5%; }
#spirit article .halfbox figure {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
}
#spirit article .halfbox figure::before {
	content: '';
	display: block;
	padding-top: 100%;
	width: 100%;
}
#spirit article h3 {
	font-family: "Noto Serif JP", serif;
	font-size: 2.8rem;
}
#spirit article p {
	font-family: "Noto Serif JP", serif;
	font-size: 1.8rem;
	line-height: 2.2;
	letter-spacing: 0.1em;
}
#spirit article p.famer {
	font-size: 2.1rem;
}
#spirit article p.famer span:first-child {
	margin-right: 1.0em;
}
#spirit article p.famer span[data-honor] {
	display: block;
	font-size: 4.8rem;
}
#spirit article p.famer span[data-honor]::after {
	content: attr(data-honor);
	margin-left: 0.25em;
	font-size: 75%;
}
#spirit article .interview h4 {
	position: relative;
	margin-top: 2.0em;
	padding-left: 5.0em;
	color: #0a9150;
	font-size: 1.8rem;
	font-weight: 600;
}
#spirit article .interview h4::before {
	content: '';
	position: absolute;
	top: 0.9em;
	left: 0;
	display: block;
	width: 4.0em;
	border-top: 1px solid #0a9150;
}
#spirit article .interview p[data-voice] {
	position: relative;
	margin-top: 1.0em;
	padding-left: 5.0em;
}
#spirit article .interview p[data-voice]::before {
	content: attr(data-voice);
	position: absolute;
	top: 0.3em;
	left: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 80%;
	font-weight: 600;
}
#spirit article .postscript h3 {
	position: relative;
}
#spirit article .postscript h3::after {
	content: '';
	position: absolute;
	top: 0.9em;
	right: 0;
	display: block;
	width: calc(100% - 5.0em);
	border-top: 1px solid #999;
}
#spirit article .postscript p {
	margin-top: 1.0em;
	font-family: "Noto Sans JP", sans-serif;

}
#spirit article .postscript + .btn a { margin-left: auto; margin-right: auto; }


@media screen and (max-width: 1024px) {
	#spirit article .halfbox .pic { width: 35%; }
	#spirit article .halfbox div:not(.pic) { width: 60%; }
	#spirit article .halfbox figure::before { padding-top: 130%; }
}
@media screen and (max-width: 767px) {
	#spirit article .halfbox {
		flex-direction: column;
		gap: 2.0em 0;
	}
	#spirit article .halfbox .pic,
	#spirit article .halfbox div:not(.pic) { width: 100%; }
	#spirit article .halfbox figure::before { padding-top: 75%; }
	#spirit article h3 { font-size: 2.4rem; }
	#spirit article p.famer span[data-honor] { font-size: 3.6rem; }
}
@media screen and (max-width: 480px) {
	#spirit article .halfbox figure::before { padding-top: 125%; }
	#spirit article p { font-size: 1.6rem; }
	#spirit article p.famer { font-size: 1.8rem; }
	#spirit article p.famer span[data-honor] { font-size: 3.2rem; }
	#spirit article .interview h4 {
		padding-left: 3.0em;
		font-size: 1.6rem;
	}
	#spirit article .interview h4::before { width: 2.0em; }
	#spirit article .interview p[data-voice] {
		margin-top: 1.0em;
		padding-left: 0;
	}
	#spirit article .interview p[data-voice]::before {
		position: static;
		top: 0;
		left: 0;
		display: block;
	}
}









/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 480px) {
}