@charset "UTF-8";

/* --------------------------------------------
HTML
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 162 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	:root{
		--headerHeight : 93px;
	}
}
html{
	scroll-padding : var( --headerHeight );
}
@media screen and ( max-width : 750px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakpoint ) );
	}
}
@media print , screen and ( min-width : 751px ){
	html{
		font-size : 10px;
	}
}

/* --------------------------------------------
BODY
--------------------------------------------- */
body{
	background-color : #f3eee5;
}
@media screen and ( max-width : 750px ){
	body{
		padding-top : calc( 162 var( --remBase ) );
		font-size : 2.4rem;
	}
}
@media print , screen and ( min-width : 751px ){
	body{
		min-width : calc( var( --breakpoint ) * 1px );
		padding-top : 93px;
		font-size : 16px;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	margin-left : auto;
	margin-right : auto;
}
.wrap.fluid{
	padding-left : 0;
	padding-right : 0;
}
@media print , screen and ( min-width : 751px ){
	.wrap{
		width : calc( var( --breakpoint ) * 1px );
		padding-left : 20px;
		padding-right : 20px;
	}
}
@media screen and ( max-width : 750px ){
	.wrap02{
		padding-left : calc( 45 var( --percentBase ) );
		padding-right : calc( 45 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.wrap02{
		padding-left : calc( ( 100% - 1000px ) / 2 );
		padding-right : calc( ( 100% - 1000px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap02-sp{
		padding-left : calc( 45 var( --percentBase ) );
		padding-right : calc( 45 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.wrap02-pc{
		padding-left : calc( ( 100% - 1000px ) / 2 );
		padding-right : calc( ( 100% - 1000px ) / 2 );
	}
}

/* --------------------------------------------
HATENA-MODULE
--------------------------------------------- */
.hatena-module{
	margin-bottom : 0;
}

/* --------------------------------------------
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 ( width >= 1040px ){
		.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 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#top-editarea{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	background-color : #fff;
}
#top-editarea .wrap{
	position : relative;
}
#top-editarea .wrap > a{
	display : block;
	font-size : 0;
	line-height : 1;
}
@media screen and ( max-width : 750px ){
	#top-editarea .wrap{
		display : grid;
		grid-template-rows : calc( 24 var( --remBase ) ) auto calc( 8 var( --remBase ) ) auto 1fr;
		grid-template-columns : auto auto;
		column-gap : calc( 100 * 100% / 660 );
		align-items : start;
		justify-content : start;
		width : 100%;
		height : calc( 162 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
		padding-left : calc( 45 * 100% / 750 );
		padding-right : calc( 45 * 100% / 750 );
	}
	#top-editarea .logo{
		grid-row : 1/3;
		grid-column : 1;
		align-self : start;
	}
	#top-editarea .logo img{
		height : calc( 61 var( --remBase ) );
	}
	#top-editarea .by{
		grid-row : 4;
		grid-column : 1;
		align-self : start;
	}
	#top-editarea .by img{
		height : calc( 16 var( --remBase ) );
	}
	#top-editarea .tepco{
		grid-row : 2;
		grid-column : 2;
	}
	#top-editarea .tepco img{
		height : calc( 30 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#top-editarea .wrap{
		display : flex;
		align-items : center;
		height : 93px;
	}
	#top-editarea .logo{
		margin-left : 20px;
	}
	#top-editarea .logo img{
		height : 41px;
	}
	#top-editarea .by{
		margin-left : 18px;
	}
	#top-editarea .by img{
		height : 12px;
	}
	#top-editarea .tepco{
		margin-left : auto;
		margin-right : 116px;
	}
	#top-editarea .tepco img{
		height : 16px;
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
body.is-open{
	overflow : hidden;
}
body.is-open #nav{
	max-height : 100vh;
	max-height : 100dvh;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
	rotate : -45deg;
	top : 50%;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
	rotate : 45deg;
	top : 50%;
}
#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( 2 ){
	bottom : 0;
}
#menuBtn{
	position : absolute;
	background-color : #d82b22;
}
#menuBtn span span{
	background-color : #fff;
}
@media screen and ( max-width : 750px ){
	#menuBtn{
		top : calc( 43 var( --remBase ) );
		right : calc( 121 * 100% / 750 );
		width : calc( 76 * 100% / 750 );
		height : calc( 76 var( --remBase ) );
		padding-top : calc( 24.5 var( --remBase ) );
		padding-bottom : calc( 24.5 var( --remBase ) );
		padding-left : calc( 16 var( --percentBase ) );
		padding-right : calc( 16 var( --percentBase ) );
	}
	#menuBtn span span{
		height : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#menuBtn{
		top : 26.5px;
		right : 60px;
		width : 40px;
		height : 40px;
		padding-top : 13px;
		padding-bottom : 13px;
		padding-left : 8.5px;
		padding-right : 8.5px;
	}
	#menuBtn span span{
		height : 2px;
	}
}

/* --------------------------------------------
SEARCHBTN
--------------------------------------------- */
#searchBtn{
	position : absolute;
	z-index : 11;
	display : flex;
	align-items : center;
	justify-content : center;
	background-color : #231815;
}
@media screen and ( max-width : 750px ){
	#searchBtn{
		top : calc( 43 var( --remBase ) );
		right : calc( 45 * 100% / 750 );
		width : calc( 76 * 100% / 750 );
		height : calc( 76 var( --remBase ) );
	}
	#searchBtn img{
		height : calc( 32 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#searchBtn{
		top : 26.5px;
		right : 20px;
		width : 40px;
		height : 40px;
	}
	#searchBtn img{
		height : 16px;
	}
}

/* --------------------------------------------
SEARCH FORM
--------------------------------------------- */
#top-editarea .search-form{
	position : fixed;
	left : 0;
	width : 100%;
	max-height : 0;
	overflow : hidden;
	background-color : rgb( 0 0 0 / .85 );
	transition : max-height .3s ease-in;
}
#top-editarea .search-form > .wrap{
	position : relative;
}
#top-editarea .search-form > .wrap > div{
	display : flex;
	background-color : #fff;
}
#top-editarea .search-form input[type="text"]{
	flex-grow : 1;
	height : 100%;
	letter-spacing : .05em;
	background-image : none;
	border : 0;
}
#top-editarea .search-form button[type="submit"]{
	display : flex;
	flex-shrink : 0;
	align-items : center;
	justify-content : center;
	height : 100%;
}
#top-editarea .search-form button[type="button"]{
	position : absolute;
	top : 50%;
	transform : translateY( -50% );
}
@media screen and ( max-width : 750px ){
	#top-editarea .search-form{
		top : calc( 162 var( --remBase ) );
		height : calc( 132 var( --remBase ) );
	}
	#top-editarea .search-form.is-open{
		max-height : calc( 132 var( --remBase ) );
	}
	#top-editarea .search-form > .wrap{
		display : flex;
		align-items : center;
		justify-content : flex-start;
		height : 100%;
		padding-top : 0;
		padding-left : calc( 34 var( --percentBase ) );
		padding-right : calc( 34 var( --percentBase ) );
	}
	#top-editarea .search-form > .wrap > div{
		width : calc( 590 * 100% / 682 );
		height : calc( 76 var( --remBase ) );
	}
	#top-editarea .search-form input[type="text"]{
		padding-left : calc( 28 * 100% / 682 );
		padding-right : calc( 28 * 100% / 682 );
		font-size : 2.4rem;
	}
	#top-editarea .search-form button[type="submit"]{
		width : calc( 83 * 100% / 682 );
	}
	#top-editarea .search-form button[type="submit"] img{
		height : calc( 33 var( --remBase ) );
	}
	#top-editarea .search-form button[type="button"]{
		right : calc( 44 var( --percentBase ) );
	}
	#top-editarea .search-form button[type="button"] img{
		height : calc( 42 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#top-editarea .search-form{
		top : 93px;
		height : 84px;
	}
	#top-editarea .search-form.is-open{
		max-height : 84px;
	}
	#top-editarea .search-form > .wrap > div{
		width : 565px;
		height : 41px;
		margin-left : auto;
		margin-right : auto;
	}
	#top-editarea .search-form input[type="text"]{
		padding-left : 16px;
		padding-right : 16px;
		font-size : 1.4rem;
	}
	#top-editarea .search-form button[type="submit"]{
		width : 43px;
	}
	#top-editarea .search-form button[type="submit"] img{
		height : 17px;
	}
	#top-editarea .search-form button[type="button"]{
		right : 20px;
	}
	#top-editarea .search-form button[type="button"] img{
		height : 24.5px;
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
#nav{
	background-color : #fff;
}
@media screen and ( max-width : 750px ){
	#nav{
		position : fixed;
		top : calc( 162 var( --remBase ) );
		left : 0;
		z-index : 10;
		width : 100%;
		height : calc( 100vh - ( 162 ) var( --remBase ) );
		max-height : 0;
		overflow : hidden;
		overflow-y : auto;
		transition : max-height .5s ease-in;
	}
	#nav .scroll{
		min-height : calc( 100vh - ( 162 ) var( --remBase ) );
		padding-left : calc( 73 var( --percentBase ) );
		padding-right : calc( 73 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#nav{
		position : fixed;
		top : 0;
		left : 100%;
		z-index : 11;
		max-height : 100vh;
		overflow-y : auto;
		transition : translate .5s ease-in;
		translate : 0 0;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	body.is-open #nav{
		translate : -100% 0;
	}
}
@media print , screen and ( min-width : 751px ){
	#nav{
		top : 93px;
		width : calc( 50% - ( 540px - 356px - 20px ) );
		height : calc( 100vh - 93px );
		padding-left : 20px;
		padding-right : 20px;
		background-color : #fff;
	}
	#nav .scroll{
		width : 316px;
	}
}

/* --------------------------------------------
GLOBAL NAV
--------------------------------------------- */
#navGlobal{
	width : 100%;
}
#navGlobal li + li{
	border-top-color : #231815;
	border-top-style : solid;
}
#navGlobal a{
	display : flex;
	align-items : center;
	font-weight : 600;
}
@media screen and ( max-width : 750px ){
	#navGlobal{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#navGlobal > li + li{
		border-top-width : calc( 2 var( --remBase ) );
	}
	#navGlobal a{
		height : calc( 150 var( --remBase ) );
		font-size : 4rem;
	}
}
@media print , screen and ( min-width : 751px ){
	#navGlobal{
		border-bottom-width : 1px;
	}
	#navGlobal li{
		border-top-width : 1px;
	}
	#navGlobal a{
		height : 77px;
		font-size : 2rem;
	}
}

/* --------------------------------------------
CONTENT
--------------------------------------------- */
#content{
	margin-top : 0;
}
.entry{
	margin-bottom : 0;
}

/* --------------------------------------------
CONTENT-INNER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#content-inner{
		padding-left : 0;
		padding-right : 0;
	}
}
@media print , screen and ( min-width : 751px ){
	#content-inner{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		width : 1040px;
		padding-left : 20px;
		padding-right : 20px;
		margin-left : auto;
		margin-right : auto;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media print , screen and ( min-width : 751px ){
	#wrapper{
		width : 722px;
	}
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#box2{
		padding-top : calc( 84 var( --remBase ) );
		padding-bottom : calc( 82 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#box2{
		width : 242px;
	}
}
#box2 .banner{
	display : block;
}
@media screen and ( max-width : 750px ){
	#box2 .banner{
		width : calc( 538 var( --percentBase ) );
		margin-left : auto;
		margin-right : auto;
	}
}
#box2 .hatena-module-entries-access-ranking .hatena-module-title{
	text-indent : -100vw;
}
#box2 .hatena-module-entries-access-ranking .hatena-module-title{
	font-size : 0;
	border : 0;
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking li{
	counter-increment : ranking;
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item::before{
	content : none ! important;
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking a{
	position : relative;
	display : flex;
	background-color : #fff;
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking a::before{
	position : absolute;
	display : block;
	font-weight : 400;
	content : counter( ranking );
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking picture{
	flex-shrink : 0;
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#box2 .hatena-module-entries-access-ranking .entries-access-ranking h4{
	flex-grow : 1;
	font-weight : 400;
	letter-spacing : .1em;
}
@media screen and ( max-width : 750px ){
	#box2 .hatena-module-entries-access-ranking{
		display : flex;
		align-items : flex-start;
		padding-top : calc( 110 var( --remBase ) );
		padding-bottom : calc( 88 var( --remBase ) );
		padding-left : calc( 40 var( --percentBase ) );
	}
	#box2 .hatena-module-entries-access-ranking .hatena-module-title{
		flex-shrink : 0;
		width : calc( 43 * 100% / 710 );
		height : calc( 250 var( --remBase ) );
		margin-right : calc( 27 var( --percentBase ) );
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/26006613681259499" ) center top / auto 100% no-repeat;
	}
	#box2 .hatena-module-entries-access-ranking .hatena-module-body{
		flex-grow : 1;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking li + li{
		margin-top : calc( 2 var( --remBase ) );
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking a::before{
		bottom : calc( 32 var( --remBase ) );
		right : calc( 32 var( --remBase ) );
		font-size : 7.6rem;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking picture{
		width : calc( 274 * 100% / 610 );
		height : calc( 274 var( --remBase ) );
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking h4{
		padding-top : calc( ( 34 - 2.5 ) var( --remBase ) );
		padding-left : calc( 26 * 100% / 580 );
		padding-right : calc( 26 * 100% / 580 );
		font-size : 3.1rem;
		line-height : 1.4839;
	}
}
@media print , screen and ( min-width : 751px ){
	#box2 .hatena-module-entries-access-ranking{
		padding-top : 34px;
		padding-bottom : 42px;
	}
	#box2 .hatena-module-entries-access-ranking .hatena-module-title{
		height : 26px;
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/26006613681259496" ) center top / auto 100% no-repeat;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking{
		padding-top : 19px;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking li + li{
		margin-top : 1px;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking a::before{
		bottom : 12px;
		right : 12px;
		font-size : 2.6rem;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking picture{
		width : 103px;
		height : 103px;
	}
	#box2 .hatena-module-entries-access-ranking .entries-access-ranking h4{
		padding-top : calc( 13px - 2px );
		padding-left : 10px;
		padding-right : 10px;
		font-size : 1.3rem;
		line-height : 1.3077;
	}
}
@media screen and ( max-width : 750px ){
	#box2 .hatena-module.hatena-module-html + .hatena-module.hatena-module-html{
		margin-top : calc( 74 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#box2 .hatena-module.hatena-module-html + .hatena-module.hatena-module-html{
		margin-top : 36px;
	}
}
@media screen and ( max-width : 750px ){
	#box2 .box-tag{
		display : flex;
		align-items : flex-start;
		padding-left : calc( 32 var( --percentBase ) );
		padding-right : calc( 36 var( --percentBase ) );
	}
}
@media screen and ( max-width : 750px ){
	#box2 .title-tags{
		flex-shrink : 0;
		width : calc( 42 * 100% / 682 );
	}
	#box2 .title-tags :is( img , picture ){
		width : 100%;
	}
	#box2 .title-tags img{
		height : auto;
	}
}
@media print , screen and ( min-width : 751px ){
	#box2 .title-tags{
		text-align : center;
	}
	#box2 .title-tags img{
		height : 26px;
	}
}
@media screen and ( max-width : 750px ){
	#box2 .list-tags{
		margin-top : calc( -12 var( --remBase ) );
		margin-left : calc( ( 29 - 12 ) * 100% / 640 );
	}
	#box2 .list-tags li{
		margin-top : calc( 12 var( --remBase ) );
		margin-left : calc( 12 * 100% / 623 );
	}
	#box2 .list-tags a{
		padding-top : calc( 12.5 var( --remBase ) );
		padding-bottom : calc( 12.5 var( --remBase ) );
		padding-left : calc( 22 var( --remBase ) );
		padding-right : calc( 22 var( --remBase ) );
		font-size : 3.2rem;
	}
}
@media print , screen and ( min-width : 751px ){
	#box2 .list-tags{
		margin-top : calc( 21px - 6px );
		margin-left : -6px;
	}
	#box2 .list-tags li{
		margin-top : 6px;
		margin-left : 6px;
	}
	#box2 .list-tags a{
		padding-top : 7px;
		padding-bottom : 7px;
		padding-left : 11px;
		padding-right : 11px;
		font-size : 1.65rem;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#bottom-editarea{
	background-color : #d82b22;
}
#bottom-editarea ul{
	display : flex;
	align-items : center;
}
#bottom-editarea ul a{
	display : block;
}
#bottom-editarea .x img{
	filter : invert( 99% ) sepia( 44% ) saturate( 236% ) hue-rotate( 248deg ) brightness( 116% ) contrast( 101% );
}
#bottom-editarea p{
	color : #fff;
	letter-spacing : .175em;
}
#bottom-editarea p a{
	color : #fff;
}
@media screen and ( max-width : 750px ){
	#bottom-editarea .wrap{
		padding-top : calc( 78 var( --remBase ) );
		padding-bottom : calc( 37 var( --remBase ) );
		padding-left : calc( 26 var( --percentBase ) );
		padding-right : calc( 26 var( --percentBase ) );
	}
	#bottom-editarea h5{
		text-align : center;
	}
	#bottom-editarea h5 img{
		height : calc( 60 var( --remBase ) );
	}
	#bottom-editarea ul{
		margin-top : calc( 44 var( --remBase ) );
	}
	#bottom-editarea li + li{
		margin-left : calc( 24 * 100% / 698 );
	}
	#bottom-editarea .facebook img{
		height : calc( 36 var( --remBase ) );
	}
	#bottom-editarea .x img{
		height : calc( ( 19 * 750 / 390 ) var( --remBase ) );
	}
	#bottom-editarea .line img{
		height : calc( 36 var( --remBase ) );
	}
	#bottom-editarea p{
		margin-top : calc( 17 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media print , screen and ( min-width : 751px ){
	#bottom-editarea .wrap{
		padding-top : 37px;
		padding-bottom : 37px;
	}
	#bottom-editarea ul{
		justify-content : center;
	}
	#bottom-editarea li + li{
		margin-left : 28px;
	}
	#bottom-editarea .facebook img{
		height : 22px;
	}
	#bottom-editarea .x img{
		height : 22px;
	}
	#bottom-editarea .line img{
		height : 25px;
	}
	#bottom-editarea p{
		margin-top : 34px;
		font-size : 1rem;
		text-align : center;
		text-indent : .175em;
	}
}

/* --------------------------------------------
ENTRY-HEADER
--------------------------------------------- */
.entry-header{
	margin-bottom : 0;
}

/* --------------------------------------------
SERIES
--------------------------------------------- */
#series .box{
	display : flex;
	align-items : flex-start;
}
#series h4{
	flex-shrink : 0;
}
#series ul{
	flex-grow : 1;
	width : 100%;
}
#series ul a{
	display : block;
}
@media screen and ( max-width : 750px ){
	#series .box{
		padding-left : calc( 44 var( --percentBase ) );
	}
	#series h4{
		width : calc( 43 * 100% / 706 );
		margin-right : calc( 24 var( --percentBase ) );
	}
	#series h4 img{
		width : 100%;
		height : auto;
	}
	#series ul{
		flex-grow : 1;
	}
	#series ul li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#series ul img{
		width : 100%;
		height : auto;
	}
	#series .link01{
		margin-top : calc( 48 var( --remBase ) );
		margin-left : calc( 111 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	#series h4{
		margin-right : 24px;
	}
	#series h4 img{
		height : 151px;
	}
	#series ul{
		display : flex;
		flex-wrap : wrap;
		justify-content : space-between;
	}
	#series ul li:nth-child( n+3 ){
		margin-top : 32px;
	}
	#series ul img{
		height : 178px;
	}
	#series .link01{
		margin-top : 45px;
	}
}

/* --------------------------------------------
RELATED
--------------------------------------------- */
#related{
	display : flex;
	align-items : flex-start;
	overflow : hidden;
}
#related h3{
	flex-shrink : 0;
}
#related picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#related li{
	display : flex;
	align-items : flex-end;
}
#related li a{
	position : relative;
	display : block;
}
#related li a:nth-of-type( 1 ){
	position : relative;
}
#related :is( p.time , time ){
	position : absolute;
	top : 0;
	margin : 0;
	font-feature-settings : normal;
	line-height : 1;
	letter-spacing : .15em;
	writing-mode : vertical-rl;
	transform : rotate( -180deg );
	transform-origin : center;
}
#related h4{
	position : relative;
	color : #070002;
	letter-spacing : .1em;
	background-color : #f3eee5;
}
#related .author picture{
	margin-left : auto;
	margin-right : auto;
	border-radius : 50%;
}
#related .author p{
	margin : 0;
	line-height : 1;
	color : #070002;
	text-align : center;
	text-indent : .12em;
	letter-spacing : .12em;
}
@media screen and ( max-width : 750px ){
	#related{
		padding-left : calc( 44 var( --percentBase ) );
	}
	#related h3{
		width : calc( 43 * 100% / 706 );
		margin-right : calc( 25 * 100% / 706 );
	}
	#related h3 img{
		width : 100%;
		height : auto;
	}
	#related ul{
		flex-grow : 1;
		width : 100%;
	}
	#related li + li{
		margin-top : calc( 52 var( --remBase ) );
	}
	#related a:nth-of-type( 1 ){
		width : calc( 415 * 100% / 638 );
	}
	#related a:nth-of-type( 1 ) .box01{
		width : 100%;
	}
	#related a:nth-of-type( 1 ) picture{
		width : calc( 390 * 100% / 415 );
		height : calc( 390 var( --remBase ) );
	}
	#related :is( p.time , time ){
		left : calc( 406 * 100% / 415 );
		font-size : 2rem;
	}
	#related h4{
		width : calc( 318 * 100% / 415 );
		padding-left : calc( 8 * 100% / 415 );
		padding-right : calc( 8 * 100% / 415 );
		margin-top : calc( -28 var( --remBase ) );
		margin-left : calc( 107 * 100% / 415 );
		font-size : 3.2rem;
		line-height : 1.5;
	}
	#related .author{
		width : calc( 136 * 100% / 638 );
		padding-bottom : calc( 8 var( --remBase ) );
		margin-left : calc( 4 * 100% / 638 );
	}
	#related .author picture{
		width : calc( 106 * 100% / 136 );
		height : calc( 106 var( --remBase ) );
	}
	#related .author p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2rem;
	}
}
@media print , screen and ( min-width : 751px ){
	#related h3{
		margin-right : 24px;
	}
	#related h3 img{
		height : 140px;
	}
	#related ul{
		display : flex;
		flex-wrap : wrap;
		align-items : flex-start;
		justify-content : space-between;
	}
	#related li{
		width : 323px;
	}
	#related li:nth-child( even ){
		margin-top : 129px;
	}
	#related li:nth-child( odd ):not( :first-child ){
		margin-top : -65px;
	}
	#related li:nth-child( even ):not( :nth-child( 2 ) ){
		margin-top : 70px;
	}
	#related a:nth-of-type( 1 ) picture{
		width : 231px;
		height : 231px;
	}
	#related :is( p.time , time ){
		left : 241px;
		font-size : 1.1rem;
	}
	#related h4{
		width : 188px;
		padding-top : calc( 8px - 4.76px );
		padding-bottom : calc( 8px - 4.76px );
		padding-left : 5px;
		padding-right : 5px;
		margin-top : -18px;
		margin-left : 59px;
		font-size : 1.9rem;
		line-height : 1.5011;
	}
	#related .author{
		width : 63px;
		padding-bottom : calc( 8px - 4.76px );
		margin-left : 11px;
	}
	#related .author picture{
		width : 62px;
		height : 62px;
	}
	#related .author p{
		margin-top : 6px;
		font-size : 1rem;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
.page-index #faq , .page-entry #faq{
	position : relative;
	overflow : clip;
}
.page-index #faq::before , .page-entry #faq::before{
	position : absolute;
	z-index : 1;
	display : block;
	content : "";
}
.page-index #faq .box , .page-entry #faq .box{
	position : relative;
	margin-left : auto;
	overflow : clip;
	background-color : #ff5f57;
}
.page-index #faq .box::before , .page-index #faq .box::after , .page-entry #faq .box::before , .page-entry #faq .box::after{
	position : absolute;
	z-index : 1;
	display : block;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/820878482974511918" ) center / contain no-repeat;
}
.page-index #faq hgroup , .page-entry #faq hgroup{
	color : #fff;
}
.page-index #faq hgroup p , .page-entry #faq hgroup p{
	font-weight : 600;
	letter-spacing : .09em;
}
.page-index #faq hgroup h3 , .page-entry #faq hgroup h3{
	font-size : 0;
}
.page-index #faq ul , .page-entry #faq ul{
	display : grid;
}
.page-index #faq li , .page-entry #faq li{
	position : relative;
	background-color : white;
}
.page-index #faq li::before , .page-entry #faq li::before{
	position : absolute;
	font-size : 0;
	pointer-events : none;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/820878482974511913" ) center / contain no-repeat;
}
.page-index #faq li a , .page-entry #faq li a{
	display : grid;
	align-items : center;
	justify-content : stretch;
	width : 100%;
	height : 100%;
	font-weight : 600;
	color : #d82c22;
}
.page-index #faq li span , .page-entry #faq li span{
	width : fit-content;
	margin-inline : auto;
	letter-spacing : .09em;
}
@media screen and ( max-width : 750px ){
	.page-index #faq::before , .page-entry #faq::before{
		top : calc( 32 var( --remBase ) );
		right : calc( 20 * 100% / 750 );
		width : calc( 195 * 100% / 750 );
		height : calc( 199 var( --remBase ) );
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/820878482974509602" ) center / contain no-repeat;
	}
	.page-index #faq .box , .page-entry #faq .box{
		width : calc( 730 * 100% / 750 );
		padding-top : calc( 82 var( --remBase ) );
		padding-left : calc( 25 * 100% / 750 );
		padding-right : calc( 45 * 100% / 750 );
	}
	.page-index #faq .box::before , .page-entry #faq .box::before{
		bottom : calc( 214 var( --remBase ) );
		right : calc( 8 * 100% / 730 );
		width : calc( 78 * 100% / 730 );
		height : calc( 130 var( --remBase ) );
	}
	.page-index #faq .box::after , .page-entry #faq .box::after{
		bottom : calc( -11 var( --remBase ) );
		left : calc( 39 * 100% / 730 );
		width : calc( 112 * 100% / 730 );
		height : calc( 188 var( --remBase ) );
	}
	.page-index #faq hgroup p , .page-entry #faq hgroup p{
		font-size : calc( 27 var( --remBase ) );
	}
	.page-index #faq hgroup h3 , .page-entry #faq hgroup h3{
		margin-top : calc( 28 var( --remBase ) );
	}
	.page-index #faq hgroup h3 img , .page-entry #faq hgroup h3 img{
		height : calc( 68 var( --remBase ) );
	}
	.page-index #faq ul , .page-entry #faq ul{
		grid-template-columns : repeat( 2 , calc( 318 * 100% / 660 ) );
		row-gap : calc( 47 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 73 var( --remBase ) );
	}
	.page-index #faq li , .page-entry #faq li{
		height : calc( 188 var( --remBase ) );
	}
	.page-index #faq li::before , .page-entry #faq li::before{
		top : calc( -38 var( --remBase ) );
		left : calc( 19 * 100% / 318 );
		width : calc( 65 * 100% / 318 );
		height : calc( 81 var( --remBase ) );
	}
	.page-index #faq li a , .page-entry #faq li a{
		padding-inline : calc( 16 * 100% / 318 );
	}
	.page-index #faq li span , .page-entry #faq li span{
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 47 / 26 );
	}
	.page-index #faq .urllist-see-more , .page-entry #faq .urllist-see-more{
		margin-top : calc( 103 var( --remBase ) );
	}
	.page-index #faq .urllist-see-more a , .page-entry #faq .urllist-see-more a{
		width : calc( 470 * 100% / 660 );
		margin-left : auto;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #faq::before , .page-entry #faq::before{
		bottom : 0;
		left : 0;
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/820878482974509605" ) center / contain no-repeat;
	}
	.page-index #faq .box , .page-entry #faq .box{
		display : grid;
		justify-content : space-between;
	}
	.page-index #faq .box hgroup , .page-entry #faq .box hgroup{
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 1;
		grid-column : 1;
		align-items : start;
		justify-content : space-between;
	}
	.page-index #faq .box hgroup::before , .page-entry #faq .box hgroup::before{
		position : absolute;
		z-index : 1;
		display : block;
		content : "";
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/820878482974511918" ) center / contain no-repeat;
	}
	.page-index #faq .box .urllist-see-more , .page-entry #faq .box .urllist-see-more{
		grid-row : 1;
		grid-column : 2;
	}
	.page-index #faq .box .urllist-see-more a , .page-entry #faq .box .urllist-see-more a{
		width : 100%;
	}
	.page-index #faq .box ul , .page-entry #faq .box ul{
		grid-row : 2;
		grid-column : 1/3;
	}
}