/* --------------------------------------------
SINGLE ES
--------------------------------------------- */
#singleEs{
	background-color : #f2f4f6;
	.breadcrumb{
		margin-block : 0;
	}
	.es{
		overflow : hidden;
		background-color : white;
		border-radius : 20px;
		header{
			h1{
				position : relative;
				font-weight : 700;
				color : var( --red02 );
				&::before , &::after{
					position : absolute;
					top : 50%;
					display : block;
					font-size : 0;
					content : "";
					background-color : currentColor;
					translate : 0 -50%;
				}
				&::before{
					height : 6px;
				}
				&::after{
					width : auto;
					height : 14px;
					aspect-ratio : 1;
					border-radius : 50%;
				}
				a{
					color : var( --red02 );
					-webkit-text-decoration : underline;
					text-decoration : underline;
					text-underline-offset : .2lh;
				}
			}
			p{
				font-weight : 700;
				color : black;
			}
		}
		.categories{
			display : flex;
			flex-wrap : wrap;
			column-gap : 8px;
			margin-top : 8px;
			p{
				display : grid;
				place-items : center;
				padding-block : 8px;
				padding-inline : 12px;
				font-weight : 700;
				color : white;
				background-color : var( --red02 );
				border-radius : 100vmax;
			}
			ul{
				display : flex;
				align-items : center;
				justify-content : center;
				padding-block : 8px;
				padding-inline : 4px;
				border-radius : 100vmax;
				outline : solid 1px var( --red02 );
				outline-offset : -1px;
			}
			li{
				padding-inline : 12px;
				font-weight : 700;
				color : var( --red02 );
				+ li{
					border-left : solid 1px currentColor;
				}
			}
		}
	}
	.relation{
		h2{
			width : fit-content;
			font-weight : 700;
			color : black;
			border-bottom-color : var( --red02 );
			border-bottom-style : solid;
		}
		> ul{
			> li{
				background-color : white;
				border-radius : 20px;
			}
		}
		section{
			display : grid;
			align-items : start;
			picture{
				display : block;
				img{
					width : auto;
				}
			}
			.categories{
				display : flex;
				flex-wrap : wrap;
				column-gap : 8px;
				p{
					display : grid;
					place-items : center;
					padding-block : 8px;
					padding-inline : 12px;
					font-weight : 700;
					color : white;
					background-color : var( --red02 );
					border-radius : 100vmax;
				}
				ul{
					display : flex;
					align-items : center;
					justify-content : center;
					padding-block : 8px;
					padding-inline : 4px;
					border-radius : 100vmax;
					outline : solid 1px var( --red02 );
					outline-offset : -1px;
				}
				li{
					padding-inline : 12px;
					font-weight : 700;
					color : var( --red02 );
					+ li{
						border-left : solid 1px currentColor;
					}
				}
			}
		}
		h3{
			font-weight : 700;
			color : black;
		}
		.excerpt{
			position : relative;
			overflow-y : hidden;
			color : black;
			letter-spacing : -.06em;
			background-color : #f8f8f8;
			&::after{
				position : absolute;
				left : 0;
				display : block;
				width : 100%;
				content : "";
				background-image : linear-gradient( to bottom , color-mix( in srgb , #f8f8f8 0% , transparent ) , color-mix( in srgb , #f8f8f8 100% , transparent ) );
			}
		}
		a{
			display : grid;
			place-items : center;
			font-weight : 700;
			color : white;
			background-color : var( --red02 );
			border-radius : 100vmax;
		}
	}
	@media screen and ( width <= 768px ){
		padding-inline : 20px;
		padding-top : 106px;
		padding-bottom : 88px;
		.es{
			padding-block : 32px;
			padding-inline : 20px;
			header{
				padding-inline : 20px;
				h1{
					font-size : 24px;
					line-height : calc( 30 / 24 );
					&::before{
						left : -40px;
						width : 25px;
					}
					&::after{
						left : -22px;
					}
				}
				p{
					margin-top : 8px;
					font-size : 14px;
					line-height : calc( 17 / 14 );
				}
			}
			.categories{
				padding-inline : 20px;
				margin-top : 16px;
				p{
					font-size : 12px;
					line-height : calc( 19 / 12 );
				}
				li{
					font-size : 12px;
					line-height : calc( 19 / 12 );
				}
			}
		}
		.relation{
			margin-top : 80px;
			h2{
				padding-bottom : 8px;
				font-size : 18px;
				line-height : calc( 22 / 18 );
				border-bottom-width : 4px;
			}
			> ul{
				margin-top : 32px;
				> li{
					padding-inline : 20px;
					padding-top : 20px;
					padding-bottom : 16px;
					+ li{
						margin-top : 16px;
					}
				}
			}
			section{
				grid-template-rows : auto 16px auto 16px auto 8px auto;
				grid-template-columns : auto 16px auto 1fr;
			}
			.categories{
				grid-row : 1;
				grid-column : 1 / -1;
				p{
					font-size : 12px;
					line-height : calc( 19 / 12 );
				}
				li{
					font-size : 12px;
					line-height : calc( 19 / 12 );
				}
			}
			picture{
				grid-row : 3;
				grid-column : 1;
				align-self : center;
				img{
					height : 66px;
				}
			}
			h3{
				grid-row : 3;
				grid-column : 3;
				align-self : center;
				font-size : 16px;
				line-height : calc( 26 / 16 );
			}
			.excerpt{
				grid-row : 5;
				grid-column : 1 / 5;
				max-height : 167px;
				padding-block : 16px;
				padding-inline : 16px;
				font-size : 12px;
				line-height : calc( 21 / 12 );
				border-radius : 4px;
				&::after{
					top : 92px;
					height : 75px;
				}
			}
			a{
				grid-row : 7;
				grid-column : 1 / 5;
				width : 100%;
				padding-block : 5px;
				padding-inline : 20px;
				font-size : 12px;
				line-height : calc( 19 / 12 );
			}
		}
		.sidebar{
			margin-top : 80px;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : calc( ( 100% - 1580px ) / 2 );
		padding-top : 203px;
		padding-bottom : 100px;
		.breadcrumb{
			padding-inline : 130px;
		}
		.columns02{
			display : grid;
			grid-template-columns : calc( 1160 * 100% / 1580 ) calc( 360 * 100% / 1580 );
			row-gap : 120px;
			align-items : start;
			justify-content : space-between;
			margin-top : 40px;
		}
		.es{
			grid-row : 1;
			grid-column : 1;
			padding-block : 80px;
			padding-inline : 130px;
			header{
				h1{
					font-size : 35px;
					line-height : calc( 50 / 35 );
					&::before{
						left : -130px;
						width : 107px;
					}
					&::after{
						left : -32px;
					}
				}
				p{
					font-size : 18px;
					line-height : calc( 22 / 18 );
				}
			}
			.categories{
				margin-top : 24px;
				p{
					font-size : 14px;
					line-height : calc( 19 / 14 );
				}
				li{
					font-size : 14px;
					line-height : calc( 19 / 14 );
				}
			}
		}
		.relation{
			grid-row : 2;
			grid-column : 1;
			align-self : start;
			h2{
				padding-bottom : 10px;
				font-size : 26px;
				line-height : calc( 31 / 26 );
				border-bottom-width : 5px;
			}
			> ul{
				margin-top : 40px;
				> li{
					padding-inline : 40px;
					padding-top : 36px;
					padding-bottom : 24px;
					+ li{
						margin-top : 40px;
					}
				}
			}
			section{
				grid-template-rows : 6px auto 10px auto auto 16px auto;
				grid-template-columns : auto 24px auto 1fr auto;
			}
			picture{
				grid-row : 1 / 6;
				grid-column : 1;
				img{
					height : 86px;
				}
			}
			.categories{
				grid-row : 2;
				grid-column : 3;
				p{
					font-size : 14px;
					line-height : calc( 19 / 14 );
				}
				li{
					font-size : 14px;
					line-height : calc( 19 / 14 );
				}
			}
			h3{
				grid-row : 4/6;
				grid-column : 3;
				align-self : start;
				font-size : 20px;
				line-height : calc( 28 / 20 );
			}
			a{
				grid-row : 4/6;
				grid-column : 5;
				align-self : start;
				padding-block : 5px;
				padding-inline : 20px;
				font-size : 12px;
				line-height : calc( 19 / 12 );
			}
			.excerpt{
				grid-row : 7;
				grid-column : 1 / 6;
				max-height : 256px;
				padding-block : 16px;
				padding-inline : 20px;
				font-size : 15px;
				line-height : calc( 24 / 15 );
				border-radius : 4px;
				&::after{
					top : 148px;
					height : 108px;
				}
			}
		}
		.sidebar{
			grid-row : 1/3;
			grid-column : 2;
			align-self : start;
		}
	}
}

/* --------------------------------------------
TYPE
--------------------------------------------- */
#singleEs .content .blur{
	position : relative;
	overflow : clip;
	img{
		width : 100%;
		height : auto;
	}
	.logins{
		position : absolute;
		left : 0;
		z-index : 1;
		width : 100%;
		background-color : color-mix( in sRGB , white 70% , transparent );
		transition : translate 0s linear;
		will-change : transform;
		p{
			text-align : center;
		}
		a{
			width : fit-content;
			margin-inline : auto;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : 24px;
		.logins{
			padding-block : 21px;
			p{
				margin-bottom : 16px;
				font-size : 16px;
				line-height : calc( 26 / 16 );
			}
			a{
				width : 240px;
				height : 46px;
				font-size : 15px;
				+ a{
					margin-top : 8px;
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : 32px;
		.logins{
			padding-block : 25px;
			p{
				margin-bottom : 20px;
				font-size : 20px;
				line-height : calc( 28 / 20 );
			}
			a{
				width : 380px;
				height : 66px;
				font-size : 15px;
				+ a{
					margin-top : 10px;
				}
			}
		}
	}
}
#singleEs.type-info .content{
	color : black;
	h2{
		font-weight : 700;
		background-color : #f2f4f6;
	}
	p + h2{
		margin-top : 64px;
	}
	@media screen and ( width <= 768px ){
		margin-top : 64px;
		h2{
			padding-block : 10px;
			padding-inline : 16px;
			font-size : 17px;
			line-height : calc( 28 / 17 );
		}
		p{
			font-size : 15px;
			line-height : calc( 28 / 15 );
		}
		h2 + p{
			margin-top : 24px;
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : 80px;
		h2{
			padding-inline : 24px;
			font-size : 20px;
			line-height : calc( 48 / 20 );
		}
		p{
			font-size : 15px;
			line-height : calc( 26 / 15 );
		}
		h2 + p{
			margin-top : 32px;
		}
	}
}
#singleEs.type-interview .content{
	h2{
		font-weight : 700;
		color : var( --red02 );
		border-left-color : currentColor;
		border-left-style : solid;
		border-left-width : 5px;
	}
	h3{
		font-weight : 700;
		color : black;
		background-color : #f2f4f6;
	}
	h3 + :where( table , .wp-block-table ){
		margin-top : 8px;
	}
	:where( table , .wp-block-table ){
		margin-inline : auto;
		overflow : visible;
	}
	:where( table , .wp-block-table ){
		margin-inline : auto;
		th , td{
			color : black;
			vertical-align : middle;
			border-top : 0;
			border-bottom : solid 1px #d9d9d9;
			border-left : 0;
			border-right : 0;
		}
		th{
			position : relative;
			font-weight : 700;
			text-align : center;
			&::after{
				position : absolute;
				bottom : -1.5px;
				left : 0;
				width : 100%;
				height : 3px;
				font-size : 0;
				content : "";
				background-color : var( --red01 );
			}
		}
	}
	.wp-block-table{
		tr:has( td:nth-of-type( 2 ) ){
			td:first-of-type{
				position : relative;
				font-weight : 700;
				text-align : center;
				&::after{
					position : absolute;
					bottom : -1.5px;
					left : 0;
					width : 100%;
					height : 3px;
					font-size : 0;
					content : "";
					background-color : var( --red01 );
				}
			}
		}
	}
	:where( table , .wp-block-table ) + h3{
		margin-top : 64px;
	}
	h4{
		font-weight : 700;
		color : black;
		border-left-color : var( --red01 );
		border-left-style : solid;
	}
	p{
		color : black;
	}
	p + h4 , p + h5{
		margin-top : 24px;
	}
	h5{
		display : flex;
		flex-wrap : nowrap;
		align-items : center;
		justify-content : start;
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background-color : var( --red01 );
		}
	}
	h5 + p{
		margin-top : 8px;
	}
	p + h3{
		margin-top : 64px;
	}
	@media screen and ( width <= 768px ){
		margin-top : 64px;
		h2{
			padding-left : 10px;
			font-size : 20px;
			line-height : calc( 24 / 20 );
		}
		h2 + h3{
			margin-top : 40px;
		}
		h3{
			padding-inline : 16px;
			font-size : 17px;
			line-height : calc( 48 / 17 );
		}
		:where( table , .wp-block-table ){
			width : calc( 300 * 100% / 320 );
			th , td{
				font-size : 14px;
			}
			th{
				width : 120px;
				padding-block : 16px;
				line-height : calc( 32 / 14 );
			}
			td{
				padding-block : 19px;
				padding-inline : 16px;
				line-height : calc( 26 / 14 );
			}
		}
		.wp-block-table{
			tr:has( td:nth-of-type( 2 ) ){
				td:first-of-type{
					width : 120px;
					padding-block : 16px;
					line-height : calc( 32 / 14 );
				}
			}
		}
		h3 + h4{
			margin-top : 24px;
		}
		h4{
			padding-left : 13px;
			font-size : 18px;
			line-height : calc( 22 / 18 );
			border-left-width : 5px;
		}
		h4 + p{
			margin-top : 25px;
		}
		p{
			font-size : 15px;
			line-height : calc( 28 / 15 );
		}
		h5{
			column-gap : 6px;
			font-size : 15px;
			line-height : calc( 29 / 15 );
			&::before{
				height : 12px;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : 80px;
		h2{
			padding-left : 20px;
			font-size : 30px;
			line-height : calc( 36 / 30 );
		}
		h2 + h3{
			margin-top : 48px;
		}
		h3{
			padding-inline : 24px;
			font-size : 20px;
			line-height : calc( 48 / 20 );
		}
		:where( table , .wp-block-table ){
			width : min( 860px , calc( 860 * 100% / 900 ) );
			th , td{
				font-size : 15px;
			}
			th{
				width : 240px;
				padding-block : 24px;
				line-height : calc( 32 / 15 );
			}
			td{
				padding-block : 27px;
				padding-inline : 24px;
				line-height : calc( 26 / 15 );
			}
		}
		.wp-block-table{
			tr:has( td:nth-of-type( 2 ) ){
				td:first-of-type{
					width : 240px;
					padding-block : 24px;
					line-height : calc( 32 / 15 );
				}
			}
		}
		h3 + h4{
			margin-top : 31px;
		}
		h4{
			padding-left : 12px;
			font-size : 20px;
			line-height : calc( 24 / 20 );
			border-left-width : 6px;
		}
		h4 + p{
			margin-top : 32px;
		}
		p{
			font-size : 15px;
			line-height : calc( 26 / 15 );
		}
		h5{
			column-gap : 12px;
			font-size : 18px;
			line-height : calc( 32 / 18 );
			&::before{
				height : 16px;
			}
		}
	}
}