@charset "UTF-8";

/* --------------------------------------------
RESET DEFAULT CMS STYLES
--------------------------------------------- */
#content{
	display : contents;
}
:where( #container , #container-inner , #top-editarea ){
	display : contents;
}
:where( #content ){
	display : contents;
	width : 100%;
}
:where( #header-modules ){
	display : contents;
}
.hatena-module{
	margin-bottom : inherit;
}
a:hover{
	text-decoration : inherit;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakpoint ) );
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakpoint ) );
	}
}
@media print , screen and ( min-width : 1150px ){
	html{
		font-size : 10px;
	}
}
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 138 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	:root{
		--headerHeight : calc( 134 var( --remBase ) );
	}
}
body{
	padding-top : var( --headerHeight );
	background-color : #f6ddda;
	scroll-padding-top : var( --headerHeight );
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	background-color : #fff;
}
@media screen and ( max-width : 750px ){
	.wrap{
		padding-inline : calc( 40 * 100% / var( --breakpoint ) );
	}
}
@media print , screen and ( min-width : 1150px ){
	.wrap{
		width : 1150px;
		margin-inline : auto;
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	.wrap.column01{
		padding-inline : calc( 155 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 1150px ){
	.wrap.column01{
		padding-left : 155px;
		padding-right : 155px;
	}
}
.wrap-pc{
	background-color : #fff;
}
@media print , screen and ( min-width : 1150px ){
	.wrap-pc{
		width : 1150px;
		margin-inline : auto;
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@layer{
	@media screen and ( max-width : 750px ){
		.is-pc{
			display : none;
		}
	}
	@media screen and ( max-width : 750px ){
		.is-tb{
			display : none;
		}
	}
	@media print , screen and ( min-width : 1150px ){
		.is-tb{
			display : none;
		}
	}
	@media print , screen and ( min-width : 751px ){
		.is-sp{
			display : none;
		}
	}
}

/* --------------------------------------------
COMMON
--------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-both]::before{
	white-space : pre;
	content : attr( data-both );
}
[data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( max-width : 750px ){
	[data-sp-after]::after{
		white-space : pre;
		content : attr( data-sp-after );
	}
}
@media screen and ( max-width : 750px ){
	[data-sp-before]::before{
		white-space : pre;
		content : attr( data-sp-before );
	}
}
@media print , screen and ( min-width : 751px ){
	[data-pc-after]::after{
		white-space : pre;
		content : attr( data-pc-after );
	}
}
@media print , screen and ( min-width : 751px ){
	[data-pc-before]::before{
		white-space : pre;
		content : attr( data-pc-before );
	}
}

/* --------------------------------------------
LAYOUT
  HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : start;
	border-bottom-color : transparent;
	border-bottom-style : solid;
	border-image-source : linear-gradient( 90deg , rgb( 255 255 255 / 1 ) 0% , rgb( 249 246 250 / 1 ) 4.02% , rgb( 234 220 237 / 1 ) 10.68% , rgb( 232 217 235 / 1 ) 11.42% , rgb( 237 218 234 / 1 ) 20% , rgb( 246 221 216 / 1 ) 40% , rgb( 221 237 235 / 1 ) 60% , rgb( 226 238 237 / 1 ) 80% , rgb( 236 237 237 / 1 ) 100% );
	border-image-slice : 1;
}
#header > a:nth-of-type( 1 ){
	grid-row : 1;
	grid-column : 2;
}
#header > a:nth-of-type( 2 ){
	grid-row : 1;
	grid-column : 4;
}
#header #menuBtn{
	grid-row : 1;
	grid-column : 6;
}
#header #searchBtn{
	grid-row : 1;
	grid-column : 8;
}
@media screen and ( max-width : 1149px ){
	#header{
		width : 100%;
	}
}
@media screen and ( max-width : 750px ){
	#header{
		grid-template-columns : calc( 32 * 100% / 750 ) calc( 328 * 100% / 750 ) 1fr calc( 195 * 100% / 750 ) calc( 24 * 100% / 750 ) calc( 52 * 100% / 750 ) calc( 34 * 100% / 750 ) calc( 40 * 100% / 750 ) calc( 24 * 100% / 750 );
		height : var( --headerHeight );
		padding-top : calc( 34 var( --remBase ) );
		border-bottom-width : calc( 18 var( --remBase ) );
	}
	#header > a{
		margin-top : calc( 8 var( --remBase ) );
	}
	#header #searchBtn{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#header{
		grid-template-columns : calc( 23 var( --percentBase ) ) calc( 362 var( --percentBase ) ) 1fr calc( 195 var( --percentBase ) ) calc( 42 var( --percentBase ) ) calc( 52 var( --percentBase ) ) calc( 27 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 41 var( --percentBase ) );
		height : var( --headerHeight );
		padding-top : calc( 36 var( --remBase ) );
		border-bottom-width : calc( 16 var( --remBase ) );
	}
	#header > a:nth-of-type( 2 ){
		margin-top : calc( 6 var( --remBase ) );
	}
	#header #searchBtn{
		margin-top : calc( 7 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 1150px ){
	#header{
		right : 0;
	}
}

/* --------------------------------------------
LAYOUT
  MENU BUTTON
--------------------------------------------- */
#menuBtn{
	z-index : 12;
	overflow : hidden;
}
#menuBtn > span:nth-of-type( 1 ){
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
}
#menuBtn span span{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	transition : all .4s;
}
#menuBtn span span:nth-of-type( 1 ){
	top : 0;
}
#menuBtn span span:nth-of-type( 4 ){
	bottom : 0;
}
#menuBtn{
	aspect-ratio : 1;
	background-color : var( --primary );
	border-radius : 50%;
}
#menuBtn > span:first-of-type{
	height : calc( 26 var( --remBase ) );
}
#menuBtn span span{
	background-color : #fff;
}
#menuBtn{
	padding-block : calc( 13 var( --remBase ) );
	padding-inline : calc( 11 * 100% / 52 );
}
#menuBtn span span{
	height : calc( 4 var( --remBase ) );
}
#menuBtn span span:nth-of-type( 2 ) , #menuBtn span span:nth-of-type( 3 ){
	top : calc( 11 var( --remBase ) );
}
body.is-open{
	overflow : hidden;
}
body.is-open #nav{
	max-height : 100dvh;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
	scale : 0;
	translate : calc( 10 var( --remBase ) ) 0;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
	rotate : -45deg;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
	rotate : 45deg;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
	scale : 0;
	translate : calc( -10 var( --remBase ) ) 0;
}

/* --------------------------------------------
LAYOUT
  NAV
--------------------------------------------- */
#nav{
	position : fixed;
	top : var( --headerHeight );
	z-index : 11;
	max-width : 0;
	height : calc( 100dvh - var( --headerHeight ) );
	max-height : calc( 100dvh - var( --headerHeight ) );
	overflow : hidden;
	overflow-y : auto;
	background-color : #f2f2f2;
	transition : max-width .3s ease-in;
}
#nav ul{
	border-block-style : solid;
	border-block-color : var( --body );
}
#nav li + li{
	border-top-color : var( --body );
	border-top-style : solid;
}
#nav a{
	display : grid;
}
#nav li:not( :last-child ) a{
	align-items : center;
	justify-content : start;
	font-weight : 700;
	letter-spacing : .11em;
}
#nav li:last-child a{
	align-content : center;
}
#nav li:last-child picture{
	font-size : 0;
}
#nav li:last-child span{
	font-weight : 700;
	letter-spacing : .03em;
}
@media screen and ( max-width : 750px ){
	#nav{
		right : 0;
		width : 100%;
	}
	#nav .scroll{
		padding-block : calc( 60 var( --remBase ) );
		padding-inline : calc( 52 * 100% / 750 );
	}
	#nav ul{
		border-block-width : calc( 4 var( --remBase ) );
	}
	#nav li + li{
		border-top-width : calc( 4 var( --remBase ) );
	}
	#nav a{
		height : calc( 156 var( --remBase ) );
	}
	#nav li:not( :last-child ) a{
		height : calc( 156 var( --remBase ) );
		font-size : 4.8rem;
	}
	#nav li:nth-child( 3 ) a{
		grid-template-columns : auto auto;
		column-gap : calc( 8 * 100% / 646 );
		align-items : end;
		justify-content : start;
	}
	#nav li:nth-child( 3 ) img{
		height : calc( 37 var( --remBase ) );
	}
	#nav li:nth-child( 3 ) span{
		font-size : 4.1rem;
	}
}
@media print , screen and ( min-width : 751px ){
	#nav .scroll{
		padding-block : calc( 34 var( --remBase ) );
		padding-inline : calc( 35 * 100% / 386 );
	}
	#nav ul{
		border-block-width : calc( 3 var( --remBase ) );
	}
	#nav li + li{
		border-top-width : calc( 3 var( --remBase ) );
	}
	#nav li:not( :last-child ) a{
		height : calc( 109 var( --remBase ) );
		font-size : 3.4rem;
	}
	#nav li:nth-child( 3 ) a{
		grid-template-rows : auto auto;
		row-gap : calc( 10 var( --remBase ) );
		height : calc( 139 var( --remBase ) );
	}
	#nav li:nth-child( 3 ) a picture img{
		height : calc( 28 var( --remBase ) );
	}
	#nav li:nth-child( 3 ) a span{
		font-size : 2.7rem;
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	#nav{
		right : 0;
		width : calc( 386 * 100% / 1150 );
	}
}
@media print , screen and ( min-width : 1150px ){
	#nav{
		right : calc( 50% - 575px );
		width : 386px;
	}
}
body.is-open{
	max-height : calc( 100dvh - var( --headerHeight ) );
}
@media screen and ( max-width : 750px ){
	body.is-open #nav{
		max-width : 100%;
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	body.is-open #nav{
		max-width : calc( 386 * 100% / 1150 );
	}
}
@media print , screen and ( min-width : 1150px ){
	body.is-open #nav{
		max-width : 386px;
	}
}

/* --------------------------------------------
SEARCH BUTTONS AND FORM
--------------------------------------------- */
#searchBtn{
	aspect-ratio : 1;
}
#searchBtn img{
	filter : invert( 26% ) sepia( 21% ) saturate( 5527% ) hue-rotate( 337deg ) brightness( 101% ) contrast( 111% );
}
#searchBox{
	position : fixed;
	z-index : 12;
	display : grid;
	align-items : center;
	justify-content : space-between;
	max-height : 0;
	overflow : hidden;
	transition : max-height .1s ease-in;
}
#searchBox form{
	display : grid;
	grid-row : 1;
	grid-column : 1;
	justify-content : space-between;
	overflow : hidden;
	background-color : #666767;
}
#searchBox form :where( input,button ){
	grid-row : 1;
	height : 100%;
}
#searchBox form input{
	padding-inline : 1em;
	letter-spacing : .06em;
}
#searchBox form input::placeholder{
	color : #666;
}
#searchBox form button{
	display : grid;
	place-items : center;
	background-color : var( --primary );
}
#searchBox form button img{
	filter : invert( 100% ) sepia( 0% ) saturate( 7500% ) hue-rotate( 335deg ) brightness( 102% ) contrast( 102% );
}
#searchBox > button{
	grid-row : 1;
	grid-column : 2;
	aspect-ratio : 1;
}
@media screen and ( max-width : 750px ){
	#searchBox{
		top : calc( 94 var( --remBase ) );
		right : calc( 24 * 100% / 750 );
		grid-template-columns : calc( 528 * 100% / 576 ) calc( 38 * 100% / 576 );
		width : calc( 576 * 100% / 750 );
	}
	#searchBox form{
		grid-template-columns : 1fr calc( 76 * 100% / 520 );
		column-gap : calc( 4 * 100% / 520 );
		height : calc( 72 var( --remBase ) );
		padding-block : calc( 4 var( --remBase ) );
		padding-inline : calc( 4 * 100% / 528 );
		border-radius : calc( 8 var( --remBase ) );
	}
	#searchBox form input{
		font-size : calc( 22 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) ) 0 0 calc( 8 var( --remBase ) );
	}
	#searchBox form button{
		border-radius : 0 calc( 8 var( --remBase ) ) calc( 8 var( --remBase ) ) 0;
	}
	#searchBox form button img{
		height : calc( 36 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#searchBox{
		top : calc( 100 var( --remBase ) );
		grid-template-columns : calc( 354 * 100% / 383 ) calc( 26 * 100% / 383 );
	}
	#searchBox form{
		grid-template-columns : 1fr calc( 46 * 100% / 348 );
		column-gap : calc( 2 * 100% / 348 );
		height : calc( 49 var( --remBase ) );
		padding-block : calc( 3 var( --remBase ) );
		padding-inline : calc( 3 * 100% / 354 );
		border-radius : calc( 4 var( --remBase ) );
	}
	#searchBox form input{
		font-size : calc( 15 var( --remBase ) );
		border-radius : calc( 3 var( --remBase ) ) 0 0 calc( 3 var( --remBase ) );
	}
	#searchBox form button{
		border-radius : 0 calc( 3 var( --remBase ) ) calc( 3 var( --remBase ) ) 0;
	}
	#searchBox form button img{
		height : calc( 25 var( --remBase ) );
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	#searchBox{
		left : calc( 723 var( --percentBase ) );
		width : calc( 383 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 1150px ){
	#searchBox{
		left : calc( 50% + 148px );
		width : 383px;
	}
}
@media screen and ( max-width : 750px ){
	#searchBox.is-open{
		max-height : calc( 72 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#searchBox.is-open{
		max-height : calc( 49 var( --remBase ) );
	}
}
#mv{
	position : relative;
	overflow : hidden;
}
#mv::before{
	position : absolute;
	z-index : 0;
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-size : contain;
}
#mv p{
	position : relative;
	z-index : 1;
	font-weight : 700;
	letter-spacing : .11em;
}
#mv a{
	position : relative;
	display : grid;
	place-items : center;
	font-weight : 700;
	color : #fff;
	text-align : center;
	text-indent : .07em;
	letter-spacing : .07em;
	background-color : var( --primary );
	transition : opacity .3s ease-in;
}
#mv a:hover{
	opacity : .8;
}
@media screen and ( max-width : 750px ){
	#mv{
		padding-top : calc( ( 585 - 17 ) var( --remBase ) );
		padding-bottom : calc( 62 var( --remBase ) );
	}
	#mv::before{
		top : 0;
		left : 0;
		width : 100%;
		height : calc( 946 var( --remBase ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482945692977" );
	}
	#mv p{
		padding-left : calc( 40 var( --percentBase ) );
		font-size : calc( 28 var( --remBase ) );
		line-height : calc( 62 / 28 );
	}
	#mv p + p{
		margin-top : calc( ( 31 - 1.5 ) var( --remBase ) );
	}
	#mv a{
		width : 100%;
		height : calc( 54 var( --remBase ) );
		margin-top : calc( ( 59 - 17 ) var( --remBase ) );
		font-size : calc( 32 var( --remBase ) );
		border-radius : calc( 10 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#mv{
		height : calc( 666 var( --remBase ) );
		padding-top : calc( ( 133 - 17 ) var( --remBase ) );
	}
	#mv::before{
		top : 0;
		left : 0;
		width : 100%;
		height : calc( 666 var( --remBase ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482943855329" );
	}
	#mv p{
		margin-left : calc( 86 var( --percentBase ) );
		font-size : calc( 28 var( --remBase ) );
		line-height : calc( 62 / 28 );
	}
	#mv p + p{
		margin-top : calc( ( 31 - 17 ) var( --remBase ) );
	}
	#mv a{
		width : calc( 450 var( --percentBase ) );
		height : calc( 36 var( --remBase ) );
		margin-top : calc( ( 138 - 1.5 ) var( --remBase ) );
		margin-left : calc( 34 var( --percentBase ) );
		font-size : calc( 21 var( --remBase ) );
		border-radius : calc( 10 var( --remBase ) );
	}
}
.page-entry #content-inner , .page-archive #content-inner , .page-archive-category #content-inner{
	background-color : #fff;
}
@media print , screen and ( min-width : 751px ){
	.page-entry #content-inner , .page-archive #content-inner , .page-archive-category #content-inner{
		display : grid;
		margin : 0;
	}
	.page-entry :where( #wrapper , #main , #main-inner ) , .page-archive :where( #wrapper , #main , #main-inner ) , .page-archive-category :where( #wrapper , #main , #main-inner ){
		display : contents;
	}
	.page-entry #box2 , .page-archive #box2 , .page-archive-category #box2{
		all : inherit;
		box-sizing : border-box;
		display : block;
		width : 100%;
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	.page-entry #content-inner , .page-archive #content-inner , .page-archive-category #content-inner{
		width : 100%;
	}
}
@media print , screen and ( min-width : 1150px ){
	.page-entry #content-inner , .page-archive #content-inner , .page-archive-category #content-inner{
		width : 1150px;
		margin-inline : auto;
	}
}

/* --------------------------------------------
ENTRY
--------------------------------------------- */
.page-entry #box1{
	display : none;
}
.page-entry .pager{
	display : none;
}
.page-entry :where( article.entry , .entry-inner , .entry-header , .entry-content , #entry-header-modules ){
	display : contents;
}
.page-entry #thumbnail{
	margin : 0;
}
.page-entry #thumbnail img{
	width : 100%;
	height : auto;
}
.page-entry .entry-title{
	margin-block : 0;
	font-weight : 700;
}
.page-entry .entry-title a:hover{
	-webkit-text-decoration : none;
	text-decoration : none;
}
.page-entry .entry-categories{
	display : flex;
	flex-wrap : wrap;
	margin : 0;
}
.page-entry .entry-categories a{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : #000;
	cursor : pointer;
	border-color : var( --tagBorderColor );
	border-style : solid;
}
.page-entry .entry-categories a:hover{
	color : #000;
}
.page-entry .entry-date span{
	font-weight : 700;
	line-height : 1;
	color : var( --body );
}
.page-entry .entry-date .hyphen{
	font-size : 0;
}
.page-entry .entry-date .hyphen::before{
	content : ".";
}
.page-entry #lede{
	margin-block : 0;
	font-weight : 700;
}
.page-entry #box2{
	padding : 0;
	font-size : inherit;
}
.page-entry .entry-footer{
	display : none;
}
@media screen and ( max-width : 750px ){
	.page-entry #content-inner{
		display : block;
	}
	.page-entry #main-inner{
		display : grid;
		grid-template-columns : 100%;
	}
	.page-entry #thumbnail{
		order : 1;
		width : 100%;
	}
	.page-entry .entry-title{
		order : 2;
		padding-inline : calc( 40 * 100% / 750 );
		margin-top : calc( ( 41 - 14 ) var( --remBase ) );
	}
	.page-entry .entry-title a{
		font-size : calc( 54 var( --remBase ) );
		line-height : calc( 82 / 54 );
	}
	.page-entry .entry-categories{
		row-gap : calc( 18 var( --remBase ) );
		column-gap : calc( 18 var( --percentBase ) );
		order : 3;
		padding-inline : calc( 40 * 100% / 750 );
		margin-top : calc( ( 33 - 14 ) var( --remBase ) );
	}
	.page-entry .entry-categories a{
		width : calc( 154 var( --percentBase ) );
		height : calc( 40 var( --remBase ) );
		font-size : calc( 22 var( --remBase ) );
		border-width : calc( 4 var( --percentBase ) );
	}
	.page-entry .entry-date{
		order : 4;
		padding-inline : calc( 40 * 100% / 750 );
		margin-top : calc( 22 var( --remBase ) );
	}
	.page-entry .entry-date span{
		font-size : calc( 30 var( --remBase ) );
	}
	.page-entry .entry-date .hyphen::before{
		font-size : calc( 30 var( --remBase ) );
	}
	.page-entry #lede{
		order : 5;
		padding-inline : calc( 40 * 100% / 750 );
		margin-top : calc( ( 46 - 11 ) var( --remBase ) );
		font-size : calc( 31 var( --remBase ) );
		line-height : calc( 53 / 31 );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-entry #content-inner{
		grid-template-rows : calc( 400 var( --remBase ) ) calc( ( 25 - 9.5 ) var( --remBase ) ) auto calc( ( 23 - 9.5 ) var( --remBase ) ) auto calc( 9 var( --remBase ) ) auto calc( ( 24 - 9.5 ) var( --remBase ) ) auto calc( ( 50 - 9.5 ) var( --remBase ) ) auto;
		grid-template-columns : calc( 45 * 100% / 1000 ) calc( 655 * 100% / 1000 ) calc( 60 * 100% / 1000 ) calc( 240 * 100% / 1000 );
		padding-inline : calc( 75 var( --percentBase ) );
		padding-bottom : calc( 84 var( --remBase ) );
	}
	.page-entry #thumbnail{
		grid-row : 1;
		grid-column : 1/-1;
	}
	.page-entry .entry-title{
		grid-row : 3;
		grid-column : 2/3;
	}
	.page-entry .entry-title a{
		font-size : calc( 36 var( --remBase ) );
		line-height : calc( 55 / 36 );
	}
	.page-entry .entry-categories{
		grid-row : 5;
		grid-column : 2/3;
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 * 100% / 655 );
	}
	.page-entry .entry-categories a{
		width : calc( 86 * 100% / 655 );
		height : calc( 25 var( --remBase ) );
		font-size : calc( 13 var( --remBase ) );
		border-width : calc( 2 var( --percentBase ) );
	}
	.page-entry .entry-date{
		grid-row : 7;
		grid-column : 2/3;
	}
	.page-entry .entry-date span{
		font-size : calc( 20 var( --remBase ) );
	}
	.page-entry .entry-date .hyphen::before{
		font-size : calc( 20 var( --remBase ) );
	}
	.page-entry #lede{
		grid-row : 9;
		grid-column : 2/3;
		font-size : calc( 21 var( --remBase ) );
		line-height : calc( 40 / 21 );
	}
	.page-entry #contents{
		grid-row : 11/12;
		grid-column : 2/3;
	}
	.page-entry #box2{
		grid-row : 11/12;
		grid-column : 4/5;
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	.page-entry #content-inner{
		padding-inline : calc( 75 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 1150px ){
	.page-entry #content-inner{
		padding-inline : 75px;
	}
}

/* --------------------------------------------
ARCHIVE (TOP)
--------------------------------------------- */
body.archives #content-inner::before{
	display : block;
	width : 100%;
	margin-inline : auto;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
@media screen and ( max-width : 750px ){
	body.archives #content-inner::before{
		height : calc( 250 var( --remBase ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482942998561" );
	}
}
@media print , screen and ( min-width : 751px ){
	body.archives #content-inner::before{
		grid-row : -1;
		grid-column : 1/-1;
		height : calc( 280 var( --remBase ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482942998560" );
	}
}

/* --------------------------------------------
CATEGORY ARCHIVE
--------------------------------------------- */
.page-archive-category .archive-header-category{
	all : unset;
	box-sizing : border-box;
	display : grid;
	align-items : center;
	font-family : var( --fontFamily );
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
.page-archive-category .archive-header-category h2{
	all : unset;
	box-sizing : border-box;
	display : grid;
	grid-template-columns : 1fr auto 1fr;
	grid-auto-flow : column;
	align-items : center;
	justify-content : space-between;
	margin-inline : auto;
	font-family : var( --fontFamily );
	font-weight : 700;
	color : var( --body );
}
.page-archive-category .archive-header-category h2::after{
	all : unset;
	box-sizing : border-box;
	font-family : var( --fontFamily );
}
.page-archive-category .archive-header-category h2::before , .page-archive-category .archive-header-category h2::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --body );
}
.page-archive-category .archive-entries{
	all : unset;
	box-sizing : border-box;
	display : block;
	font-family : var( --fontFamily );
}
@media screen and ( max-width : 750px ){
	.page-archive-category .archive-header-category{
		height : calc( 250 var( --remBase ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482942901337" );
	}
	.page-archive-category .archive-header-category h2{
		column-gap : calc( 34 var( --percentBase ) );
		width : calc( 670 * 100% / 750 );
		font-size : calc( 44 var( --remBase ) );
		line-height : calc( 60 / 44 );
	}
	.page-archive-category .archive-header-category h2::before , .page-archive-category .archive-header-category h2::after{
		height : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-archive-category #content-inner{
		grid-template-columns : calc( 95 var( --percentBase ) ) calc( 690 var( --percentBase ) ) calc( 50 var( --percentBase ) ) calc( 240 var( --percentBase ) ) calc( 75 var( --percentBase ) );
		row-gap : calc( 50 var( --remBase ) );
		padding-bottom : calc( 95 var( --remBase ) );
	}
	.page-archive-category .archive-header-category{
		grid-row : 1;
		grid-column : 1/-1;
		height : calc( 280 var( --remBase ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482942901338" );
	}
	.page-archive-category .archive-header-category h2{
		column-gap : calc( 34 * 100% / 962 );
		width : calc( 962 var( --percentBase ) );
		font-size : calc( 44 var( --remBase ) );
		line-height : calc( 60 / 44 );
	}
	.page-archive-category .archive-header-category h2::before , .page-archive-category .archive-header-category h2::after{
		height : calc( 3 var( --remBase ) );
	}
	.page-archive-category .archive-entries{
		grid-row : 2;
		grid-column : 2/3;
	}
	.page-archive-category #box2{
		grid-row : 2;
		grid-column : 4/5;
	}
}
.page-archive .archive-heading{
	all : unset;
	box-sizing : border-box;
	display : grid;
	grid-template-columns : 1fr auto 1fr;
	align-items : center;
	justify-content : space-between;
	margin-inline : auto;
	font-family : var( --fontFamily );
	font-weight : 700;
	color : var( --body );
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
.page-archive .archive-heading::after{
	all : unset;
	box-sizing : border-box;
	font-family : var( --fontFamily );
}
.page-archive .archive-heading::before , .page-archive .archive-heading::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --body );
}
.page-archive .archive-entries{
	all : unset;
	box-sizing : border-box;
	display : block;
	font-family : var( --fontFamily );
}
@media screen and ( max-width : 750px ){
	.page-archive .archive-heading{
		column-gap : calc( 34 var( --percentBase ) );
		height : calc( 250 var( --remBase ) );
		font-size : calc( 44 var( --remBase ) );
		line-height : calc( 60 / 44 );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482942901337" );
	}
	.page-archive .archive-heading::before , .page-archive .archive-heading::after{
		height : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-archive #content-inner{
		grid-template-columns : calc( 95 var( --percentBase ) ) calc( 690 var( --percentBase ) ) calc( 50 var( --percentBase ) ) calc( 240 var( --percentBase ) ) calc( 75 var( --percentBase ) );
		row-gap : calc( 50 var( --remBase ) );
		padding-bottom : calc( 95 var( --remBase ) );
	}
	.page-archive .archive-heading{
		grid-row : 1;
		grid-column : 1/-1;
		column-gap : calc( 34 * 100% / 962 );
		height : calc( 280 var( --remBase ) );
		font-size : calc( 44 var( --remBase ) );
		line-height : calc( 60 / 44 );
		background-image : url( "https://cdn.blog.st-hatena.com/files/4207112889976147501/820878482942901338" );
	}
	.page-archive .archive-heading::before , .page-archive .archive-heading::after{
		height : calc( 3 var( --remBase ) );
	}
	.page-archive .archive-entries{
		grid-row : 2;
		grid-column : 2/3;
	}
	.page-archive #box2{
		grid-row : 2;
		grid-column : 4/5;
	}
}
@media print , screen and ( min-width : 751px ){
	body.page-archive:not( .archives, .page-archive-category ) .archive-heading{
		width : 100%;
		padding-inline : calc( 94  var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	body.page-archive.page-archive-category:not( .archives ) .archive-heading{
		width : calc( 962 var( --percentBase ) );
	}
}

/* --------------------------------------------
SEARCH RESULT
--------------------------------------------- */
.page-archive .search-result{
	display : contents;
}
.page-archive .search-result-form{
	display : none;
}
@media screen and ( max-width : 750px ){
	.page-archive .search-result + p:first-of-type{
		padding-inline : calc( 40 * 100% / var( --breakpoint ) );
		padding-top : calc( 36 var( --remBase ) );
		padding-bottom : calc( 128 var( --remBase ) );
		font-size : calc( 30 var( --remBase ) );
		line-height : 2;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-archive .search-result + p:first-of-type{
		grid-row : 2;
		grid-column : 2/3;
		font-size : calc( 21 var( --remBase ) );
		line-height : calc( 40 / 21 );
	}
}

/* --------------------------------------------
404
--------------------------------------------- */
.page404 #content-inner{
	background-color : #fff;
}
@media screen and ( max-width : 750px ){
	.page404 .entry-content{
		padding-inline : calc( 40 * 100% / var( --breakpoint ) );
		padding-top : calc( 36 var( --remBase ) );
		padding-bottom : calc( 128 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page404 #content-inner{
		display : grid;
		grid-template-columns : calc( 95 var( --percentBase ) ) calc( 690 var( --percentBase ) ) calc( 50 var( --percentBase ) ) calc( 240 var( --percentBase ) ) calc( 75 var( --percentBase ) );
		padding-top : calc( 50 var( --remBase ) );
		padding-bottom : calc( 84 var( --remBase ) );
		margin : 0;
	}
	.page404 :where( #wrapper , #main , #main-inner ){
		display : contents;
	}
	.page404 .no-entry{
		grid-row : 1;
		grid-column : 2/3;
	}
	.page404 #box2{
		all : inherit;
		box-sizing : border-box;
		display : block;
		grid-row : 1;
		grid-column : 4/5;
		width : 100%;
	}
}
@media screen and ( min-width : 751px ) and ( max-width : 1149px ){
	.page404 #content-inner{
		width : 100%;
	}
}
@media print , screen and ( min-width : 1150px ){
	.page404 #content-inner{
		width : 1150px;
		margin-inline : auto;
	}
}