@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 750px < width < 1040px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1040px ){
	:root{
		font-size : 10px;
	}
}
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 73.6 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 80 * var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
	padding-top : var( --headerHeight );
	background-color : #f3eee5;
	@media screen and ( width <= 750px ){
		font-size : calc( 20 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 16 * var( --remBase ) );
	}
}

/* --------------------------------------------
FRAMES
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--containerWidth : 100%;
		--containerBoxWidth : calc( var( --wrapperSize ) * var( --viewportBase ) );
		--containerPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--containerWidth : min( 100% , calc( var( --breakPoint ) * 1px ) );
		--containerBoxWidth : min( calc( var( --wrapperSize ) * var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) );
		--containerPaddingInline : max( calc( var( --gutter ) * var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
:where( .container , .container-pc , .containerBox , .containerBox-pc ){
	@media print , screen and ( width > 750px ){
		margin-inline : auto;
	}
}
:where( .container , .containerPadding ){
	width : var( --containerWidth );
}
:where( .container-sp , .containerPadding-sp ){
	@media screen and ( width <= 750px ){
		width : var( --containerWidth );
	}
}
:where( .container-pc , .containerPadding-pc ){
	@media print , screen and ( width > 750px ){
		width : var( --containerWidth );
	}
}
.containerPadding{
	padding-inline : var( --containerPaddingInline );
}
.containerPadding-sp{
	@media screen and ( width <= 750px ){
		padding-inline : var( --containerPaddingInline );
	}
}
.containerPadding-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : var( --containerPaddingInline );
	}
}
.containerBox{
	width : var( --containerBoxWidth );
	@media screen and ( width <= 750px ){
		margin-inline : auto;
	}
}
.containerBox-sp{
	@media screen and ( width <= 750px ){
		width : var( --containerBoxWidth );
	}
}
.containerBox-pc{
	@media print , screen and ( width > 750px ){
		width : var( --containerBoxWidth );
	}
}
@media screen and ( width <= 750px ){
	:root{
		--gridColumnGutter : calc( var( --gutter ) * var( --viewportBase ) );
		--gridColumnContent : calc( var( --wrapperSize ) * var( --viewportBase ) );
		--gridContainerGridTemplateColumns : var( --gridColumnGutter ) var( --gridColumnContent ) var( --gridColumnGutter );
		--gridContainerColumnCenter : 2;
		--gridContainerLeftStartEnd : 3;
		--gridContainerRightEndStart : 2;
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--gridColumnGutterOutside : 1fr;
		--gridColumnGutterInside : min( calc( var( --gutter ) * var( --viewportBase ) ) , calc( var( --gutter ) * 1px ) );
		--gridColumnContent : min( calc( var( --wrapperSize ) * var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) );
		--gridContainerGridTemplateColumns : var( --gridColumnGutterOutside ) var( --gridColumnGutterInside ) var( --gridColumnContent ) var( --gridColumnGutterInside ) var( --gridColumnGutterOutside );
		--gridContainerColumnCenter : 3;
		--gridContainerLeftStartEnd : 4;
		--gridContainerRightEndStart : 3;
	}
}
.gridContainer{
	display : grid;
	grid-template-columns : var( --gridContainerGridTemplateColumns );
	grid-auto-flow : column;
	row-gap : 0;
	>*:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1 / var( --gridContainerLeftStartEnd );
	}
	.right-end{
		grid-column : var( --gridContainerRightEndStart ) / -1;
	}
}
.gridContainer-sp{
	@media screen and ( width <= 750px ){
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid , .left-start , .right-end ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid{
			grid-column : 1/-1;
		}
		.left-start{
			grid-column : 1 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 1040px ){
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid , .left-start , .right-end ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid{
			grid-column : 1/-1;
		}
		.left-start{
			grid-column : 1 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--wrapPaddingInline : max( calc( var( --gutter ) * var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap02-sp{
	@media screen and ( width <= 750px ){
		padding-inline : calc( 45 * var( --oldViewportBase ) );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 750px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 750px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 750px ){
		display : none;
	}
	@media print , screen and ( width >= 1040px ){
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
[hidden]{
	display : none;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 750px ){
		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-before-sp]::before{
	@media screen and ( width <= 750px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
@media print , screen and ( width > 750px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
.sp-space{
	@media screen and ( width <= 750px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : "　";
		}
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
	@media screen and ( width <= 750px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
.lh-up-pc{
	@media print , screen and ( width > 750px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
RESET HATENA DEFAULT CSS
--------------------------------------------- */
a:hover{
	-webkit-text-decoration : none;
	text-decoration : none;
}
#container , #container-inner , #top-editarea , #wrapper , #main , #main-inner , #content-inner , #bottom-editarea , .entry-inner , .entry-content{
	display : contents;
}
@media screen and ( width <= 750px ){
	body.page-archive:has( .search-result ):has( .archive-entries ){
		#content{
			display : grid;
			grid-template-columns : var( --gridContainerGridTemplateColumns );
			grid-auto-flow : column;
			row-gap : 0;
		}
		.archive-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		.search-result{
			grid-row : 2;
			grid-column : 1/-1;
		}
		.archive-entries{
			grid-row : 3;
			grid-column : 1/-1;
		}
		.pager{
			grid-row : 4;
			grid-column : 2;
		}
		#box2{
			grid-row : 5;
			grid-column : 1/-1;
		}
	}
}
@media print , screen and ( width > 750px ){
	body.page-entry{
		#content{
			display : grid;
			grid-template-rows : auto calc( 57 * var( --remBase ) ) auto calc( 57 * var( --remBase ) ) auto calc( 45 * var( --remBase ) ) auto;
			grid-template-columns : calc( 42 * 100% / 1000 ) calc( 658 * 100% / 1000 ) calc( 22 * 100% / 1000 ) calc( 36 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			align-items : start;
			justify-content : space-between;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		.entry-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		.customized-header{
			grid-row : 3;
			grid-column : 1/-1;
		}
		.entry-content{
			display : block;
			grid-row : 5;
			grid-column : 2;
		}
		:where( .entry-footer ){
			display : contents;
		}
		.customized-footer{
			grid-row : 7;
			grid-column : 1/4;
		}
		#box2{
			grid-row : 5/-1;
			grid-column : 5;
		}
	}
	body.page-archive:not( :has( .search-result ) ){
		#content{
			display : grid;
			grid-template-rows : auto calc( 56 * var( --remBase ) ) 1fr;
			grid-template-columns : calc( 52 * 100% / 1000 ) calc( 670 * 100% / 1000 ) calc( 36 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			row-gap :  ;
			align-items : start;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		:where( .archive-header , .archive-header-category , .search-result ){
			grid-column : 1/-1;
		}
		.archive-entries{
			grid-row : 3;
			grid-column : 2;
		}
		.pager{
			grid-row : 4;
			grid-column : 2;
		}
		#box2{
			grid-row : 3/-1;
			grid-column : 4;
		}
	}
	body.page-archive:has( .search-result ):has( .archive-entries ){
		#content{
			display : grid;
			grid-template-rows : auto calc( 56 * var( --remBase ) ) auto auto auto 1fr;
			grid-template-columns : calc( 52 * 100% / 1000 ) calc( 670 * 100% / 1000 ) calc( 36 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			align-items : start;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.archive-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		.search-result{
			grid-row : 3;
			grid-column : 2;
		}
		.archive-entries{
			grid-row : 4;
			grid-column : 2;
		}
		.pager{
			grid-row : 5;
			grid-column : 2;
		}
		#box2{
			grid-row : 3/-1;
			grid-column : 4;
		}
	}
	body.page-archive:has( .search-result ):not( :has( .archive-entries ) ){
		#content{
			display : grid;
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 52 * 100% / 1000 ) calc( 670 * 100% / 1000 ) calc( 36 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			row-gap : calc( 24 * var( --remBase ) );
			align-items : start;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			padding-top : calc( 52 * var( --remBase ) );
			margin-inline : auto;
		}
		.search-result{
			grid-row : 1;
			grid-column : 2;
			margin-bottom : 0;
			+ p{
				grid-row : 2;
				grid-column : 2;
			}
		}
		#box2{
			grid-row : 1/-1;
			grid-column : 4;
		}
	}
	body.static-page-series{
		#content{
			display : grid;
			grid-template-rows : auto auto;
			grid-template-columns : calc( 59 * 100% / 1000 ) calc( 663 * 100% / 1000 ) 1fr calc( 242 * 100% / 1000 );
			row-gap : calc( 56 * var( --remBase ) );
			align-items : start;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		.entry-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		#listsSeries{
			grid-row : 2;
			grid-column : 2;
		}
		#box2{
			grid-row : 2;
			grid-column : 4;
		}
	}
	body[class*="static-page-series/"]{
		#content{
			display : grid;
			grid-template-rows : auto auto;
			grid-template-columns : calc( 59 * 100% / 1000 ) calc( 663 * 100% / 1000 ) 1fr calc( 242 * 100% / 1000 );
			row-gap : calc( 56 * var( --remBase ) );
			align-items : start;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		#seriesMv{
			grid-row : 1;
			grid-column : 1/-1;
		}
		#listsSeries{
			grid-row : 2;
			grid-column : 2;
		}
		#box2{
			grid-row : 2;
			grid-column : 4;
		}
	}
	:is( body.static-page-ev-makerlist , body.static-page-phev-makerlist ){
		#content{
			display : grid;
			grid-template-rows : auto calc( 75 * var( --remBase ) ) auto calc( 74 * var( --remBase ) ) auto;
			grid-template-columns : calc( 40 * 100% / 1000 ) calc( 682 * 100% / 1000 ) calc( 36 * 100% / 1000 ) calc( 202 * 100% / 1000 ) calc( 40 * 100% / 1000 );
			align-items : start;
			width : 100%;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		#main-inner > article , .entry-inner , .entry-content{
			display : contents;
		}
		#moveHeader{
			grid-row : 1;
			grid-column : 1/-1;
		}
		.moduleService{
			grid-row : 3;
			grid-column : 2/5;
		}
		#post{
			grid-row : 5;
			grid-column : 1/3;
		}
		#box2{
			grid-row : 5/-1;
			grid-column : 4/-1;
		}
	}
	:is( body[class*="static-page-ev-makerlist/"]:not( .single-maker ) , body[class*="static-page-phev-makerlist/"]:not( .single-maker ) ){
		#content{
			display : grid;
			grid-template-columns : calc( 722 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			align-items : start;
			justify-content : space-between;
			width : var( --containerWidth );
			padding-inline : min( 20px , calc( 20 * 100% / var( --breakPoint ) ) );
			margin-inline : auto;
		}
		.entry{
			grid-row : 1;
			grid-column : 1;
			margin-bottom : 0;
		}
		#box2{
			grid-row : 1;
			grid-column : 2;
		}
	}
	body.single-maker{
		#content{
			display : grid;
			grid-template-columns : calc( 722 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			align-items : start;
			justify-content : space-between;
			width : var( --containerWidth );
			padding-inline : min( 20px , calc( 20 * 100% / var( --breakPoint ) ) );
			margin-inline : auto;
		}
		.entry{
			grid-row : 1;
			grid-column : 1;
			margin-bottom : 0;
		}
		#box2{
			grid-row : 1;
			grid-column : 2;
		}
	}
	body[class*="static-page-glossary/"]{
		#content{
			display : grid;
			grid-template-rows : auto auto calc( 51 * var( --remBase ) ) auto;
			grid-template-columns : calc( 722 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			align-items : start;
			justify-content : space-between;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		.entry-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		#related{
			grid-row : 4;
			grid-column : 1;
		}
		#hero{
			grid-row : 2;
			grid-column : 1/-1;
		}
		#box2{
			grid-row : 4;
			grid-column : 2;
		}
	}
	body.static-page-faq{
		#content{
			padding-inline : calc( ( 100% - 1040px ) / 2 );
		}
	}
	body.static-page-author{
		#content{
			display : grid;
			grid-template-rows : auto auto;
			grid-template-columns : calc( 722 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			row-gap : calc( 52 * var( --remBase ) );
			align-items : start;
			justify-content : space-between;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		.entry-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		#listsAuthors{
			grid-row : 2;
			grid-column : 1;
		}
		#box2{
			grid-row : 2;
			grid-column : 2;
		}
	}
	body[class*="static-page-author/"]{
		#content{
			display : grid;
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 60 * 100% / 1000 ) calc( 662 * 100% / 1000 ) calc( 76 * 100% / 1000 ) calc( 242 * 100% / 1000 );
			align-items : start;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		#authorHead{
			grid-row : 1;
			grid-column : 2;
		}
		#listsAuthor{
			grid-row : 2;
			grid-column : 2;
		}
		#box2{
			grid-row : 1/-1;
			grid-column : 4;
		}
	}
	body.static-page-news{
		#content{
			display : grid;
			grid-template-rows : auto calc( ( 51 - 5.75 ) * var( --remBase ) ) auto calc( ( 32 - 5.75 ) * var( --remBase ) ) auto calc( 42 * var( --remBase ) ) auto 1fr;
			grid-template-columns : calc( 722 * 100% / 1000 )  calc( 242 * 100% / 1000 );
			align-items : start;
			justify-content : space-between;
			width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
			margin-inline : auto;
		}
		.entry{
			display : contents;
		}
		.entry-header{
			grid-row : 1;
			grid-column : 1/-1;
		}
		#hero{
			grid-row : 3;
			grid-column : 1/-1;
		}
		#listNews{
			grid-row : 5;
			grid-column : 1;
		}
		#more{
			grid-row : 7;
			grid-column : 1;
		}
		#box2{
			grid-row : 5/-1;
			grid-column : 2;
		}
	}
	#box2{
		width : 100%;
	}
}
.hatena-module{
	margin-bottom : 0;
}
.entry-header{
	margin-bottom : 0;
}
.entry-title a{
	-webkit-text-decoration : none;
	text-decoration : none;
	opacity : 1;
}
.entry-content a{
	-webkit-text-decoration : none;
	text-decoration : none;
	opacity : 1;
}
.entry-content ul , .entry-content ol , .entry-content dd{
	margin-bottom : 0;
	margin-left : 0;
}
.entry-content h1 , .entry-content h2 , .entry-content h3 , .entry-content h4 , .entry-content h5 , .entry-content h6{
	margin-block : 0;
}
@media ( hover : hover ){
	.entry-title a , .entry-content a{
		&:hover{
			-webkit-text-decoration : none;
			text-decoration : none;
			opacity : 1;
		}
	}
}
.static-page-layout-header-footer #content-inner{
	display : contents;
}

/* --------------------------------------------
INDEX LOGO
--------------------------------------------- */
body.page-index{
	@media print , screen and ( width > 750px ){
		#indexLogo{
			position : absolute;
			top : calc( 70.43 * var( --remBase ) );
			left : calc( 50% - min( 500px , calc( 500 * var( --viewportBase ) ) ) );
			z-index : 1;
			height : calc( 146.81 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : center;
	width : 100%;
	height : calc( var( --headerHeight ) );
	background-color : white;
	.logo{
		display : block;
		grid-row : 1;
		grid-column : 1;
	}
	.by{
		grid-row : 1;
		grid-column : 3;
	}
	@media screen and ( width <= 750px ){
		grid-template-columns : auto calc( 10.5 * 100% / 309 ) auto 1fr;
		padding-inline : calc( 18 * var( --viewportBase ) );
		.logo{
			img{
				height : calc( 27.04 * var( --remBase ) );
			}
		}
		.by{
			img{
				height : calc( 6.58 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		grid-template-columns : auto calc( 14 * 100% / 1000 ) auto 1fr auto calc( 34 * 100% / 1000 ) auto;
		padding-inline : max( calc( 20 * var( --viewportBase ) ) , calc( ( 100% - 1000px ) / 2 ) );
		.logo{
			img{
				height : calc( 49.28 * var( --remBase ) );
			}
		}
		.by{
			img{
				height : calc( 9 * var( --remBase ) );
			}
		}
		#nav{
			display : contents;
			.scroll{
				display : contents;
			}
		}
		#navGlobal{
			grid-row : 1;
			grid-column : 5;
		}
		#searchBtn{
			grid-row : 1;
			grid-column : 7;
		}
	}
}
body.page-index #header{
	@media print , screen and ( width > 750px ){
		&::before{
			position : absolute;
			top : calc( var( --headerHeight ) - 9.57 * var( --remBase ) );
			left : calc( 50% - min( 500px , calc( 500 * var( --viewportBase ) ) ) );
			display : block;
			width : auto;
			height : calc( 146.81 * var( --remBase ) );
			aspect-ratio : 1000/147;
			clip-path : polygon( 0 0 , 100% 0 , 100% calc( 9.57 * var( --remBase ) ) , 0 calc( 9.57 * var( --remBase ) ) );
			content : "";
			background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255140846" ) 0 0 / auto 100% no-repeat;
		}
		&.is-scroll::before{
			opacity : 0;
		}
		&:not( .is-scroll )::before{
			opacity : 1;
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	@media screen and ( width <= 750px ){
		position : fixed;
		top : calc( 22.54 * var( --remBase ) );
		right : calc( 18.86 * var( --viewportBase ) );
		z-index : 12;
		width : calc( 34.04 * var( --viewportBase ) );
		height : calc( 28.98 * var( --remBase ) );
		span{
			position : absolute;
			left : 0;
			display : block;
			width : 100%;
			height : 100%;
			transition : all .4s;
			&:nth-of-type( 1 ){
				top : 0;
			}
			&:nth-of-type( 4 ){
				bottom : 0;
			}
		}
		&[aria-expanded="true"]{
			span:nth-of-type( 1 ){
				scale : 0;
				translate : calc( $( top ) var( --remBase ) ) 0;
			}
			span:nth-of-type( 2 ){
				rotate : -45deg;
			}
			span:nth-of-type( 3 ){
				rotate : 45deg;
			}
			span:nth-of-type( 4 ){
				scale : 0;
				translate : calc( -$( top ) var( --remBase ) ) 0;
			}
		}
		> span{
			height : calc( 4.6 * var( --remBase ) );
			background-color : var( --red );
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 50% - ( 2.3 * var( --remBase ) ) );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#menuBtn{
			@media ( prefers-reduced-motion : no-preference ){
				> span{
					transition : all .3s var( --ease-auto );
				}
			}
		}
	}
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
#nav{
	@media screen and ( width <= 750px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 11;
		width : 100%;
		height : 100dvh;
		overflow : hidden;
		background-color : var( --secondary );
		background-color : white;
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		&[inert]{
			max-height : 0;
		}
		&:not( [inert] ){
			max-height : 100dvh;
		}
		> div{
			height : 100dvh;
			overflow-y : auto;
		}
		&[inert]{
			display : none;
		}
		.scroll{
			padding-inline : calc( 18.4 * var( --viewportBase ) );
			padding-top : calc( 23.46 * var( --remBase ) );
			padding-bottom : calc( 23.32 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#nav{
			@media ( prefers-reduced-motion : no-preference ){
				transition : max-height .3s var( --ease-accordion );
			}
		}
	}
}
#searchBtn{
	img{
		filter : var( --filterRed );
	}
	@media screen and ( width <= 750px ){
		img{
			height : calc( 29.9 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		img{
			height : calc( 25.5 * var( --remBase ) );
		}
	}
}
#searchFormWrapper{
	position : fixed;
	display : grid;
	grid-template-columns : 1fr;
	overflow : hidden;
	> div{
		overflow : hidden;
	}
	&[inert]{
		grid-template-rows : 0fr;
	}
	&:not( [inert] ){
		z-index : 11;
		grid-template-rows : 1fr;
	}
	form{
		display : flex;
		align-items : center;
		overflow : hidden;
		background : white;
		border-radius : 100vmax;
		outline-style : solid;
		outline-color : var( --red );
	}
	input{
		flex-grow : 1;
		padding-block : 0;
		background : none;
		border : 0;
	}
	button[type="submit"]{
		overflow : hidden;
		img{
			filter : var( --filterRed );
		}
	}
	@media screen and ( width <= 750px ){
		top : calc( 14 * var( --remBase ) );
		left : calc( 14 * var( --viewportBase ) );
		width : calc( 255 * var( --viewportBase ) );
		height : calc( 46 * var( --remBase ) );
		form{
			padding-left : calc( 14.32 * 100% / 255 );
			outline-width : calc( 2 * var( --remBase ) );
			outline-offset : calc( -2 * var( --remBase ) );
		}
		input{
			height : calc( 46 * var( --remBase ) );
			padding-inline : calc( 14.32 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
		button[type="submit"]{
			img{
				height : calc( 23.13 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		top : calc( 70 * var( --remBase ) );
		left : calc( 50% + min( 60px , calc( 60 * var( --viewportBase ) ) ) );
		align-items : center;
		justify-content : space-between;
		width : min( 451px , calc( 451 * var( --viewportBase ) ) );
		> div{
			display : flex;
			align-items : center;
			justify-content : space-between;
			width : 100%;
		}
		form{
			width : calc( 400 * 100% / 451 );
			padding-right : calc( 14 * 100% / 400 );
			outline-width : calc( 2 * var( --remBase ) );
			outline-offset : calc( -2 * var( --remBase ) );
		}
		input{
			order : 1;
			height : calc( 50 * var( --remBase ) );
			padding-inline : calc( 14 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		button[type="submit"]{
			order : 2;
			img{
				order : 2;
				height : calc( 24.48 * var( --remBase ) );
			}
		}
		button[type="button"]{
			img{
				height : calc( 50 * var( --remBase ) );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#searchFormWrapper{
		transition : grid-template-rows .3s var( --ease-accordion );
		form{
			transition : outline-color .3s var( --ease-accordion ) ;
		}
	}
}
#navGlobal{
	summary{
		display : flex;
		align-items : center;
		font-weight : 600;
		color : var( --red );
		letter-spacing : .07em;
		&::after{
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			filter : var( --filterRed );
			background-repeat : no-repeat;
			background-origin : center;
			background-size : contain;
		}
	}
	details a{
		font-weight : 600;
		&::before{
			white-space : pre;
			content : "- ";
		}
	}
	@media screen and ( width <= 750px ){
		margin-top : calc( 46.81 * var( --remBase ) );
		details{
			padding-top : calc( 22.08 * var( --remBase ) );
			padding-bottom : calc( 22.36 * var( --remBase ) );
			border-top : solid calc( 2 * var( --remBase ) ) var( --red );
			&:last-of-type{
				border-bottom : solid calc( 2 * var( --remBase ) ) var( --red );
			}
		}
		summary{
			justify-content : space-between;
			padding-right : calc( 5.42 * 100% / 308.2 );
			font-size : calc( 20.7 * var( --remBase ) );
			line-height : calc( 31 / 20.7 );
			&::after{
				height : calc( 11.04 * var( --remBase ) );
				aspect-ratio : 19.32/11.04;
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141003" );
			}
		}
		details[open] summary::after{
			rotate : -180deg;
		}
		details > div{
			display : grid;
			grid-template-columns : 1fr;
			overflow : hidden;
		}
		details:not( [open] ) > div{
			grid-template-rows : 0fr;
		}
		details[open] > div{
			grid-template-rows : 1fr;
		}
		ul{
			margin-top : calc( 13.16 * var( --remBase ) );
			overflow : hidden;
		}
		details a{
			font-size : calc( 16.1 * var( --remBase ) );
			line-height : calc( 36.8 / 16.1 );
			color : var( --red );
		}
		> a{
			display : block;
			margin-top : calc( 42.75 * var( --remBase ) );
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	@media print , screen and ( width > 750px ){
		display : flex;
		column-gap : calc( 25 * var( --remBase ) );
		align-items : start;
		details{
			position : relative;
		}
		summary{
			column-gap : calc( 7 * var( --remBase ) );
			justify-content : start;
			padding-block : calc( 15 * var( --remBase ) );
			font-size : calc( 13 * var( --remBase ) );
			line-height : calc( 20 / 13 );
			&::after{
				height : calc( 8 * var( --remBase ) );
				aspect-ratio : 14/8;
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141003" );
			}
		}
		ul{
			position : absolute;
			top : 100%;
			left : 0;
			width : max-content;
			height : max-content;
			padding-top : calc( 7 * var( --remBase ) );
			padding-bottom : calc( 10 * var( --remBase ) );
			padding-left : calc( 12 * var( --remBase ) );
			padding-right : calc( 18 * var( --remBase ) );
			background-color : white;
			border-left : solid calc( 3 * var( --remBase ) ) var( --red );
		}
		details a{
			display : inline-block;
			font-size : calc( 13 * var( --remBase ) );
			line-height : calc( 30 / 13 );
			color : black;
		}
	}
}
@media ( hover : hover ){
	#navGlobal{
		details a:hover{
			-webkit-text-decoration : none;
			text-decoration : none;
			@media print , screen and ( width > 750px ){
				color : var( --red );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal{
		@media screen and ( width <= 750px ){
			details > div{
				transition : grid-template-rows .3s var( --ease-accordion );
			}
		}
	}
	#navGlobal{
		@media print , screen and ( width > 750px ){
			details a{
				transition : color .3s var( --ease-textColor );
			}
		}
	}
}

/* --------------------------------------------
CONTENT
--------------------------------------------- */
#content{
	margin : 0;
}

/* --------------------------------------------
TOP
--------------------------------------------- */
#mv{
	hgroup{
		position : absolute;
		z-index : 1;
		margin : 0;
		pointer-events : none;
		h1{
			margin : 0;
			font-size : 0;
		}
	}
	#mvSlider{
		font-size : 0;
		picture{
			width : 100%;
			height : 100%;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
	}
	@media screen and ( width <= 750px ){
		position : relative;
		margin-bottom : calc( 35.28 * var( --remBase ) );
		overflow-x : clip;
		hgroup{
			top : calc( 12.88 * var( --remBase ) );
			left : calc( 18 * var( --viewportBase ) );
			img{
				height : calc( 157 * var( --remBase ) );
			}
		}
		#mvSlider{
			height : calc( 441.6 * var( --remBase ) );
			picture{
				height : calc( 441.6 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		--mvLeft : 820;
		--mvRightOverLap : calc( 29.03 / 2 );
		--mvRight : calc( ( 265 + var( --mvRightOverLap ) ) );
		--mvOverLap : calc( var( --mvLeft ) + var( --mvRight ) - var( --breakPoint ) );
		display : grid;
		grid-template-rows : auto calc( 18 * var( --remBase ) );
		grid-template-columns : calc( ( var( --mvLeft ) - var( --mvOverLap )  ) * var( --viewportBase ) ) calc( var( --mvOverLap ) * var( --viewportBase ) ) calc( ( var( --mvRight ) - var( --mvOverLap )  ) * var( --viewportBase ) );
		padding-inline : 0;
		padding-bottom : calc( 40 * var( --remBase ) );
		hgroup{
			top : calc( var( --headerHeight ) - 9.57 * var( --remBase ) );
			left : calc( 50% - min( 500px , calc( 500 * var( --viewportBase ) ) ) );
			img{
				height : calc( 146.81 * var( --remBase ) );
			}
			p{
				margin-top : calc( -6.24 * var( --remBase ) );
				margin-left : calc( 50 * 100% / 999.77 );
				font-size : calc( 17 * var( --remBase ) );
				font-weight : 600;
				line-height : calc( 26 / 17 );
				color : white;
				letter-spacing : .02em;
			}
		}
		#mvSlider{
			grid-row : 1;
			grid-column : 1/3;
		}
		#pickup{
			grid-row : 1/3;
			grid-column : 2/-1;
			align-self : end;
		}
	}
}
#pickup{
	section{
		picture{
			width : 100%;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
	}
	ul{
		background-color : var( --red );
	}
	h3{
		font-weight : 300;
		color : white;
		-webkit-text-decoration : none;
		text-decoration : none;
		letter-spacing : .05em;
	}
	@media screen and ( width <= 750px ){
		display : grid;
		grid-template-rows : calc( 11.23 * var( --remBase ) ) calc( ( 19.54 - 11.23 ) * var( --remBase ) ) auto;
		grid-template-columns : 100%;
		margin-top : calc( -11.23 * var( --remBase ) );
		h2{
			position : relative;
			grid-row : 1/3;
			grid-column : 1;
			text-align : center;
			img{
				height : calc( 19.54 * var( --remBase ) );
			}
		}
		ul{
			grid-row : 2/-1;
			grid-column : 1;
			padding-inline : calc( 18.4 * var( --viewportBase ) );
			padding-top : calc( 24.84 * var( --remBase ) );
			padding-bottom : calc( 27.14 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 20.24 * var( --remBase ) );
		}
		section{
			display : grid;
			grid-template-columns : calc( 176.15 * 100% / 308.2 ) 1fr;
			column-gap : calc( 10.61 * 100% / 308.2 );
			align-items : start;
			picture{
				height : calc( 86.02 * var( --remBase ) );
			}
		}
		h3{
			font-size : calc( 11.96 * var( --remBase ) );
			line-height : calc( 20 / 11.96 );
		}
	}
	@media print , screen and ( width > 750px ){
		z-index : 1;
		display : grid;
		grid-template-columns : calc( var( --mvRightOverLap ) * 100% / var( --mvRight ) ) calc( var( --mvRightOverLap ) * 100% / var( --mvRight ) ) 1fr;
		align-items : center;
		h2{
			z-index : 1;
			grid-row : 1;
			grid-column : 1/3;
			img{
				height : calc( 358.99 * var( --remBase ) );
			}
		}
		ul{
			grid-row : 1;
			grid-column : 2/-1;
			padding-top : calc( 34 * var( --remBase ) );
			padding-bottom : calc( 36 * var( --remBase ) );
			padding-left : calc( 44 * 100% / 265 );
			padding-right : calc( 21 * 100% / 265 );
		}
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		a{
			display : block;
		}
		section{
			picture{
				height : calc( 98 * var( --remBase ) );
			}
		}
		h3{
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
		}
	}
}

/* --------------------------------------------
CONTENT INNER
--------------------------------------------- */