@charset "UTF-8";
@media print , screen and ( min-width : 751px ){
	body.page-index{
		min-width : 1040px;
		margin-left : auto;
		margin-right : auto;
		overflow-x : hidden;
	}
}
@media screen and ( max-width : 750px ){
	body.page-index #container{
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 751px ){
	body.page-index #container-inner::before{
		position : fixed;
		top : calc( 64 var( --remBase ) );
		left : 0;
		z-index : 9;
		display : block;
		width : 100%;
		height : calc( 29 var( --remBase ) );
		content : "";
		background-color : #fff;
	}
}
@media print , screen and ( min-width : 751px ){
	body.page-index #top-editarea{
		z-index : 12;
		background-color : transparent;
	}
	body.page-index #top-editarea::before{
		position : absolute;
		top : 0;
		left : 0;
		display : block;
		width : 100%;
		height : calc( 64 var( --remBase ) );
		content : "";
		background-color : #fff;
	}
}
@media print , screen and ( min-width : 751px ){
	body.page-index #header{
		min-width : 1040px;
	}
}
.page-index #hero{
	position : relative;
}
.page-index #hero :where( h1 span , p ){
	position : absolute;
	z-index : 2;
}
.page-index #hero h1 img{
	height : 100%;
}
.page-index #hero p span{
	display : block;
	font-weight : 600;
	color : #fff;
	letter-spacing : .15em;
}
@media screen and ( max-width : 750px ){
	.page-index #hero{
		overflow : hidden;
	}
	.page-index #hero h1 span:nth-of-type( 1 ){
		top : calc( 28 var( --remBase ) );
		left : calc( 45 var( --percentBase ) );
		height : calc( 145 var( --remBase ) );
	}
	.page-index #hero h1 span:nth-of-type( 2 ){
		top : calc( 195 var( --remBase ) );
		left : calc( 46 var( --percentBase ) );
		height : calc( 169 var( --remBase ) );
	}
	.page-index #hero p{
		top : calc( ( 386 - 9 ) var( --remBase ) );
		left : calc( 42 var( --percentBase ) );
		height : calc( 129 var( --remBase ) );
	}
	.page-index #hero p span{
		font-size : calc( 25 var( --remBase ) );
		line-height : 1.72;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #hero h1 span:nth-of-type( 1 ){
		top : calc( 14 var( --remBase ) );
		left : calc( 50% - ( 501 var( --remBase ) ) );
		height : calc( 88 var( --remBase ) );
	}
	.page-index #hero h1 span:nth-of-type( 2 ){
		top : calc( -12 var( --remBase ) );
		left : calc( 50% - ( 72 var( --remBase ) ) );
		z-index : 11;
		height : calc( 147 var( --remBase ) );
	}
	.page-index #hero p{
		top : calc( 130 var( --remBase ) );
		left : calc( 50% - ( 406 var( --remBase ) ) );
		height : calc( 17 var( --remBase ) );
	}
	.page-index #hero p span{
		font-size : calc( 17 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	body.page-index.is-open #hero h1 span:nth-of-type( 2 ) , body.page-index.is-search #hero h1 span:nth-of-type( 2 ){
		z-index : 10;
	}
}
.page-index #slider{
	opacity : 0;
}
.page-index #slider.swiper-initialized{
	opacity : 1;
}
.page-index #slider .swiper-slide:not( .swiper-slide-active ){
	opacity : .5;
}
.page-index #slider picture{
	width : 100%;
	height : 100%;
}
.page-index #slider picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
@media screen and ( max-width : 750px ){
	.page-index #slider .swiper-slide{
		width : 100%;
		height : calc( 960 var( --remBase ) );

		/* height: calc( 100dvh - ( 162 var(--remBase) ) ); */
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #slider .swiper-slide{
		width : calc( 1040 var( --remBase ) );
		height : calc( 586 var( --remBase ) );
	}
}
.page-index #content-inner{
	display : block;
	padding-left : 0;
	padding-right : 0;
}
@media print , screen and ( min-width : 751px ){
	.page-index #content-inner{
		position : relative;
		width : 100%;
	}
}
@media screen and ( width >= 1658px ){
	.page-index #content-inner::before , .page-index #content-inner::after{
		position : absolute;
		top : 0;
		display : block;
		content : "";
		background-repeat : repeat-y;
		background-position : 0 0;
		background-size : 100% auto;
	}
	.page-index #content-inner::before{
		top : calc( 581 var( --remBase ) );
		left : calc( 50% - ( 796 var( --remBase ) ) );
		width : calc( 213 var( --remBase ) );
		height : calc( 100% - ( 581 var( --remBase ) ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825630" );
	}
	.page-index #content-inner::after{
		top : calc( 119 var( --remBase ) );
		left : calc( 50% + ( 584 var( --remBase ) ) );
		width : calc( 213 var( --remBase ) );
		height : calc( 100% - ( 119 var( --remBase ) ) );
		background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825631" );
	}
}
@media screen and ( max-width : 750px ){
	.page-index #wrapper{
		width : 100%;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #wrapper{
		width : 1040px;
		margin-left : auto;
		margin-right : auto;
	}
}
.page-index #about{
	overflow : hidden;
	background-color : var( --primary );
}
.page-index #about p{
	font-weight : 600;
	color : #fff;
	letter-spacing : .13em;
	white-space : nowrap;
}
@media screen and ( max-width : 750px ){
	.page-index #about{
		padding-top : calc( ( 90 - 14.5 ) var( --remBase ) );
		padding-bottom : calc( ( 90 - 14.5 ) var( --remBase ) );
	}
	.page-index #about p{
		padding-left : calc( 82 var( --percentBase ) );
		font-size : calc( 31 var( --remBase ) );
		line-height : calc( 60 / 31 );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #about{
		position : relative;
		z-index : 2;
		width : calc( 408 * 100% / 1040 );
		padding-top : calc( ( 37 - 7.5 ) var( --remBase ) );
		padding-bottom : calc( ( 39 - 7.5 ) var( --remBase ) );
		margin-top : calc( -58 var( --remBase ) );
		margin-left : calc( 632 * 100% / 1040 );
	}
	.page-index #about p{
		padding-left : calc( 47 var( --remBase ) );
		padding-right : calc( 47 var( --remBase ) );
		font-size : calc( 13 var( --remBase ) );
		line-height : calc( 28 / 13 );
	}
}

/* --------------------------------------------
SLIDER02 , SLIDER03
--------------------------------------------- */
.page-index :where( #slider02 , #slider03 ){
	position : relative;
	font-size : 0;
}
.page-index :where( #slider02 , #slider03 ) a{
	display : block;
}
.page-index :where( #slider02 , #slider03 ) picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.page-index :where( #slider02 , #slider03 ) :is( .swiper-button-prev , .swiper-button-next ){
	position : absolute;
	top : 50%;
	z-index : 9;
	width : auto;
	height : auto;
	margin : 0;
	translate : 0 -50%;
}
.page-index :where( #slider02 , #slider03 ) :is( .swiper-button-prev , .swiper-button-next )::after{
	content : none;
}
@media screen and ( max-width : 750px ){
	.page-index :where( #slider02 , #slider03 ){
		padding-top : calc( 46 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
		padding-left : calc( 90 * 100% / 750 );
		padding-right : calc( 90 * 100% / 750 );
		overflow : hidden;
	}
	.page-index :where( #slider02 , #slider03 ) .swiper{
		height : calc( 536 var( --remBase ) );
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-wrapper{
		justify-content : space-between;
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-slide{
		height : calc( 250 var( --remBase ) );
		padding-left : calc( 17.5 var( --remBase ) );
		padding-right : calc( 17.5 var( --remBase ) );
	}
	.page-index :where( #slider02 , #slider03 ) picture{
		height : calc( 250 var( --remBase ) );
	}
	.page-index :where( #slider02 , #slider03 ) :is( .swiper-button-prev , .swiper-button-next ) img{
		height : calc( 58 var( --remBase ) );
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-button-prev{
		left : calc( 34 * 100% / 750 );
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-button-next{
		right : calc( 34 * 100% / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index :where( #slider02 , #slider03 ){
		width : calc( 950 * 100% / 1040 );
		padding-top : calc( 21 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		padding-left : calc( 50 * 100% / 1040 );
		padding-right : calc( 50 * 100% / 1040 );
		margin-left : auto;
		margin-right : auto;
		background-color : #fff;
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-slide{
		width : calc( 213 * 100% / 850 );
		padding-left : calc( 19 * 100% / 850 );
		padding-right : calc( 19 * 100% / 850 );
	}
	.page-index :where( #slider02 , #slider03 ) picture{
		height : calc( 175 var( --remBase ) );
	}
	.page-index :where( #slider02 , #slider03 ) :is( .swiper-button-prev , .swiper-button-next ) img{
		height : calc( 35 var( --remBase ) );
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-button-prev{
		left : calc( 22 * 100% / 950 );
	}
	.page-index :where( #slider02 , #slider03 ) .swiper-button-next{
		right : calc( 22 * 100% / 950 );
	}
}
.page-index #slider02{
	position : relative;
}
.page-index #slider02::before{
	position : absolute;
	display : block;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825634" ) 0 0 / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	.page-index #slider02::before{
		top : calc( 197 var( --remBase ) );
		left : calc( 47 * 100% / 750 );
		width : calc( 1316 * 100% / 750 );
		height : calc( 451 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #slider02{
		margin-top : calc( 24 var( --remBase ) );
	}
	.page-index #slider02::before{
		top : calc( -162 var( --remBase ) );
		left : calc( ( -9 - 45 ) * 100% / 950 );
		width : calc( 621 * 100% / 950 );
		height : calc( 213 var( --remBase ) );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.page-index #faq .box{
		padding-bottom : calc( 114 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #faq{
		margin-top : calc( 50 var( --remBase ) );
	}
	.page-index #faq::before{
		width : calc( 183 * 100% / 1040 );
		height : calc( 216 var( --remBase ) );
	}
	.page-index #faq .box{
		grid-template-columns : calc( 396 * 100% / 780 ) calc( 225 * 100% / 780 );
		row-gap : calc( 46 var( --remBase ) );
		width : calc( 925 * 100% / 1040 );
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
		padding-left : calc( 100 * 100% / 1040 );
		padding-right : calc( 45 * 100% / 1040 );
	}
	.page-index #faq .box::before{
		top : calc( -7 var( --remBase ) );
		left : calc( 37 * 100% / 925 );
		width : calc( 56 * 100% / 925 );
		height : calc( 94 var( --remBase ) );
	}
	.page-index #faq .box::after{
		top : calc( 12 var( --remBase ) );
		right : calc( 7 * 100% / 925 );
		width : calc( 76 * 100% / 925 );
		height : calc( 126 var( --remBase ) );
	}
	.page-index #faq .box hgroup::before{
		bottom : calc( -4 var( --remBase ) );
		right : calc( 218 * 100% / 925 );
		width : calc( 39 * 100% / 925 );
		height : calc( 65 var( --remBase ) );
	}
	.page-index #faq .box hgroup p{
		margin-top : calc( -2.8 var( --remBase ) );
		font-size : calc( 11.92 var( --remBase ) );
		line-height : calc( 17.52 / 11.92 );
	}
	.page-index #faq .box hgroup h3 img{
		height : calc( 40 var( --remBase ) );
	}
	.page-index #faq .box .urllist-see-more{
		margin-top : calc( 8 var( --remBase ) );
	}
	.page-index #faq .box ul{
		grid-template-rows : calc( 105 var( --remBase ) );
		grid-template-columns : repeat( 4 , calc( 180 * 100% / 780 ) );
		column-gap : calc( 20 * 100% / 780 );
	}
	.page-index #faq .box li::before{
		top : calc( -17 var( --remBase ) );
		left : calc( 9 * 100% / 180 );
		width : calc( 31 * 100% / 180 );
		height : calc( 37 var( --remBase ) );
	}
	.page-index #faq .box li a{
		padding-inline : calc( 13 * 100% / 180 );
	}
	.page-index #faq .box li span{
		font-size : calc( 14 var( --remBase ) );
		line-height : calc( 25 / 14 );
	}
}
@media screen and ( max-width : 750px ){
	.page-index #slider03{
		overflow : visible;
	}
	.page-index #slider03::after{
		position : absolute;
		top : calc( -78 var( --remBase ) );
		left : calc( 48 * 100% / 750 );
		z-index : 2;
		z-index : 0;
		display : block;
		width : calc( 1314 * 100% / 750 );
		height : calc( 450 var( --remBase ) );
		pointer-events : none;
		content : "";
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825629" ) 0 0 / contain no-repeat;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #slider03{
		margin-top : calc( 26 var( --remBase ) );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.page-index .hatena-module-title{
	font-size : 0;
}
.page-index .hatena-module-title a{
	display : block;
	pointer-events : none;
	background-repeat : no-repeat;
	background-position-x : 0;
	background-size : contain;
}

/* --------------------------------------------
VIEW MORE
--------------------------------------------- */
.page-index .recent-entries-see-more a{
	position : relative;
	display : block;
	padding : 0;
	margin-left : 0;
	margin-right : 0;
	color : #fff;
	text-align-last : left;
	background-color : transparent;
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825632" );
	background-repeat : no-repeat;
	background-position : 0 0;
	border : 0;
}
.page-index .recent-entries-see-more a::before{
	position : absolute;
	top : 0;
	display : block;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825709" ) 0 0 / contain no-repeat;
	transition : translate .3s ease-in;
}
.page-index .recent-entries-see-more a::after{
	position : relative;
	top : 100%;
	left : 0;
	display : block;
	width : 100%;
	max-width : 0;
	overflow : hidden;
	content : "";
	background-color : #fff;
	transition : max-width .3s ease-in;
}
.page-index .recent-entries-see-more a:hover{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825632" );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
.page-index .recent-entries-see-more a:hover::before{
	translate : 50% 0;
}
.page-index .recent-entries-see-more a:hover::after{
	max-width : 100%;
}
@media screen and ( max-width : 750px ){
	.page-index .recent-entries-see-more a{
		width : calc( 470 * 100% / 750 );
		height : calc( 63 var( --remBase ) );
		background-size : auto calc( 34 var( --remBase ) );
	}
	.page-index .recent-entries-see-more a::before{
		left : calc( 422 * 100% / 470 );
		width : calc( 25 * 100% / 470 );
		height : calc( 39 var( --remBase ) );
	}
	.page-index .recent-entries-see-more a::after{
		height : calc( 7 var( --remBase ) );
	}
	.page-index .recent-entries-see-more a:hover{
		background-size : auto calc( 34 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index .recent-entries-see-more a{
		width : calc( 225 * 100% / 1040 );
		height : calc( 25 var( --remBase ) );
		background-size : auto calc( 12 var( --remBase ) );
	}
	.page-index .recent-entries-see-more a::before{
		left : calc( 210 * 100% / 225 );
		width : calc( 8 * 100% / 225 );
		height : calc( 13 var( --remBase ) );
	}
	.page-index .recent-entries-see-more a::after{
		height : calc( 2 var( --remBase ) );
	}
	.page-index .recent-entries-see-more a:hover{
		background-size : auto calc( 12 var( --remBase ) );
	}
}

/* --------------------------------------------
ENTRIES
--------------------------------------------- */
.page-index #main .hatena-module-recent-entries{
	position : relative;
}
.page-index #main .hatena-module-recent-entries::before{
	position : absolute;
	z-index : 1;
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : auto 100%;
}
.page-index #main .hatena-module-recent-entries::after{
	position : absolute;
	z-index : 0;
	display : block;
	content : "";
}
.page-index #main .hatena-module-recent-entries :where( .hatena-module-title , .hatena-module-body ){
	position : relative;
	z-index : 2;
}
.page-index #main .hatena-module-recent-entries .hatena-module-title{
	overflow : hidden;
}
.page-index #main .hatena-module-recent-entries .hatena-module-title a{
	width : 100%;
	height : 100%;
}
.page-index #main .hatena-module-recent-entries .recent-entries{
	position : relative;
	display : block;
}
.page-index #main .hatena-module-recent-entries .recent-entries::before{
	position : absolute;
	z-index : -1;
	display : block;
	pointer-events : none;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
.page-index #main .hatena-module-recent-entries .recent-entries li{
	width : 100%;
	margin-bottom : 0;
}
.page-index #main .hatena-module-recent-entries .recent-entries li a{
	display : grid;
	grid-template-rows : auto auto 1fr;
	width : 100%;
	height : 100%;
	background-color : #fff;
}
.page-index #main .hatena-module-recent-entries .recent-entries picture{
	grid-row : 1/4;
	grid-column : 1;
	width : 100%;
	height : 100%;
}
.page-index #main .hatena-module-recent-entries .recent-entries picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.page-index #main .hatena-module-recent-entries .recent-entries h3{
	display : -webkit-box;
	grid-row : 1;
	grid-column : 2/4;
	align-self : start;
	overflow : hidden;
	font-weight : 600;
	color : #000;
	letter-spacing : .09em;
	-webkit-box-orient : vertical;
}
.page-index #main .hatena-module-recent-entries .recent-entries :where( time , .author ){
	grid-row : 2;
	font-weight : 300;
}
.page-index #main .hatena-module-recent-entries .recent-entries time{
	grid-column : 2;
}
.page-index #main .hatena-module-recent-entries .recent-entries .author{
	grid-column : 3;
}
@media screen and ( max-width : 750px ){
	.page-index #main .hatena-module-recent-entries::before{
		top : 0;
		left : 0;
		width : calc( 706 * 100% / 750 );
		height : calc( 677 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries::after{
		top : calc( 65 var( --remBase ) );
		width : calc( 730 * 100% / 750 );
		height : calc( 100% - ( 65 var( --remBase ) ) );
	}
	.page-index #main .hatena-module-recent-entries .hatena-module-title{
		height : calc( 44 var( --remBase ) );
		margin-left : calc( 45 * 100% / 750 );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries{
		margin-top : calc( 71 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li{
		width : calc( 660 * 100% / 750 );
		height : calc( 215 var( --remBase ) );
		margin-left : calc( 46 * 100% / 750 );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li + li{
		margin-top : calc( 60 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li a{
		grid-template-columns : calc( 215 * 100% / 660 ) auto 1fr;
		row-gap : calc( ( 27 - 7 - 11 ) var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li h3{
		height : calc( 123 var( --remBase ) );
		padding-left : calc( 37 * 100% / 455 );
		padding-right : calc( 33 * 100% / 455 );
		margin-top : calc( ( 28 - 7 ) var( --remBase ) );
		font-size : calc( 27 var( --remBase ) );
		line-height : calc( 41 / 27 );
		-webkit-line-clamp : 3;
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li :where( time , .author ){
		font-size : calc( 23 var( --remBase ) );
		line-height : calc( 45 / 23 );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li time{
		padding-left : calc( 39 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li .author{
		padding-left : calc( 19 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries-see-more{
		margin-top : calc( 119 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries-see-more a{
		margin-left : calc( 237 * 100% / 750 );
		margin-right : 0;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #main .hatena-module-recent-entries::before{
		top : 0;
		width : calc( 611 * 100% / 1040 );
		height : calc( 586 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries::after{
		top : calc( 37 var( --remBase ) );
		width : calc( 1036 * 100% / 1040 );
		height : calc( 100% + ( 61 var( --remBase ) ) );
	}
	.page-index #main .hatena-module-recent-entries .hatena-module-title{
		height : calc( 21 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries{
		margin-top : calc( 43 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li{
		width : calc( 390 * 100% / 1040 );
		height : calc( 106 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li a{
		grid-template-columns : calc( 106 * 100% / 390 ) auto 1fr;
		row-gap : calc( ( 13 - 3.5 - 4 ) var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li h3{
		height : calc( 40 var( --remBase ) );
		padding-left : calc( 24 * 100% / 284 );
		padding-right : calc( 38 * 100% / 284 );
		margin-top : calc( ( 24 - 3.5 ) var( --remBase ) );
		font-size : calc( 13 var( --remBase ) );
		line-height : calc( 20 / 13 );
		-webkit-line-clamp : 2;
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li :where( time , .author ){
		font-size : calc( 10 var( --remBase ) );
		line-height : 1.8;
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li time{
		padding-left : calc( 24 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries > li .author{
		padding-left : calc( 6 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries-see-more{
		margin-top : calc( 31 var( --remBase ) );
	}
	.page-index #main .hatena-module-recent-entries .recent-entries-see-more a{
		margin-right : 0;
	}
}

/* --------------------------------------------
ENTRY01
--------------------------------------------- */
.page-index #main-inner > div:nth-of-type( 4 )::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825842" );
}
.page-index #main-inner > div:nth-of-type( 4 )::after{
	background-color : var( --primary );
}
.page-index #main-inner > div:nth-of-type( 4 ) .recent-entries::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825840" );
}
.page-index #main-inner > div:nth-of-type( 4 ) .hatena-module-title{
	overflow : hidden;
}
.page-index #main-inner > div:nth-of-type( 4 ) .hatena-module-title a{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825841" );
}
.page-index #main-inner > div:nth-of-type( 4 ) .recent-entries :where( time , .author ){
	color : var( --primary );
}
@media screen and ( max-width : 750px ){
	.page-index #main-inner > div:nth-of-type( 4 ){
		padding-top : calc( 796 var( --remBase ) );
		margin-top : calc( 114 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 4 )::before{
		left : 0;
	}
	.page-index #main-inner > div:nth-of-type( 4 )::after{
		left : 0;
	}
	.page-index #main-inner > div:nth-of-type( 4 ) .hatena-module-title{
		width : calc( 269 * 100% / 750 );
	}
	.page-index #main-inner > div:nth-of-type( 4 ) .recent-entries::before{
		top : calc( -341 var( --remBase ) );
		left : calc( 422 * 100% / 750 );
		width : calc( 416 * 100% / 750 );
		height : calc( 1032 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #main-inner > div:nth-of-type( 4 ){
		padding-top : calc( 98 var( --remBase ) );
		padding-bottom : calc( 37 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 4 )::before{
		left : 0;
	}
	.page-index #main-inner > div:nth-of-type( 4 )::after{
		left : calc( -41 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 4 ) .hatena-module-title{
		width : calc( 126 * 100% / 1040 );
		margin-left : calc( 800 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 4 ) .recent-entries::before{
		top : calc( -28 var( --remBase ) );
		left : calc( 758 * 100% / 1040 );
		width : calc( 212 * 100% / 1040 );
		height : calc( 524 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 4 ) .recent-entries li{
		margin-left : calc( 538 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 4 ) .recent-entries-see-more a{
		margin-left : calc( 703 * 100% / 1040 );
	}
}

/* --------------------------------------------
ENTRY02
--------------------------------------------- */
.page-index #main-inner > div:nth-of-type( 6 )::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825892" );
}
.page-index #main-inner > div:nth-of-type( 6 )::after{
	background-color : #11a3b9;
}
.page-index #main-inner > div:nth-of-type( 6 ) .hatena-module-title{
	overflow : hidden;
}
.page-index #main-inner > div:nth-of-type( 6 ) .hatena-module-title a{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975826537" );
}
.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975826506" );
}
.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries :where( time , .author ){
	color : #11a3b9;
}
@media screen and ( max-width : 750px ){
	.page-index #main-inner > div:nth-of-type( 6 ){
		padding-top : calc( 796 var( --remBase ) );
		margin-top : calc( 43 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 6 )::before{
		left : calc( 44 * 100% / 750 );
	}
	.page-index #main-inner > div:nth-of-type( 6 )::after{
		left : calc( 20 * 100% / 750 );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .hatena-module-title{
		width : calc( 449 * 100% / 750 );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries::before{
		top : calc( -403 var( --remBase ) );
		left : calc( 320 * 100% / 750 );
		width : calc( 451 * 100% / 750 );
		height : calc( 1356 var( --remBase ) );
	}
}
@media screen and ( width >= 751px ) and ( width <= 1122px ){
	.page-index #main-inner > div:nth-of-type( 6 ){
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #main-inner > div:nth-of-type( 6 ){
		padding-top : calc( 98 var( --remBase ) );
		margin-top : calc( 88 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 6 )::before{
		left : calc( 429 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 6 )::after{
		left : calc( 45 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .hatena-module-title{
		width : calc( 211 * 100% / 1040 );
		margin-left : calc( 115 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries::before{
		top : calc( 309 var( --remBase ) );
		left : calc( 785 * 100% / 1040 );
		width : calc( 211 * 100% / 1040 );
		height : calc( 632 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries li{
		margin-left : calc( 114 * 100% / 1040 );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries-see-more{
		margin-top : calc( 48 var( --remBase ) );
	}
	.page-index #main-inner > div:nth-of-type( 6 ) .recent-entries-see-more a{
		margin-left : calc( 114 * 100% / 1040 );
	}
}

/* --------------------------------------------
WHAT HOW
--------------------------------------------- */
.page-index :where( #what , #how ){
	position : relative;
}
.page-index :where( #what , #how )::before{
	position : absolute;
	top : 0;
	z-index : 0;
	display : block;
	height : 100%;
	content : "";
}
.page-index :where( #what , #how ) h3{
	position : relative;
	z-index : 2;
}
.page-index :where( #what , #how ) h3::before{
	position : absolute;
	display : block;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975826799" ) 0 0 / contain no-repeat;
}
.page-index :where( #what , #how ) h3::after{
	position : absolute;
	z-index : -1;
	display : block;
	content : "";
}
.page-index :where( #what , #how ) h3 span{
	display : block;
}
.page-index :where( #what , #how ) h3 > span:nth-of-type( 1 ) img{
	height : 100%;
}
.page-index :where( #what , #how ) h3 > span:nth-of-type( 2 ) span{
	font-weight : 600;
	color : #fff;
	letter-spacing : .09em;
}
.page-index :where( #what , #how ) p{
	position : relative;
	z-index : 2;
	color : #fff;
	letter-spacing : .1em;
}
@media screen and ( max-width : 750px ){
	.page-index :where( #what , #how ){
		overflow : hidden;
	}
	.page-index :where( #what , #how )::before{
		width : calc( 730 * 100% / 750 );
	}
	.page-index :where( #what , #how ) h3::before{
		top : calc( -443 var( --remBase ) );
		left : calc( -10 * 100% / 750 );
		width : calc( 319 * 100% / 750 );
		height : calc( 396 var( --remBase ) );
	}
	.page-index :where( #what , #how ) h3 > span:nth-of-type( 1 ){
		height : calc( 30 var( --remBase ) );
		margin-left : calc( 46 * 100% / 750 );
	}
	.page-index :where( #what , #how ) h3 > span:nth-of-type( 2 ){
		height : calc( 330 var( --remBase ) );
		margin-top : calc( ( 89 - 20 ) var( --remBase ) );
		margin-left : calc( 53 * 100% / 750 );
	}
	.page-index :where( #what , #how ) h3 > span:nth-of-type( 2 ) span{
		font-size : calc( 70 var( --remBase ) );
		line-height : calc( 110 / 70 );
	}
	.page-index :where( #what , #how ) p{
		padding-left : calc( 52 * 100% / 750 );
		padding-right : calc( 45 * 100% / 750 );
		margin-top : calc( ( 78 - 20 - 13.5 ) var( --remBase ) );
		font-size : calc( 28 var( --remBase ) );
		line-height : calc( 55 / 28 );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index :where( #what , #how )::before{
		width : calc( 1036 * 100% / 1040 );
	}
	.page-index :where( #what , #how ) h3::before{
		top : calc( -93 var( --remBase ) );
		left : calc( 28 * 100% / 1040 );
		width : calc( 150 * 100% / 1040 );
		height : calc( 185 var( --remBase ) );
	}
	.page-index :where( #what , #how ) h3 > span:nth-of-type( 1 ){
		height : calc( 17 var( --remBase ) );
		margin-left : calc( 111 * 100% / 1040 );
	}
	.page-index :where( #what , #how ) h3 > span:nth-of-type( 2 ){
		height : calc( 122 var( --remBase ) );
		margin-top : calc( ( 41 - 10 ) var( --remBase ) );
		margin-left : calc( 111 * 100% / 1040 );
	}
	.page-index :where( #what , #how ) h3 > span:nth-of-type( 2 ) span{
		font-size : calc( 41 var( --remBase ) );
		line-height : calc( 61 / 41 );
	}
	.page-index :where( #what , #how ) p{
		margin-top : calc( ( 51 - 10 - 6 ) var( --remBase ) );
		margin-left : calc( 111 * 100% / 1040 );
		font-size : calc( 13 var( --remBase ) );
		line-height : calc( 25 / 13 );
	}
}

/* --------------------------------------------
WHAT
--------------------------------------------- */
.page-index #what::before{
	background-color : var( --primary );
}
.page-index #what h3::after{
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975826802" ) 0 0 / contain no-repeat;
}
.page-index #what .list01 li:nth-child( 1 ) a{
	background-color : #ff6c88;
}
.page-index #what .list01 li:nth-child( 2 ) a{
	background-color : #59b952;
}
.page-index #what .list01 li:nth-child( 3 ) a{
	background-color : #f6a60b;
}
.page-index #what .list01 li:nth-child( 4 ) a{
	background-color : #11a3b9;
}
.page-index #what .list01 li:nth-child( 5 ) a{
	background-color : #888988;
}
.page-index #what .list01{
	position : relative;
	z-index : 2;
}
.page-index #what .list01 a{
	position : relative;
	display : grid;
	place-items : center;
	width : 100%;
	transition : filter .3s ease-in;
}
.page-index #what .list01 span:nth-of-type( 1 ){
	position : absolute;
	overflow : hidden;
	text-align : center;
}
.page-index #what .list01 span:nth-of-type( 1 ) img{
	height : 100%;
}
.page-index #what .list01 span:nth-of-type( 2 ){
	width : 100%;
	font-weight : 600;
	color : #fff;
	letter-spacing : .15em;
}
.page-index #what .list01 span:nth-of-type( 2 )::after{
	font-size : 0;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825714" ) 0 0 / contain no-repeat;
	transition : translate .3s ease-in;
}
.page-index #what .list01 a:hover{
	filter : brightness( 1.2 );
}
.page-index #what .list01 a:hover span:nth-of-type( 2 )::after{
	translate : 50% 0;
}
.page-index #what .list02{
	position : relative;
	margin-inline : auto;
	color : white;
}
.page-index #what .list02 > li:nth-child( 1 ){
	background-color : #812b22;
}
.page-index #what .list02 > li:nth-child( 2 ){
	background-color : #224a82;
}
.page-index #what .list02 h4{
	font-size : 0;
	text-align : center;
}
.page-index #what .list02 h4 img{
	filter : var( --filterWhite );
}
.page-index #what .list02 ul{
	display : grid;
	justify-content : space-between;
}
.page-index #what .list02 ul li , .page-index #what .list02 ul a{
	height : 100%;
}
.page-index #what .list02 a{
	display : grid;
	place-items : center;
	font-weight : 600;
	color : white;
	text-align : center;
	border-color : white;
	border-style : solid;
}
@media screen and ( max-width : 750px ){
	.page-index #what{
		padding-top : calc( 708 var( --remBase ) );
		padding-bottom : calc( 117 var( --remBase ) );
	}
	.page-index #what::before{
		left : 0;
	}
	.page-index #what h3::after{
		top : calc( -542 var( --remBase ) );
		left : calc( 146 * 100% / 750 );
		z-index : 2;
		width : calc( 558 * 100% / 750 );
		height : calc( 438 var( --remBase ) );
	}
	.page-index #what h3 > span:nth-of-type( 1 ){
		width : calc( 371 * 100% / 750 );
	}
	.page-index #what .list01{
		margin-top : calc( ( 131 - 13.5 ) var( --remBase ) );
	}
	.page-index #what .list01 > li{
		width : calc( 590 * 100% / 750 );
		margin-left : calc( 80 * 100% / 750 );
	}
	.page-index #what .list01 > li + li{
		margin-top : calc( 50 var( --remBase ) );
	}
	.page-index #what .list01 a{
		position : relative;
		height : calc( 150 var( --remBase ) );
	}
	.page-index #what .list01 span:nth-of-type( 1 ){
		top : calc( 46 var( --remBase ) );
		left : 0;
		width : fit-content;
		height : calc( 58 var( --remBase ) );
		translate : -50% 0;
	}
	.page-index #what .list01 span:nth-of-type( 2 ){
		font-size : calc( 45 var( --remBase ) );
		text-align : center;
	}
	.page-index #what .list01 span:nth-of-type( 2 )::after{
		position : absolute;
		top : calc( 47.5 var( --remBase ) );
		right : calc( 36 * 100% / 590 );
		width : calc( 33 * 100% / 590 );
		height : calc( 55 var( --remBase ) );
	}
	.page-index #what .list01 li:nth-child( 5 ) span:nth-of-type( 2 ){
		letter-spacing : .07em;
	}
	.page-index #what .list02{
		width : calc( 590 var( --breakBase ) );
		margin-top : calc( 58 var( --remBase ) );
	}
	.page-index #what .list02 > li{
		padding-inline : calc( 25 * 100% / 590 );
		padding-top : calc( 37 var( --remBase ) );
		padding-bottom : calc( 25 var( --remBase ) );
	}
	.page-index #what .list02 > li + li{
		margin-top : calc( 13 var( --remBase ) );
	}
	.page-index #what .list02 h4 img{
		height : calc( 52 var( --remBase ) );
	}
	.page-index #what .list02 ul{
		grid-template-columns : repeat( 2 , calc( 256 * 100% / 540 ) );
		grid-auto-rows : calc( 144 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	.page-index #what .list02 a{
		font-size : 2.8rem;
		line-height : calc( 45 / 28 );
		border-width : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #what{
		padding-top : calc( 93 var( --remBase ) );
		padding-bottom : calc( 121 var( --remBase ) );
	}
	.page-index #what::before{
		left : calc( -41 * 100% / 1040 );
	}
	.page-index #what::after{
		position : absolute;
		bottom : calc( -135 var( --remBase ) );
		left : calc( -15 * 100% / 1040 );
		z-index : -1;
		z-index : 0;
		display : block;
		width : calc( 621 * 100% / 1040 );
		height : calc( 213 var( --remBase ) );
		pointer-events : none;
		content : "";
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825629" ) 0 0 / contain no-repeat;
	}
	.page-index #what h3::after{
		top : calc( -42 var( --remBase ) );
		left : calc( 546 * 100% / 1040 );
		width : calc( 419 * 100% / 1040 );
		height : calc( 326 var( --remBase ) );
	}
	.page-index #what h3 > span:nth-of-type( 1 ){
		width : calc( 205 * 100% / 1040 );
	}
	.page-index #what .list01{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 62 var( --remBase ) );
		column-gap : calc( 32 * 100% / 1040 );
		justify-content : center;
		margin-top : calc( ( 84 - 6 ) var( --remBase ) );
	}
	.page-index #what .list01 > li{
		width : calc( 250 * 100% / 1040 );
	}
	.page-index #what .list01 a{
		height : calc( 104 var( --remBase ) );
	}
	.page-index #what .list01 span:nth-of-type( 1 ){
		top : calc( -15 var( --remBase ) );
		width : 100%;
		height : calc( 30 var( --remBase ) );
	}
	.page-index #what .list01 span:nth-of-type( 2 ){
		display : grid;
		grid-template-columns : auto calc( 14 * 100% / 250 );
		grid-auto-flow : column;
		column-gap : calc( 16 * 100% / 250 );
		align-items : center;
		justify-content : center;
		font-size : calc( 24 var( --remBase ) );
	}
	.page-index #what .list01 span:nth-of-type( 2 )::after{
		height : calc( 23 var( --remBase ) );
	}
	.page-index #what .list01 li:nth-child( 5 ) span:nth-of-type( 2 ){
		letter-spacing : .05em;
	}
	.page-index #what .list02{
		width : calc( 814 var( --percentBase ) );
		margin-top : calc( 57 var( --remBase ) );
	}
	.page-index #what .list02 > li{
		display : grid;
		grid-template-columns : calc( 214 * 100% / 798 ) 1fr;
		align-items : center;
		padding-block : calc( 16 var( --remBase ) );
		padding-right : calc( 16 * 100% / 814 );
	}
	.page-index #what .list02 > li + li{
		margin-top : calc( 10 var( --remBase ) );
	}
	.page-index #what .list02 h4 img{
		height : calc( 22 var( --remBase ) );
	}
	.page-index #what .list02 ul{
		grid-template-columns : repeat( 2 , calc( 276 * 100% / 584 ) );
		grid-auto-rows : calc( 52 var( --remBase ) );
	}
	.page-index #what .list02 a{
		font-size : 1.6rem;
		line-height : calc( 32.5 / 16 );
		border-width : calc( 2 var( --remBase ) );
	}
}

/* --------------------------------------------
HOW
--------------------------------------------- */
.page-index #how::before{
	background-color : #11a3b9;
}
.page-index #how h3::after{
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975824540" ) 0 0 / contain no-repeat;
}
.page-index #how .list03{
	position : relative;
	z-index : 2;
}
.page-index #how .list03 a{
	position : relative;
	display : block;
	transition : filter .3s ease-in;
}
.page-index #how .list03 a:hover{
	filter : brightness( 1.2 );
}
.page-index #how .list03 a > span:nth-of-type( 1 ){
	position : absolute;
	overflow : hidden;
	text-align : center;
}
.page-index #how .list03 a > span:nth-of-type( 1 ) img{
	height : 100%;
}
.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ){
	width : 100%;
	font-weight : 600;
	color : #fff;
}
.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) > span:nth-of-type( 1 ){
	display : block;
	text-align : center;
	text-indent : .15em;
	letter-spacing : .15em;
}
.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) > span:nth-of-type( 2 ){
	letter-spacing : .15em;
}
.page-index #how .list03 li:last-child a{
	display : grid;
	align-items : center;
	justify-content : center;
}
.page-index #how .list03 li:last-child span:nth-of-type( 2 ){
	display : block;
	font-weight : 600;
	color : #fff;
	text-align : center;
	text-indent : .15em;
	letter-spacing : .15em;
}
.page-index #how .list03 li:nth-child( 1 ) a{
	background-color : #d82b22;
}
.page-index #how .list03 li:nth-child( 2 ) a{
	background-color : #59b952;
}
.page-index #how .list03 li:nth-child( 3 ) a{
	background-color : #f6a60b;
}
.page-index #how .list03 li:nth-child( 4 ) a{
	background-color : #eb6c1a;
}
.page-index #how .list03 li:nth-child( 5 ) a{
	background-color : #ff6c88;
}
@media screen and ( max-width : 750px ){
	.page-index #how{
		padding-top : calc( 708 var( --remBase ) );
		padding-bottom : calc( 117 var( --remBase ) );
	}
	.page-index #how::before{
		left : calc( 20 * 100% / 750 );
	}
	.page-index #how h3::after{
		top : calc( -579 var( --remBase ) );
		left : calc( 129 * 100% / 750 );
		z-index : 2;
		width : calc( 570 * 100% / 750 );
		height : calc( 502 var( --remBase ) );
	}
	.page-index #how h3 > span:nth-of-type( 1 ){
		width : calc( 412 * 100% / 750 );
	}
	.page-index #how .list03{
		margin-top : calc( ( 127 - 13.5 ) var( --remBase ) );
	}
	.page-index #how .list03 > li{
		width : calc( 590 * 100% / 750 );
		margin-left : calc( 80 * 100% / 750 );
	}
	.page-index #how .list03 > li + li{
		margin-top : calc( 50 var( --remBase ) );
	}
	.page-index #how .list03 a{
		position : relative;
		height : calc( 170 var( --remBase ) );
	}
	.page-index #how .list03 a::after{
		position : absolute;
		top : calc( 57.5 var( --remBase ) );
		left : calc( 521 * 100% / 590 );
		display : block;
		width : calc( 33 * 100% / 590 );
		height : calc( 55 var( --remBase ) );
		content : "";
		background : url( ".https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825714" ) 0 0 / contain no-repeat;
		transition : translate .3s ease-in;
	}
	.page-index #how .list03 a:hover::after{
		translate : 50% 0;
	}
	.page-index #how .list03 a > span:nth-of-type( 1 ){
		top : calc( 46 var( --remBase ) );
		left : 0;
		width : fit-content;
		height : calc( 58 var( --remBase ) );
		translate : -50% 0;
	}
	.page-index #how .list03 li:not( :last-child ) a{
		padding-top : calc( 38 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) span:nth-of-type( 1 ){
		font-size : calc( 30 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) span:nth-of-type( 2 ){
		display : block;
		margin-top : calc( 23 var( --remBase ) );
		font-size : calc( 50 var( --remBase ) );
		text-align : center;
		text-indent : .15em;
	}
	.page-index #how .list03 li:last-child span:nth-of-type( 2 ){
		font-size : calc( 37 var( --remBase ) );
		line-height : calc( 60 / 37 );
	}
}
@media screen and ( width >= 751px ) and ( width <= 1122px ){
	.page-index #how{
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #how{
		padding-top : calc( 128 var( --remBase ) );
		padding-bottom : calc( 121 var( --remBase ) );
	}
	.page-index #how::before{
		left : calc( 45 * 100% / 1040 );
	}
	.page-index #how h3::after{
		top : calc( -31 var( --remBase ) );
		left : calc( 583 * 100% / 1040 );
		width : calc( 404 * 100% / 1040 );
		height : calc( 356 var( --remBase ) );
	}
	.page-index #how h3 > span:nth-of-type( 1 ){
		width : calc( 227 * 100% / 1040 );
	}
	.page-index #how .list03{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 61 var( --remBase ) );
		column-gap : calc( 35 * 100% / 1040 );
		justify-content : center;
		margin-top : calc( ( 84 - 6 ) var( --remBase ) );
	}
	.page-index #how .list03 li{
		width : calc( 248 * 100% / 1040 );
	}
	.page-index #how .list03 a{
		height : calc( 116 var( --remBase ) );
	}
	.page-index #how .list03 a > span:nth-of-type( 1 ){
		top : calc( -15 var( --remBase ) );
		width : 100%;
		height : calc( 30 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) a{
		padding-top : calc( 32 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) span + span{
		margin-top : calc( 14 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) span:nth-of-type( 1 ){
		font-size : calc( 20 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) span:nth-of-type( 2 ){
		display : grid;
		grid-template-columns : auto calc( 14 * 100% / 248 );
		grid-auto-flow : column;
		column-gap : calc( 18 * 100% / 248 );
		align-items : center;
		justify-content : center;
		font-size : calc( 24 var( --remBase ) );
	}
	.page-index #how .list03 li:not( :last-child ) a > span:nth-of-type( 2 ) span:nth-of-type( 2 )::after{
		display : block;
		height : calc( 23 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825714" ) 0 0 / contain no-repeat;
		transition : translate .3s ease-in;
	}
	.page-index #how .list03 li:not( :last-child ) a:hover span:nth-of-type( 2 ) span:nth-of-type( 2 )::after{
		translate : 50% 0;
	}
	.page-index #how .list03 li:last-child span:nth-of-type( 2 ){
		font-size : calc( 24 var( --remBase ) );
		line-height : calc( 32 / 24 );
	}
	.page-index #how .list03 li:last-child span:nth-of-type( 2 )::after{
		display : inline-block;
		width : calc( 14 var( --remBase ) );
		height : calc( 23 var( --remBase ) );
		margin-left : calc( 18 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825714" ) 0 0 / contain no-repeat;
		transition : translate .3s ease-in;
	}
	.page-index #how .list03 li:last-child a:hover span:nth-of-type( 2 )::after{
		translate : 50% 0;
	}
}
.page-index #main .hatena-module-entries-access-ranking{
	position : relative;
}
.page-index #main .hatena-module-entries-access-ranking::before{
	position : absolute;
	top : 0;
	display : block;
	height : 100%;
	content : "";
	background-color : #ff6c88;
}
.page-index #main .hatena-module-entries-access-ranking :where( .hatena-module-title , .hatena-module-body ){
	position : relative;
	z-index : 2;
}
.page-index #main .hatena-module-entries-access-ranking .hatena-module-title{
	width : 100%;
	overflow : hidden;
	font-size : 0;
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975826012" ) 0 0 / contain no-repeat;
}
.page-index #main .hatena-module-entries-access-ranking li{
	margin-bottom : 0;
}
.page-index #main .hatena-module-entries-access-ranking li::before{
	content : none;
}
.page-index #main .hatena-module-entries-access-ranking li a{
	position : relative;
	height : 100%;
	background-color : #fff;
}
.page-index #main .hatena-module-entries-access-ranking li a::before{
	position : absolute;
	z-index : 1;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
.page-index #main .hatena-module-entries-access-ranking li:nth-child( 1 ) a::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825374" );
}
.page-index #main .hatena-module-entries-access-ranking li:nth-child( 2 ) a::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825375" );
}
.page-index #main .hatena-module-entries-access-ranking li:nth-child( 3 ) a::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825366" );
}
.page-index #main .hatena-module-entries-access-ranking li:nth-child( 4 ) a::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825368" );
}
.page-index #main .hatena-module-entries-access-ranking li:nth-child( 5 ) a::before{
	background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825373" );
}
.page-index #main .hatena-module-entries-access-ranking picture{
	width : 100%;
}
.page-index #main .hatena-module-entries-access-ranking picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.page-index #main .hatena-module-entries-access-ranking h4{
	display : -webkit-box;
	overflow : hidden;
	font-weight : 600;
	color : #000;
	letter-spacing : .09em;
	-webkit-box-orient : vertical;
}
.page-index #main .hatena-module-entries-access-ranking time{
	display : block;
	color : #ff6c88;
	letter-spacing : .09em;
}
@media screen and ( max-width : 750px ){
	.page-index #main .hatena-module-entries-access-ranking{
		padding-top : calc( 113 var( --remBase ) );
		padding-bottom : calc( 116 var( --remBase ) );
		overflow : hidden;
	}
	.page-index #main .hatena-module-entries-access-ranking::before{
		left : 0;
		width : calc( 730 * 100% / 750 );
	}
	.page-index #main .hatena-module-entries-access-ranking .hatena-module-title{
		height : calc( 44 var( --remBase ) );
		margin-left : calc( 45 * 100% / 750 );
	}
	.page-index #main .hatena-module-entries-access-ranking .entries-access-ranking{
		margin-top : calc( 52 var( --remBase ) );
		margin-left : calc( 45 * 100% / 750 );
	}
	.page-index #main .hatena-module-entries-access-ranking li + li{
		margin-top : calc( 52 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking li{
		width : calc( 660 * 100% / 705 );
		height : calc( 215 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking li a{
		display : grid;
		grid-template-columns : calc( 215 * 100% / 705 ) 1fr;
		align-items : start;
	}
	.page-index #main .hatena-module-entries-access-ranking picture{
		grid-row : 1/4;
		grid-column : 1;
		height : calc( 215 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking h4{
		height : calc( 135 var( --remBase ) );
		padding-left : calc( 37 * 100% / 445 );
		padding-right : calc( 35 * 100% / 445 );
		margin-top : calc( ( 29 - 8.5 ) var( --remBase ) );
		font-size : calc( 28 var( --remBase ) );
		line-height : calc( 45 / 28 );
		-webkit-line-clamp : 3;
	}
	.page-index #main .hatena-module-entries-access-ranking time{
		padding-top : calc( ( 25 - 8.5 ) var( --remBase ) );
		padding-left : calc( 37 * 100% / 445 );
		padding-right : calc( 35 * 100% / 445 );
		font-size : calc( 22 var( --remBase ) );
	}
}
@media screen and ( width >= 751px ) and ( width <= 1122px ){
	.page-index #main .hatena-module-entries-access-ranking{
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #main .hatena-module-entries-access-ranking{
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 56 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking::before{
		left : calc( -41 * 100% / 1040 );
		width : calc( 1035 * 100% / 1040 );
	}
	.page-index #main .hatena-module-entries-access-ranking .hatena-module-title{
		height : calc( 22 var( --remBase ) );
		margin-left : calc( 46 * 100% / 1040 );
	}
	.page-index #main .hatena-module-entries-access-ranking .entries-access-ranking{
		display : flex ! important;
		column-gap : calc( 24 * 100% / 994 );
		justify-content : start;
		margin-top : calc( 52 var( --remBase ) );
		margin-left : calc( 46 * 100% / 1040 );
	}
	.page-index #main .hatena-module-entries-access-ranking li{
		width : calc( 158 * 100% / 994 );
	}
	.page-index #main .hatena-module-entries-access-ranking li a{
		display : block;
		padding-bottom : calc( 32 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking li a::before{
		top : calc( -17.5 var( --remBase ) );
		left : calc( 16 * 100% / 158 );
		height : calc( 35 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking picture{
		height : calc( 152 var( --remBase ) );
	}
	.page-index #main .hatena-module-entries-access-ranking h4{
		height : calc( 80 var( --remBase ) );
		padding-left : calc( 22 * 100% / 158 );
		padding-right : calc( 22 * 100% / 158 );
		margin-top : calc( ( 26 - 4 ) var( --remBase ) );
		font-size : calc( 12 var( --remBase ) );
		line-height : calc( 20 / 12 );
		-webkit-line-clamp : 4;
	}
	.page-index #main .hatena-module-entries-access-ranking time{
		padding-left : calc( 22 * 100% / 158 );
		padding-right : calc( 22 * 100% / 158 );
		margin-top : calc( ( 16 - 4 ) var( --remBase ) );
		font-size : calc( 10 var( --remBase ) );
	}
}
.page-index #series{
	position : relative;
	font-size : 0;
}
.page-index #series::before{
	position : absolute;
	top : 0;
	z-index : 0;
	z-index : 1;
	display : block;
	height : 100%;
	content : "";
	background-color : #59b952;
}
.page-index #series::after{
	position : absolute;
	z-index : 0;
	display : block;
	pointer-events : none;
	content : "";
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/4207112889975825634" ) 0 0 / contain no-repeat;
}
.page-index #series :where( h3,ul ,.urllist-see-more ){
	position : relative;
	z-index : 2;
}
.page-index #series h3{
	width : 100%;
}
.page-index #series h3 img{
	height : 100%;
}
.page-index #series #slider04{
	position : relative;
	z-index : 2;
}
.page-index #series #slider04 picture{
	width : 100%;
}
.page-index #series #slider04 picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.page-index #series .swiper-pagination{
	position : static;
	display : grid;
	grid-auto-flow : column;
	align-items : center;
}
.page-index #series .swiper-pagination-bullet{
	background-color : #fff;
	opacity : 1;
}
.page-index #series .swiper-pagination-bullet-active{
	background-color : #000;
}
@media screen and ( max-width : 750px ){
	.page-index #series{
		padding-top : calc( 115 var( --remBase ) );
		padding-bottom : calc( 118 var( --remBase ) );
		margin-top : calc( 95 var( --remBase ) );
		margin-bottom : calc( 253 var( --remBase ) );
	}
	.page-index #series::before{
		left : 0;
		width : calc( 730 * 100% / 750 );
	}
	.page-index #series::after{
		bottom : calc( -270 var( --remBase ) );
		left : calc( -13 * 100% / 750 );
		width : calc( 1314 * 100% / 750 );
		height : calc( 450 var( --remBase ) );
	}
	.page-index #series h3{
		height : calc( 44 var( --remBase ) );
		margin-left : calc( 45 * 100% / 750 );
	}
	.page-index #series #slider04{
		width : calc( 590 * 100% / 750 );
		margin-top : calc( 85 var( --remBase ) );
		margin-left : auto;
		margin-right : auto;
	}
	.page-index #series .swiper-slide{
		width : 100%;
	}
	.page-index #series picture{
		height : calc( 338 var( --remBase ) );
	}
	.page-index #series .swiper-pagination{
		column-gap : calc( 30 * 100% / 590 );
		justify-content : center;
		margin-top : calc( 41 var( --remBase ) );
	}
	.page-index #series .swiper-pagination-bullet{
		width : calc( 15 var( --remBase ) );
		height : calc( 15 var( --remBase ) );
	}
	.page-index #series .urllist-see-more{
		margin-top : calc( 104 var( --remBase ) );
	}
	.page-index #series .urllist-see-more a{
		margin-left : calc( 234 * 100% / 750 );
	}
}
@media screen and ( width >= 751px ) and ( width <= 1078px ){
	.page-index #series{
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #series{
		padding-top : calc( 55 var( --remBase ) );
		padding-bottom : calc( 77 var( --remBase ) );
		margin-top : calc( 54 var( --remBase ) );
		margin-bottom : calc( 195 var( --remBase ) );
	}
	.page-index #series::before{
		left : calc( 182 * 100% / 1040 );
		width : calc( 877 * 100% / 1040 );
	}
	.page-index #series::after{
		bottom : calc( -257 var( --remBase ) );
		left : calc( 47 * 100% / 1040 );
		width : calc( 621 * 100% / 1040 );
		height : calc( 213 var( --remBase ) );
	}
	.page-index #series h3{
		height : calc( 21 var( --remBase ) );
		margin-left : calc( 254 * 100% / 1040 );
	}
	.page-index #series #slider04{
		width : calc( ( 743 + 44 ) * 100% / 1040 );
		margin-top : calc( 36 var( --remBase ) );
		margin-left : calc( ( 252 - 22 ) * 100% / 1040 );
	}
	.page-index #series .swiper-slide{
		width : calc( 394 * 100% / 787 );
		padding-left : calc( 22 * 100% / 787 );
		padding-right : calc( 22 * 100% / 787 );
	}
	.page-index #series picture{
		height : calc( 197 var( --remBase ) );
	}
	.page-index #series .swiper-pagination{
		column-gap : calc( 18 * 100% / 765 );
		justify-content : end;
		padding-right : calc( 22 * 100% / 787 );
		margin-top : calc( 65 var( --remBase ) );
	}
	.page-index #series .swiper-pagination-bullet{
		width : calc( 9 var( --remBase ) );
		height : calc( 9 var( --remBase ) );
	}
	.page-index #series .urllist-see-more{
		margin-top : calc( -9 var( --remBase ) );
	}
	.page-index #series .urllist-see-more a{
		margin-left : calc( 252 * 100% / 1040 );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #bottom-editarea{
		position : relative;
		z-index : 1;
	}
}

/* --------------------------------------------
ANIMATION
--------------------------------------------- */
.page-index #hero h1 .animation{
	overflow : hidden;
}
.page-index #hero h1 .animation img{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index #hero h1 .animation.is-animation img{
	translate : 0 0;
}
.page-index #hero p{
	overflow : hidden;
}
.page-index #hero p span{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
	transition-delay : .5s;
}
.page-index #hero p.is-animation span{
	translate : 0 0;
}
@media screen and ( max-width : 750px ){
	.page-index #about.animation{
		--maxWidth : 100%;
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index #about.animation{
		--maxWidth : calc( 408 * 100% / 1040 );
	}
}
.page-index #about.animation{
	max-width : 0;
	animation : anim01 1.5s forwards cubic-bezier( 1 , 0 , 0 , 1 );
}
@keyframes anim01{
	0%{
		max-width : 0%;
	}
	100%{
		max-width : var( --maxWidth );
	}
}
.page-index .hatena-module-recent-entries::before{
	max-width : 0;
	transition : max-width 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
}
.page-index .hatena-module-recent-entries .hatena-module-title a{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index .hatena-module-recent-entries li{
	overflow : hidden;
}
.page-index .hatena-module-recent-entries li a{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : -110% 0;
}
.page-index .hatena-module-recent-entries li:nth-child( 1 ) a{
	transition-delay : .25s;
}
.page-index .hatena-module-recent-entries li:nth-child( 2 ) a{
	transition-delay : .5s;
}
.page-index .hatena-module-recent-entries li:nth-child( 3 ) a{
	transition-delay : .75s;
}
.page-index .hatena-module-recent-entries.is-animation::before{
	max-width : 100%;
}
.page-index .hatena-module-recent-entries.is-animation .hatena-module-title a{
	translate : 0 0;
}
.page-index .hatena-module-recent-entries.is-animation li a{
	translate : 0 0;
}
.page-index :where( #what , #how ) h3.animation::after{
	opacity : 0;
	transition : opacity 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
}
.page-index :where( #what , #how ) h3.animation span:nth-of-type( 1 ){
	overflow : hidden;
}
.page-index :where( #what , #how ) h3.animation span:nth-of-type( 1 ) img{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index :where( #what , #how ) h3.animation span:nth-of-type( 2 ){
	overflow : hidden;
}
.page-index :where( #what , #how ) h3.animation span:nth-of-type( 2 ) span{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index :where( #what , #how ) h3.animation.is-animation::after{
	opacity : 1;
}
.page-index :where( #what , #how ) h3.animation.is-animation span:nth-of-type( 1 ) img{
	translate : 0 0;
}
.page-index :where( #what , #how ) h3.animation.is-animation span:nth-of-type( 2 ) span{
	translate : 0 0;
}
.page-index :where( #what , #how ) .list01.animation li , .page-index :where( #what , #how ) .list03.animation li{
	opacity : 0;
	transition : opacity 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 2 ) , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 2 ){
	transition-delay : .3s;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 3 ) , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 3 ){
	transition-delay : .6s;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 4 ) , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 4 ){
	transition-delay : .9s;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 5 ) , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 5 ){
	transition-delay : 1.2s;
}
.page-index :where( #what , #how ) .list01.animation span:nth-of-type( 1 ) , .page-index :where( #what , #how ) .list03.animation span:nth-of-type( 1 ){
	overflow : hidden;
}
.page-index :where( #what , #how ) .list01.animation span:nth-of-type( 1 ) img , .page-index :where( #what , #how ) .list03.animation span:nth-of-type( 1 ) img{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 2 ) span:nth-of-type( 1 ) img , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 2 ) span:nth-of-type( 1 ) img{
	transition-delay : .3s;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 3 ) span:nth-of-type( 1 ) img , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 3 ) span:nth-of-type( 1 ) img{
	transition-delay : .6s;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 4 ) span:nth-of-type( 1 ) img , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 4 ) span:nth-of-type( 1 ) img{
	transition-delay : .9s;
}
.page-index :where( #what , #how ) .list01.animation li:nth-of-type( 5 ) span:nth-of-type( 1 ) img , .page-index :where( #what , #how ) .list03.animation li:nth-of-type( 5 ) span:nth-of-type( 1 ) img{
	transition-delay : 1.2s;
}
.page-index :where( #what , #how ) .list01.animation.is-animation li , .page-index :where( #what , #how ) .list03.animation.is-animation li{
	opacity : 1;
}
.page-index :where( #what , #how ) .list01.animation.is-animation span:nth-of-type( 1 ) img , .page-index :where( #what , #how ) .list03.animation.is-animation span:nth-of-type( 1 ) img{
	translate : 0 0;
}
@media screen and ( max-width : 750px ){
	.page-index .hatena-module-entries-access-ranking{
		--titleHeight : calc( 44 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index .hatena-module-entries-access-ranking{
		--titleHeight : calc( 22 var( --remBase ) );
	}
}
.page-index .hatena-module-entries-access-ranking .hatena-module-title{
	overflow : hidden;
	background-position-y : var( --titleHeight );
	transition : background 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
}
.page-index .hatena-module-entries-access-ranking .hatena-module-title.is-animation{
	background-position-y : 0;
}
.page-index .hatena-module-entries-access-ranking .hatena-module-body li{
	opacity : 0;
	transition : opacity 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
}
.page-index .hatena-module-entries-access-ranking .hatena-module-body li:nth-child( 2 ){
	transition-delay : .3s;
}
.page-index .hatena-module-entries-access-ranking .hatena-module-body li:nth-child( 3 ){
	transition-delay : .6s;
}
.page-index .hatena-module-entries-access-ranking .hatena-module-body li:nth-child( 4 ){
	transition-delay : .9s;
}
.page-index .hatena-module-entries-access-ranking .hatena-module-body li:nth-child( 5 ){
	transition-delay : 1.2s;
}
.page-index .hatena-module-entries-access-ranking .hatena-module-body.is-animation li{
	opacity : 1;
}
.page-index #series h3.animation{
	overflow : hidden;
}
.page-index #series h3.animation img{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index #series h3.animation.is-animation img{
	translate : 0 0;
}
.page-index .urllist-see-more{
	overflow : hidden;
}
.page-index .urllist-see-more a{
	transition : translate 1.5s cubic-bezier( 1 , 0 , 0 , 1 );
	translate : 0 110%;
}
.page-index .urllist-see-more.is-animation a{
	translate : 0 0;
}
@media screen and ( max-width : 750px ){
	.page-index .urllist-see-more{
		height : calc( 70 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 751px ){
	.page-index .urllist-see-more{
		height : calc( 27 var( --remBase ) );
	}
}

/* --------------------------------------------
FLOAT LABELS
--------------------------------------------- */
body.page-index[data-scroll="down"] #content-inner::before{
	animation : up01 1.5s forwards ease-in;
}
body.page-index[data-scroll="up"] #content-inner::after{
	animation : down01 1.5s forwards ease-in;
}
@keyframes up01{
	0%{
		translate : 0 0;
	}
	33%{
		translate : 0 calc( 10 var( --remBase ) );
	}
	100%{
		translate : 0 0;
	}
}
@keyframes down01{
	0%{
		translate : 0 0;
	}
	33%{
		translate : 0 calc( -10 var( --remBase ) );
	}
	100%{
		translate : 0 0;
	}
}
body.page-index[data-scroll="down"] #slider02::before , body.page-index[data-scroll="down"] #slider02::before , body.page-index[data-scroll="down"] #main-inner > div:nth-of-type( 4 ) ul::before , body.page-index[data-scroll="down"] #what h3::before , body.page-index[data-scroll="down"] #what::after , body.page-index[data-scroll="down"] #main-inner > div:nth-of-type( 6 ) ul::before , body.page-index[data-scroll="down"] #how h3::before , body.page-index[data-scroll="down"] #slider03::after , body.page-index[data-scroll="down"] #series::after{
	animation : up02 2s forwards ease-in;
}
body.page-index[data-scroll="up"] #slider02::before , body.page-index[data-scroll="up"] #slider02::before , body.page-index[data-scroll="up"] #main-inner > div:nth-of-type( 4 ) ul::before , body.page-index[data-scroll="up"] #what h3::before , body.page-index[data-scroll="up"] #what::after , body.page-index[data-scroll="up"] #main-inner > div:nth-of-type( 6 ) ul::before , body.page-index[data-scroll="up"] #how h3::before , body.page-index[data-scroll="up"] #slider03::after , body.page-index[data-scroll="up"] #series::after{
	animation : down02 2s forwards ease-in;
}
@keyframes up02{
	0%{
		translate : 0 0;
	}
	33%{
		translate : 0 2%;
	}
	100%{
		translate : 0 0;
	}
}
@keyframes down02{
	0%{
		translate : 0 0;
	}
	33%{
		translate : 0 -2%;
	}
	100%{
		translate : 0 0;
	}
}