@charset "UTF-8";

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media print , screen and ( min-width : 751px ){
	#column{
		display : grid;
		grid-template-columns : calc( 860 var( --percentBase02 ) ) calc( 280 var( --percentBase02 ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( ( 55 - 3 ) var( --remBase ) );
		padding-bottom : calc( ( 60 - 2 ) var( --remBase ) );
	}
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebar h4{
	font-weight : 700;
	border-bottom-color : #000;
	border-bottom-style : solid;
}
#sidebar h4::after{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	filter : invert( 83% ) sepia( 43% ) saturate( 408% ) hue-rotate( 342deg ) brightness( 102% ) contrast( 95% );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#sidebar a{
	display : grid;
	align-items : start;
	font-weight : 700;
	color : #3b2619;
}
#sidebar a::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/parts/star01.svg" ) var( --bgContain );
}
@media screen and ( max-width : 750px ){
	#sidebar{
		padding-bottom : calc( ( 136 - 3 ) var( --remBase ) );
		margin-top : calc( ( 117 - 2.8 - 1 ) var( --remBase ) );
	}
	#sidebar h4{
		font-size : calc( 34 var( --remBase ) );
		line-height : calc( 36 / 34 );
		color : #3b2619;
	}
	#sidebar h4::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( ( 22 - 1 ) var( --remBase ) );
		background-image : url( "../images/ui/parts/border03_sp.svg" );
	}
	#sidebar :where( ul,ol ){
		margin-top : calc( ( 22  3 ) var( --remBase ) );
	}
	#sidebar li + li{
		margin-top : calc( ( 31 - 3 - 3 ) var( --remBase ) );
	}
	#sidebar a{
		grid-template-columns : calc( 22 var( --percentBase02 ) ) auto;
		column-gap : calc( 12 var( --percentBase02 ) );
		font-size : calc( 30 var( --remBase ) );
		line-height : 1.2;
	}
	#sidebar a::before{
		height : calc( 25 var( --remBase ) );
		margin-top : calc( 5.5 var( --remBase ) );
	}
	#sidebar :where( ul,ol ) + h4{
		margin-top : calc( ( 100 - 3 - 1 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#sidebar h4{
		font-size : calc( 30 var( --remBase ) );
		line-height : 1.2;
		color : #5c5754;
	}
	#sidebar h4::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( ( 19 - 3 ) var( --remBase ) );
		background-image : url( "../images/ui/parts/border03_short_pc.svg" );
	}
	#sidebar :where( ul,ol ){
		margin-top : calc( ( 19  8 ) var( --remBase ) );
	}
	#sidebar li + li{
		margin-top : calc( ( 19 - 8 - 8 ) var( --remBase ) );
	}
	#sidebar a{
		grid-template-columns : calc( 13 * 100% / 280 ) auto;
		column-gap : calc( 5 * 100% / 280 );
		font-size : calc( 20 var( --remBase ) );
		line-height : 1.8;
	}
	#sidebar a::before{
		height : calc( 15 var( --remBase ) );
		margin-top : calc( 10.5 var( --remBase ) );
	}
	#sidebar :where( ul,ol ) + h4{
		margin-top : calc( ( 57 - 8 - 3 ) var( --remBase ) );
	}
}

/* --------------------------------------------
ARCHIVES
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#archives{
		padding-top : calc( 62 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#archives{
		padding-top : calc( 18 var( --remBase ) );
	}
	#archives .title01::after{
		width : calc( 311 * 100% / 860 );
	}
}
.posts01 > li > h3{
	font-weight : 700;
	line-height : 1.2;
}
.posts01 > li > h3::after{
	display : block;
	width : 100%;
	content : "";
	filter : invert( 83% ) sepia( 43% ) saturate( 408% ) hue-rotate( 342deg ) brightness( 102% ) contrast( 95% );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
.posts01 .labels{
	display : flex;
	flex-wrap : wrap;
}
.posts01 .labels :where( a , time ){
	display : grid;
	place-items : center;
	font-weight : 500;
	color : #535251;
}
.posts01 .labels a{
	transition : opacity var( --transitionBase );
}
.posts01 .labels a:hover{
	opacity : .8;
}
.posts01 .category{
	background-color : var( --bgColor );
}
.posts01 .tag{
	border-color : var( --siteYellow );
	border-style : solid;
}
.posts01 > li > a{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 500;
	color : #535251;
	background-color : var( --siteYellow );
	transition : opacity var( --transitionBase );
}
.posts01 > li > a:hover{
	opacity : .8;
}
@media screen and ( max-width : 750px ){
	.posts01{
		margin-top : calc( ( 64 - 3.4 ) var( --remBase ) );
	}
	.posts01 > li + li{
		margin-top : calc( ( 91 - 7 - 3.4 ) var( --remBase ) );
	}
	.posts01 > li > h3{
		font-size : calc( 34 var( --remBase ) );
		color : #3b2619;
	}
	.posts01 > li > h3::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( ( 15 - 3.4 ) var( --remBase ) );
		background-image : url( "../images/ui/parts/border03_sp.svg" );
	}
	.posts01 .labels{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 var( --percentBase02 ) );
		margin-top : calc( 21 var( --remBase ) );
	}
	.posts01 .labels :where( a , time ){
		height : calc( 50 var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 28.8 / 26 );
	}
	.posts01 .labels a{
		padding-inline : calc( 20 var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	.posts01 .labels .tag{
		border-width : calc( 2 var( --remBase ) );
	}
	.posts01 .labels a + time{
		padding-left : calc( 6 var( --remBase ) );
	}
	.posts01 .contents{
		margin-top : calc( ( 34 - 7 ) var( --remBase ) );
	}
	.posts01 > li > a{
		width : calc( 460 var( --percentBase02 ) );
		height : calc( 60 var( --remBase ) );
		margin-top : calc( ( 36 - 7 ) var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
		border-radius : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.posts01{
		margin-top : calc( ( 66 - 3 ) var( --remBase ) );
	}
	.posts01 > li + li{
		margin-top : calc( ( 102 - 5.4 - 3 ) var( --remBase ) );
	}
	.posts01 > li > h3{
		font-size : calc( 30 var( --remBase ) );
		color : #5c5754;
	}
	.posts01 > li > h3::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( ( 15 - 3 ) var( --remBase ) );
		background-image : url( "../images/ui/parts/border03_long_pc.svg" );
	}
	.posts01 .labels{
		row-gap : calc( 6 var( --remBase ) );
		column-gap : calc( 6 * 100% / 860 );
		margin-top : calc( 12 var( --remBase ) );
	}
	.posts01 .labels :where( a , time ){
		height : calc( 33 var( --remBase ) );
		font-size : calc( 16 var( --remBase ) );
		line-height : 1.8;
	}
	.posts01 .labels a{
		padding-inline : calc( 12 var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	.posts01 .labels .tag{
		border-width : calc( 2 var( --remBase ) );
	}
	.posts01 .labels a + time{
		padding-left : calc( 18 var( --remBase ) );
	}
	.posts01 .contents{
		margin-top : calc( ( 18 - 5.4 ) var( --remBase ) );
	}
	.posts01 > li > a{
		width : calc( 318 * 100% / 860 );
		height : calc( 50 var( --remBase ) );
		margin-top : calc( ( 20 - 5.4 ) var( --remBase ) );
		font-size : calc( 18 var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
}
#paginationArchive{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#paginationArchive .page-numbers , #paginationArchive .current{
	position : relative;
	display : grid;
	place-items : center;
}
#paginationArchive .prev , #paginationArchive .next{
	white-space : nowrap;
}
#paginationArchive .prev{
	position : absolute;
	top : 50%;
	right : 100%;
	translate : 0 -50%;
}
#paginationArchive .next{
	position : absolute;
	top : 50%;
	left : 100%;
	translate : 0 -50%;
}
#paginationArchive a , #paginationArchive .current{
	display : grid;
	place-items : center;
}
#paginationArchive .dots{
	display : grid;
	place-items : center;
}
#paginationArchive :where( a , span ){
	font-weight : 700;
	line-height : 1.2;
}
#paginationArchive :where( a:not( .prev, .next ), span ){
	padding-left : .5em;
	padding-right : .5em;
}
#paginationArchive a{
	transition : opacity var( --transitionBase );
}
#paginationArchive a:hover{
	opacity : .8;
}
#paginationArchive :where( .prev , .next ){
	grid-auto-flow : column;
}
#paginationArchive .prev::before{
	content : "＜";
}
#paginationArchive .prev::after , #paginationArchive .next::before{
	white-space : pre;
	content : "　｜　";
}
#paginationArchive .next::after{
	content : "＞";
}
@media screen and ( max-width : 750px ){
	#paginationArchive{
		margin-top : calc( ( 118 - 2.8 ) var( --remBase ) );
	}
	#paginationArchive :where( a , span ){
		font-size : calc( 28 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#paginationArchive{
		margin-top : calc( ( 111 - 5.4 - 2 ) var( --remBase ) );
	}
	#paginationArchive :where( a , span ){
		font-size : calc( 20 var( --remBase ) );
	}
}
#single > h2{
	font-weight : 700;
	line-height : 1.2;
}
#single > h2::after{
	display : block;
	width : 100%;
	content : "";
	filter : invert( 83% ) sepia( 43% ) saturate( 408% ) hue-rotate( 342deg ) brightness( 102% ) contrast( 95% );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#single .labels{
	display : flex;
	flex-wrap : wrap;
}
#single .labels :where( a , time ){
	display : grid;
	place-items : center;
	font-weight : 500;
	color : #535251;
}
#single .labels a{
	transition : opacity var( --transitionBase );
}
#single .labels a:hover{
	opacity : .8;
}
#single .category{
	background-color : var( --bgColor );
}
#single .tag{
	border-color : var( --siteYellow );
	border-style : solid;
}
#single > li > a{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 500;
	color : #535251;
	background-color : var( --siteYellow );
	transition : opacity var( --transitionBase );
}
#single > li > a:hover{
	opacity : .8;
}
@media screen and ( max-width : 750px ){
	#single{
		padding-top : calc( ( 50 - 1 ) var( --remBase ) );
	}
	#single > h2{
		font-size : calc( 34 var( --remBase ) );
		color : #3b2619;
	}
	#single > h2::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( ( 15 - 3.4 ) var( --remBase ) );
		background-image : url( "../images/ui/parts/border03_sp.svg" );
	}
	#single .labels{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 var( --percentBase02 ) );
		margin-top : calc( 21 var( --remBase ) );
	}
	#single .labels :where( a , time ){
		height : calc( 50 var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 28.8 / 26 );
	}
	#single .labels a{
		padding-inline : calc( 20 var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#single .labels .tag{
		border-width : calc( 2 var( --remBase ) );
	}
	#single .labels a + time{
		padding-left : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#single > h2{
		font-size : calc( 30 var( --remBase ) );
		color : #5c5754;
	}
	#single > h2::after{
		height : calc( 4 var( --remBase ) );
		margin-top : calc( ( 15 - 3 ) var( --remBase ) );
		background-image : url( "../images/ui/parts/border03_long_pc.svg" );
	}
	#single .labels{
		row-gap : calc( 6 var( --remBase ) );
		column-gap : calc( 6 * 100% / 860 );
		margin-top : calc( 12 var( --remBase ) );
	}
	#single .labels :where( a , time ){
		height : calc( 33 var( --remBase ) );
		font-size : calc( 16 var( --remBase ) );
		line-height : 1.8;
	}
	#single .labels a{
		padding-inline : calc( 12 var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	#single .labels .tag{
		border-width : calc( 2 var( --remBase ) );
	}
	#single .labels a + time{
		padding-left : calc( 18 var( --remBase ) );
	}
}
:where( .contents , #content ) img{
	display : inline;
}
@media screen and ( max-width : 750px ){
	:where( .contents , #content ){
		margin-top : calc( ( 34 - 7 ) var( --remBase ) );
	}
	:where( .contents , #content ) *{
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 40 / 26 );
	}
	:where( .contents , #content ) > * + *{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	:where( .contents , #content ){
		margin-top : calc( ( 18 - 5.4 ) var( --remBase ) );
	}
	:where( .contents , #content ) *{
		font-size : calc( 18 var( --remBase ) );
		line-height : 1.6;
	}
	:where( .contents , #content ) > * + *{
		margin-top : calc( 28.8 var( --remBase ) );
	}
}
#paginationSingle{
	position : relative;
	width : 100%;
}
#paginationSingle a{
	backface-visibility : hidden;
	display : flex;
	align-items : center;
	justify-content : center;
}
#paginationSingle .archive{
	margin-left : auto;
	margin-right : auto;
}
#paginationSingle .prev , #paginationSingle .next{
	position : absolute;
	top : 0;
}
#paginationSingle .prev{
	left : 0;
}
#paginationSingle .next{
	right : 0;
}
#paginationSingle a{
	font-weight : 700;
	color : #5c5754;
	transition : opacity var( --transitionBase );
}
#paginationSingle a:hover{
	opacity : .8;
}
@media screen and ( max-width : 750px ){
	#paginationSingle{
		margin-top : calc( ( 87 - 7 - 2.8 ) var( --remBase ) );
	}
	#paginationSingle a{
		font-size : calc( 28 var( --remBase ) );
	}
	#paginationSingle .prev{
		left : calc( 139 var( --percentBase02 ) );
	}
	#paginationSingle .next{
		right : calc( 139 var( --percentBase02 ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#paginationSingle{
		margin-top : calc( ( 101 - 5.4 - 2 ) var( --remBase ) );
	}
	#paginationSingle a{
		font-size : calc( 20 var( --remBase ) );
	}
	#paginationSingle .prev{
		left : calc( 285 * 100% / 860 );
	}
	#paginationSingle .next{
		right : calc( 285 * 100% / 860 );
	}
}