@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title01{
	display : block;
	align-content : center;
	font-weight : 700;
	text-align : center;
	background : url( "../images/ui/bg/title.webp" ) center top / cover no-repeat;
	@media screen and ( width <= 768px ){
		height : calc( 198 * var( --remBase ) );
		margin-inline : calc( 12 * var( --viewportBase ) );
		margin-top : calc( 18 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
		line-height : calc( 44 / 28 );
		border-radius : calc( 24 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		height : calc( 224 * var( --remBase ) );
		margin-inline : calc( 40 * var( --viewportBase ) );
		margin-top : calc( 16 * var( --remBase ) );
		font-size : calc( 40 * var( --remBase ) );
		line-height : calc( 60 / 40 );
		border-radius : calc( 24 * var( --remBase ) );
	}
}
#titles01{
	display : block;
	align-content : center;
	background : url( "../images/ui/bg/title.webp" ) center top / cover no-repeat;
	> span{
		display : block;
		font-weight : 700;
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		height : calc( 198 * var( --remBase ) );
		margin-inline : calc( 12 * var( --viewportBase ) );
		margin-top : calc( 18 * var( --remBase ) );
		border-radius : calc( 24 * var( --remBase ) );
		> span{
			&:nth-of-type( 1 ){
				font-size : calc( 28.8 * var( --remBase ) );
				line-height : calc( 43.2 / 28.8 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 4 * var( --remBase ) );
				font-size : calc( 23.04 * var( --remBase ) );
				line-height : calc( 34.56 / 23.04 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		height : calc( 224 * var( --remBase ) );
		margin-inline : calc( 40 * var( --viewportBase ) );
		margin-top : calc( 16 * var( --remBase ) );
		border-radius : calc( 24 * var( --remBase ) );
		> span{
			&:nth-of-type( 1 ){
				font-size : calc( 40 * var( --remBase ) );
				line-height : calc( 60 / 40 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 3 * var( --remBase ) );
				font-size : calc( 32 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumbs{
	margin-inline : auto;
	ol{
		display : flex;
		flex-wrap : wrap;
		justify-content : end;
	}
	li{
		font-weight : 500;
		&:not( :last-child ){
			display : grid;
			grid-auto-flow : column;
			align-items : start;
			justify-content : start;
			&::after{
				white-space : pre;
				content : " > ";
			}
		}
	}
	a{
		text-decoration : underline;
		text-decoration-color : transparent;
		text-underline-offset : calc( ( 1lh - 1em ) / 2 );
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 32 * var( --remBase ) );
		li{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 1100 * var( --viewportBase ) );
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		li{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 21 / 14 );
		}
	}
}
@media ( hover : hover ){
	#breadcrumbs a:hover{
		text-decoration-color : currentColor;
		opacity : .8;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#breadcrumbs a{
		transition : text-decoration .3s linear , opacity .3s linear;
	}
}

/* --------------------------------------------
POST
--------------------------------------------- */
body:has( #posts ){
	&::before{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		display : block;
		width : 100%;
		content : "";
		background : linear-gradient( to right , color-mix( in oklch , var( --categoryColor ) , black 30% ) , var( --categoryColor ) , color-mix( in oklch , var( --categoryColor ) , white 20% ) );
		transform-origin : left;
		scale : var( --progress ) 1;
		@media print , screen and ( width > 768px ){
			height : calc( 4 * var( --remBase ) );
		}
	}
	#breadcrumbs{
		ol{
			justify-content : start;
		}
		a{
			color : #94a3b8;
		}
		li > span{
			color : #6b7280;
		}
		@media print , screen and ( width > 768px ){
			width : 100%;
			padding-inline : var( --wrapPaddingInline );
		}
	}
}
@media ( hover : hover ){
	body:has( #posts ) #breadcrumbs a:hover{
		color : var( --categoryColor );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	body:has( #posts ) #breadcrumbs a{
		transition : color var( --transitionBase ) , text-decoration-color var( --transitionBase );
	}
}
#posts{
	position : relative;
	padding-bottom : calc( 80 * var( --remBase ) );
	overflow-x : clip;
	@media screen and ( width <= 768px ){
		padding-top : calc( 16 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : calc( 940 * var( --contentBase ) ) calc( 300 * var( --contentBase ) );
		align-items : start;
		justify-content : space-between;
	}
}
#postHeader{
	a{
		display : grid;
		place-items : center;
		width : fit-content;
		padding-block : calc( 4 * var( --remBase ) );
		padding-inline : calc( 12 * var( --contentBase ) );
		font-size : calc( 12 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.8;
		color : white;
		background-color : var( --categoryColor );
		border-radius : calc( 4 * var( --remBase ) );
	}
	h1{
		margin-top : calc( 16 * var( --remBase ) );
		font-weight : 700;
	}
	dl{
		display : flex;
		flex-wrap : wrap;
		margin-top : calc( 16 * var( --remBase ) );
		color : #94a3b8;
		> div{
			display : grid;
			grid-auto-flow : column;
			column-gap : calc( 4 * var( --remBase ) );
			align-items : center;
			justify-content : start;
		}
	}
	dt{
		img{
			height : calc( 16 * var( --remBase ) );
			filter : invert( 67% ) sepia( 10% ) saturate( 594% ) hue-rotate( 175deg ) brightness( 95% ) contrast( 86% );
		}
	}
	picture{
		margin-top : calc( 32 * var( --remBase ) );
	}
	@media screen and ( width <= 768px ){
		h1{
			font-size : calc( 28 * var( --remBase ) );
			line-height : 1.3;
		}
		dl{
			row-gap : calc( 16 * var( --remBase ) );
			column-gap : calc( 16 * var( --contentBase ) );
		}
		dd{
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.79;
		}
	}
	@media print , screen and ( width > 768px ){
		h1{
			font-size : calc( 36 * var( --remBase ) );
			line-height : 1.29;
		}
		dl{
			column-gap : calc( 16 * 100% / 940 );
		}
		dd{
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.8;
		}
	}
}
#postAuthor{
	margin-top : calc( 24 * var( --remBase ) );
	overflow : hidden;
	background-color : #f8f9fa;
	border-radius : calc( 12 * var( --remBase ) );
	outline : solid 1px #d1d5db;
	outline-offset : -1px;
	box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 8 * var( --remBase ) ) color-mix( in sRGB , black 4% , transparent );
	.title{
		display : grid;
		align-items : center;
		justify-content : start;
		padding-block : calc( 8 * var( --remBase ) );
		font-weight : 700;
		color : white;
		background-color : var( --categoryColor );
	}
	> div{
		display : grid;
		grid-template-rows : auto 1fr;
		align-items : start;
		padding-block : calc( 24 * var( --remBase ) );
	}
	picture{
		grid-row : 1/-1;
		grid-column : 1;
		align-self : start;
		width : auto;
		height : calc( 80 * var( --remBase ) );
		aspect-ratio : 1;
		overflow : hidden;
		border-radius : 50%;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	.names{
		grid-row : 1;
		grid-column : 2;
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.4;
		color : var( --categoryColor );
	}
	.description{
		grid-row : 2;
		grid-column : 2;
	}
	@media screen and ( width <= 768px ){
		.title{
			padding-inline : calc( 24 * var( --contentBase ) );
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.79;
		}
		> div{
			grid-template-columns : calc( 80 * 100% / 408 ) 1fr;
			row-gap : calc( 2 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 408 );
			padding-inline : calc( 24 * var( --contentBase ) );
		}
		.description{
			font-size : calc( 12 * var( --remBase ) );
			line-height : 1.5;
		}
	}
	@media print , screen and ( width > 768px ){
		.title{
			padding-inline : calc( 24 * 100% / 940 );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.8;
		}
		> div{
			grid-template-columns : calc( 80 * 100% / 892 ) 1fr;
			row-gap : calc( 4 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 892 );
			padding-inline : calc( 24 * 100% / 940 );
		}
		.description{
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.5;
		}
	}
}
#toc_container{
	background : #fafbfc;
	border-radius : calc( 8 * var( --remBase ) );
	outline : solid 1px #d1d5db;
	outline-offset : -1px;
	box-shadow : 0 calc( 1 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 4% , transparent );
	.toc_title{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 5 * var( --remBase ) );
		align-items : center;
		justify-content : start;
		padding-bottom : calc( 8 * var( --remBase ) );
		font-size : calc( 14 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.8;
		color : var( --categoryColor );
		border-bottom-color : currentColor;
		border-bottom-style : solid;
		border-bottom-width : calc( 2 * var( --remBase ) );
		&::before{
			display : block;
			width : auto;
			height : calc( 14 * var( --remBase ) );
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/ui/icon/menu.svg" ) left top / contain no-repeat;
			filter : invert( 67% ) sepia( 10% ) saturate( 594% ) hue-rotate( 175deg ) brightness( 95% ) contrast( 86% );
		}
	}
	.toc_list{
		margin-top : calc( 10 * var( --remBase ) );
		> li + li{
			margin-top : calc( 8 * var( --remBase ) );
		}
	}
	a{
		display : block;
		display : grid;
		grid-template-columns : auto 1fr;
		grid-auto-flow : column;
		column-gap : .25em;
		align-items : start;
		justify-content : start;
		font-weight : 600;
		.toc_number{
			color : var( --categoryColor );
		}
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 12 * var( --remBase ) );
		padding-inline : calc( 14 * var( --contentBase ) );
		margin-top : calc( 24 * var( --remBase ) );
		.toc_list{
			ul{
				margin-left : calc( 13 * var( --remBase ) );
			}
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.4;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 16 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 940 );
		margin-top : calc( 16 * var( --remBase ) );
		.toc_list{
			ul{
				margin-left : calc( 14 * var( --remBase ) );
			}
		}
		a{
			padding-block : calc( 6 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 19.6 / 14 );
		}
	}
}
@media ( hover : hover ){
	#toc a:hover{
		color : var( --categoryColor );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#toc a{
		transition : color var( --transitionBase );
	}
}
.editor-styles-wrapper{
	margin-top : calc( 32 * var( --remBase ) );
}

/* --------------------------------------------
ARCHIVEMENTS
--------------------------------------------- */
#archivements{
	header{
		time{
			display : block;
			width : fit-content;
			margin-left : auto;
			font-weight : 600;
			background-color : #ffea80;
		}
		h1{
			font-weight : 700;
			color : var( --blue02 );
			text-align : center;
		}
	}
	.infos{
		background-color : #fef8e8;
		figure{
			img{
				background-color : white;
				border-radius : 50%;
			}
		}
		figcaption{
			display : flex;
			flex-wrap : wrap;
			column-gap : .5em;
			align-items : start;
			justify-content : center;
			font-weight : 500;
			> span:nth-of-type( 3 ){
				width : 100%;
				text-align : center;
			}
		}
	}
	h3{
		font-weight : 700;
		color : var( --blue03 );
	}
	dl{
		display : grid;
	}
	dt{
		display : grid;
		place-items : center;
		font-weight : 500;
		color : white;
		background-color : var( --blue03 );
	}
	dd{
		font-weight : 500;
	}
	.pics{
		picture{
			position : relative;
			width : 100%;
			overflow : hidden;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				z-index : 1;
				display : grid;
				place-items : center;
				font-weight : 500;
				color : white;
				border-radius : 0 100vmax 100vmax 0;
			}
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
		li:nth-child( 1 ) picture{
			&::before{
				content : "Before";
				background-color : #31b193;
			}
		}
		li:nth-child( 2 ) picture{
			&::before{
				content : "After";
				background-color : var( --blue );
			}
		}
	}
	p{
		font-weight : 500;
	}
	.link01{
		line-height : 1.5;
	}
	@media screen and ( width <= 768px ){
		header{
			time{
				padding-block : calc( 3 * var( --remBase ) );
				padding-inline : calc( 6 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.5;
			}
			h1{
				margin-top : calc( 92 * var( --remBase ) );
				font-size : calc( 32.4 * var( --remBase ) );
				line-height : calc( 48.6 / 32.4 );
			}
		}
		.wrap02{
			padding-bottom : calc( 60 * var( --remBase ) );
		}
		.box{
			margin-top : calc( 48 * var( --remBase ) );
		}
		.pics{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 224 * var( --contentBase ) ) );
			align-items : start;
			justify-content : space-between;
			picture{
				height : calc( 256 * var( --remBase ) );
				border-radius : 0 calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) );
				&::before{
					width : calc( 112 * 100% / 224 );
					height : calc( 42 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
				}
			}
		}
		.infos{
			padding-block : calc( 32 * var( --remBase ) );
			padding-inline : calc( 32 * var( --contentBase ) );
			margin-top : calc( 24 * var( --remBase ) );
		}
		figure{
			img{
				display : block;
				height : calc( 225 * var( --remBase ) );
				margin-inline : auto;
			}
		}
		figcaption{
			margin-top : calc( 18 * var( --remBase ) );
			span{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		h3{
			margin-top : calc( 24 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.5;
		}
		dl{
			grid-template-columns : calc( 138 * 100% / 392 ) 1fr;
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 24 * 100% / 392 );
			margin-top : calc( 12 * var( --remBase ) );
		}
		dt{
			height : calc( 34 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			border-radius : calc( 4 * var( --remBase ) );
		}
		dd{
			padding-top : calc( 3.5 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
		}
		p{
			margin-top : calc( 36 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
		}
		.link01{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			time{
				padding-block : calc( 3 * var( --remBase ) );
				padding-inline : calc( 6 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
			h1{
				margin-top : calc( 100 * var( --remBase ) );
				font-size : calc( 35 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		.wrap02{
			padding-bottom : calc( 60 * var( --remBase ) );
		}
		.box{
			display : grid;
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 716 * 100% / 1080 ) calc( 324 * 100% / 1080 );
			row-gap : calc( 40 * var( --remBase ) );
			align-items : start;
			justify-content : space-between;
			margin-top : calc( 56 * var( --remBase ) );
		}
		.infos{
			display : grid;
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 200 * 100% / 656 ) 1fr;
			grid-row : 1;
			grid-column : 1;
			row-gap : calc( 20 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 656 );
			padding-block : calc( 30 * var( --remBase ) );
			padding-inline : calc( 30 * 100% / 716 );
			border-radius : calc( 10 * var( --remBase ) );
			figure{
				grid-row : 1/-1;
				grid-column : 1;
				align-self : start;
				img{
					height : calc( 200 * var( --remBase ) );
				}
			}
			figcaption{
				margin-top : calc( 16 * var( --remBase ) );
				span{
					font-size : calc( 18 * var( --remBase ) );
					line-height : 1.5;
				}
			}
			h3{
				grid-row : 1;
				grid-column : 2;
				font-size : calc( 24 * var( --remBase ) );
				line-height : 1.5;
			}
			dl{
				grid-template-columns : calc( 130 * 100% / 436 ) 1fr;
				grid-row : 2;
				grid-column : 2;
				row-gap : calc( 8 * var( --remBase ) );
				column-gap : calc( 20 * 100% / 436 );
			}
			dt{
				height : calc( 32 * var( --remBase ) );
				font-size : calc( 17 * var( --remBase ) );
				border-radius : calc( 4 * var( --remBase ) );
			}
			dd{
				padding-top : calc( 1 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		.pics{
			grid-row : 1/-1;
			grid-column : 2;
			li{
				width : 100%;
				+ li{
					margin-top : calc( 16 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 370 * var( --remBase ) );
				border-radius : 0 calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
				&::before{
					width : calc( 100 * 100% / 324 );
					height : calc( 38 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
				}
			}
		}
		p{
			grid-row : 2;
			grid-column : 1;
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.5;
		}
		.link01{
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}