@charset "UTF-8";

/* --------------------------------------------
SERVICES
--------------------------------------------- */
.page-index .moduleService{
	@media print , screen and ( width > 750px ){
		width : min( 920px , calc( 920 * var( --viewportBase ) ) );
		margin-inline : auto;
	}
}

/* --------------------------------------------
HATENA POSTS
--------------------------------------------- */
.hatena-module-custom-indexNew{
	position : relative;
	overflow-x : clip;
	.hatena-module-title{
		margin : 0;
		text-align : center;
		a{
			font-weight : 600;
			color : var( --red );
			pointer-events : none;
			&::before{
				display : block;
				aspect-ratio : 256.2/28.32;
				margin-inline : auto;
				font-size : 0;
				content : "";
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255140943" );
				background-repeat : no-repeat;
				background-position : center;
				background-size : contain;
			}
		}
	}
	picture{
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	h3{
		display : grid;
		grid-template-columns : 1fr auto;
		align-items : center;
		font-weight : 300;
		color : white;
		letter-spacing : .05em;
		background-color : var( --red );
		&::after{
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141010" );
			filter : var( --filterWhite );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	.splide__slide{
		a{
			display : block;
		}
	}
	.urllist-see-more{
		a{
			margin-inline : auto;
			filter : var( --filterRed );
		}
	}
	@media screen and ( width <= 750px ){
		padding-bottom : calc( 88 * var( --remBase ) );
		margin-top : calc( 49.96 * var( --remBase ) );
		.hatena-module-title{
			a{
				font-size : calc( 12.88 * var( --remBase ) );
				line-height : calc( 19 / 12.88 );
				&::before{
					height : calc( 17.91 * var( --remBase ) );
					margin-bottom : calc( 7.77 * var( --remBase ) );
				}
			}
		}
		.splide{
			margin-top : calc( 22 * var( --remBase ) );
		}
		picture{
			height : calc( 114.54 * var( --remBase ) );
		}
		h3{
			column-gap : calc( 14 * 100% / 211 );
			padding-block : calc( 7.46 * var( --remBase ) );
			padding-left : calc( 12 * 100% / 234.71 );
			padding-right : calc( 11.71 * 100% / 234.71 );
			font-size : calc( 11.04 * var( --remBase ) );
			line-height : calc( 21 / 11.04 );
			&::after{
				height : calc( 15 * var( --remBase ) );
				aspect-ratio : 9/15;
			}
		}
		.urllist-see-more{
			margin-top : calc( 41.78 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-bottom : calc( 128 * var( --remBase ) );
		margin-top : calc( 100 * var( --remBase ) );
		.hatena-module-title{
			a{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 24 / 16 );
				&::before{
					height : calc( 28.32 * var( --remBase ) );
					margin-bottom : calc( 9.68 * var( --remBase ) );
				}
			}
		}
		.splide{
			margin-top : calc( 29 * var( --remBase ) );
		}
		.splide__arrow{
			position : absolute;
			top : calc( -80 * var( --remBase ) );
			img{
				height : calc( 33.6 * var( --remBase ) );
				filter : var( --filterRed );
			}
		}
		.splide__arrow--prev{
			left : calc( 50% - min( 208px , calc( 208 * var( --viewportBase ) ) ) );
		}
		.splide__arrow--next{
			left : calc( 50% + min( 208px , calc( 208 * var( --viewportBase ) ) ) );
		}
		.splide__track{
			max-width : 1200px;
			margin-inline : auto;
		}
		picture{
			height : calc( 234 * var( --remBase ) );
		}
		h3{
			column-gap : calc( 18 * 100% / 440 );
			padding-inline : calc( 20 * 100% / 480 );
			padding-top : calc( 10 * var( --remBase ) );
			padding-bottom : calc( 13 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			&::after{
				height : calc( 25 * var( --remBase ) );
				aspect-ratio : 15/25;
			}
		}
		.splide__slide:not( .is-active ) a{
			scale : calc( 320 / 480 );
		}
		.splide__slide.is-active a{
			scale : 1;
		}
		.urllist-see-more{
			margin-top : calc( 51 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.hatena-module-custom-indexNew{
		.splide__slide a{
			transition : scale .5s var( --ease-auto );
		}
	}
}

/* --------------------------------------------
CARS
--------------------------------------------- */
#indexCars{
	position : relative;
	z-index : 0;
	overflow-x : clip;
	&::before{
		position : absolute;
		z-index : -1;
		display : block;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	.title01{
		&::before{
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141119" );
		}
	}
	ul{
		margin-inline : auto;
	}
	li{
		position : relative;
		&::before{
			position : absolute;
			z-index : -1;
			display : block;
			content : "";
			background-repeat : no-repeat;
			background-position : 0 0;
			background-size : contain;
		}
		&:nth-child( 1 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141070" );
			}
			a{
				background-color : var( --red );
			}
		}
		&:nth-child( 2 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141093" );
			}
			a{
				background-color : #4181de;
			}
		}
	}
	a{
		&::after{
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141011" );
			filter : var( --filterWhite );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	p{
		font-weight : 600;
		color : white;
		letter-spacing : .2em;
	}
	@media screen and ( width <= 750px ){
		&::before{
			top : calc( 25.68 * var( --remBase ) );
			left : calc( -107.78 * var( --remBase ) );
			height : calc( 357.28 * var( --remBase ) );
			aspect-ratio : 505.78/357.28;
			background-image : image-set( url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141098" ) 1x , url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141110" ) 2x , url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141106" ) 1x , url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141113" ) 2x );
		}
		ul{
			width : calc( 308 * var( --percentBase ) );
			padding-bottom : calc( 90.28 * var( --remBase ) );
			margin-top : calc( 58 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 25 * var( --remBase ) );
		}
		a{
			display : block;
			height : calc( 83 * var( --remBase ) );
			padding-top : calc( 18.2 * var( --remBase ) );
			padding-bottom : calc( 15 * var( --remBase ) );
			text-align : center;
			box-shadow : calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) 0 color-mix( in sRGB , black 50% , transparent );
		}
		h3{
			img{
				height : calc( 20.05 * var( --remBase ) );
			}
		}
		p{
			margin-top : calc( 9.75 * var( --remBase ) );
			font-size : calc( 13.39 * var( --remBase ) );
			line-height : calc( 20 / 13.39 );
		}
		a::after{
			position : absolute;
			top : 50%;
			right : calc( 19 * 100% / 308 );
			height : calc( 21.63 * var( --remBase ) );
			aspect-ratio : 12.36/21.63;
			translate : 0 -50%;
		}
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 63 * var( --remBase ) );
		&::before{
			top : calc( 42 * var( --remBase ) );
			left : calc( 50% - min( 568px , 568 * var( --remBase ) ) );
			height : calc( 500 * var( --remBase ) );
			aspect-ratio : 1176/500;
			background-image : image-set( url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141075" ) type( "image/avif" ) 1x , url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141084" ) type( "image/avif" ) 2x , url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141079" ) type( "image/webp" ) 1x , url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141090" ) type( "image/webp" ) 2x );
		}
		ul{
			width : calc( 780 * var( --percentBase ) );
			padding-bottom : calc( 153 * var( --remBase ) );
			margin-top : calc( 127 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 42 * var( --remBase ) );
		}
		a{
			display : grid;
			grid-template-columns : 1fr auto calc( 20 * 100% / 737 ) auto;
			align-items : center;
			justify-content : start;
			height : calc( 79 * var( --remBase ) );
			padding-top : calc( 25 * var( --remBase ) );
			padding-bottom : calc( 25.68 * var( --remBase ) );
			padding-left : calc( 25 * 100% / 780 );
			padding-right : calc( 18 * 100% / 780 );
			box-shadow : calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) 0 color-mix( in sRGB , black 50% , transparent );
		}
		li{
			&:nth-child( 1 ){
				&::before{
					top : calc( 113 * var( --remBase ) );
					left : calc( -95 * 100% / 780 );
					height : calc( 190.91 * var( --remBase ) );
					aspect-ratio : 337.44/190.91;
				}
			}
			&:nth-child( 2 ){
				&::before{
					top : calc( -288 * var( --remBase ) );
					left : calc( 670.99 * 100% / 780 );
					height : calc( 417.44 * var( --remBase ) );
					aspect-ratio : 190.91/417.44;
				}
			}
		}
		h3{
			grid-row : 1;
			grid-column : 1;
			img{
				height : calc( 28.32 * var( --remBase ) );
			}
		}
		p{
			grid-row : 1;
			grid-column : 2;
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
		a::after{
			grid-row : 1;
			grid-column : 4;
			height : calc( 19 * var( --remBase ) );
			aspect-ratio : 11/19;
		}
	}
}

/* --------------------------------------------
MARQUEE
--------------------------------------------- */
:is( #topMarquee01 , #topMarquee02 ){
	width : 100%;
	background : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141127" ) center top / auto 100% repeat-x;
	@media screen and ( width <= 750px ){
		--marqueeWidth : 1141.2828;
		height : calc( 85.1 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		--marqueeWidth : 1288;
		height : calc( 96.04 * var( --remBase ) );
	}
}
@keyframes marquee{
	0%{
		background-position : 0 0;
	}
	100%{
		background-position : max( calc( -1px * var( --marqueeWidth ) ) , calc( -1 * var( --marqueeWidth ) * var( --remBase ) ) ) 0;
	}
}
#topMarquee01{
	@media screen and ( width <= 750px ){
		margin-top : calc( -15.5 * var( --remBase ) );
		margin-bottom : calc( 63.13 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 210.96 * var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#topMarquee01{
		animation : marquee 20s linear infinite;
	}
}
#topMarquee02{
	@media screen and ( width <= 750px ){
		margin-bottom : calc( 74.12 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 94.83 * var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#topMarquee02{
		animation : marquee 20s linear infinite reverse;
	}
}

/* --------------------------------------------
WHAT and HOW
--------------------------------------------- */
:where( #indexWhat , #indexHow ){
	position : relative;
	z-index : 0;
	overflow-x : clip;
	color : white;
	&::before , &::after{
		position : absolute;
		z-index : -1;
		display : block;
		font-size : 0;
		content : "";
	}
	&::before{
		top : 0;
		height : 100%;
		background-color : var( --sectionColor );
	}
	&::after{
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	h2{
		position : absolute;
		width : fit-content;
		font-weight : 600;
		font-feature-settings : "palt" on;
		color : var( --sectionColor );
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
		white-space : pre;
		background-color : #fff;
	}
	hgroup{
		position : relative;
		&::before{
			position : absolute;
			z-index : -1;
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141053" );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
		p{
			font-weight : 600;
			letter-spacing : .05em;
		}
	}
	> p{
		font-weight : 300;
	}
	li{
		a{
			position : relative;
			display : block;
			align-content : center;
			width : 100%;
			height : 100%;
			font-weight : 600;
			color : white;
			text-align : center;
			text-indent : .05em;
			letter-spacing : .05em;
			&::before , &::after{
				position : absolute;
				display : block;
				font-size : 0;
				pointer-events : none;
				content : "";
				background-repeat : no-repeat;
			}
			&::after{
				top : 50%;
				width : auto;
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141011" );
				filter : var( --filterWhite );
				background-position : center;
				background-size : contain;
				translate : 0 -50%;
			}
			span{
				text-align : center;
				text-indent : .05em;
				letter-spacing : .05em;
			}
		}
		&:nth-child( 1 ) a::before{
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141019" );
		}
		&:nth-child( 2 ) a::before{
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141026" );
		}
		&:nth-child( 3 ) a::before{
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141033" );
		}
		&:nth-child( 4 ) a::before{
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141040" );
		}
	}
	.link01{
		filter : var( --filterWhite );
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 319 * var( --remBase ) );
		padding-bottom : calc( 65.78 * var( --remBase ) );
		h2{
			top : calc( 1.63 * var( --remBase ) );
			padding-bottom : calc( 5.28 * var( --remBase ) );
			padding-left : calc( 38.89 * var( --remBase ) );
			padding-right : calc( 14.52 * var( --remBase ) );
			font-size : calc( 34.96 * var( --remBase ) );
			line-height : calc( 52 / 34.96 );
			rotate : -10deg;
		}
		hgroup{
			&::before{
				top : calc( -213 * var( --remBase ) );
				left : calc( -24.2 * var( --percentBase ) );
				height : calc( 181.7 * var( --remBase ) );
				aspect-ratio : 146.74/181.7;
			}
			img{
				height : calc( 12.88 * var( --remBase ) );
			}
			p{
				margin-top : calc( 29.12 * var( --remBase ) );
				font-size : calc( 29.9 * var( --remBase ) );
				line-height : calc( 46 / 29.9 );
			}
		}
		> p{
			margin-top : calc( 33 * var( --remBase ) );
			font-size : calc( 12.88 * var( --remBase ) );
			line-height : calc( 25.2 / 12.88 );
		}
		ul{
			width : calc( 270.02 * var( --percentBase ) );
			margin-top : calc( 35.74 * var( --remBase ) );
			margin-left : calc( 19.02 * var( --percentBase ) );
		}
		li{
			width : 100%;
			height : calc( 59.8 * var( --remBase ) );
			+ li{
				margin-top : calc( 18.2 * var( --remBase ) );
			}
		}
		li a{
			font-size : calc( 14.84 * var( --remBase ) );
			line-height : calc( 29.1 / 14.84 );
			box-shadow : calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) 0 color-mix( in sRGB , black 30% , transparent );
			&::before{
				top : 50%;
				left : 0;
				left : calc( -18.12 * 100% / 270.02 );
				width : 100%;
				height : calc( 16.28 * var( --remBase ) );
				height : 100%;
				background-position : left center;
				background-size : auto calc( 16.28 * var( --remBase ) );
				translate : 0 -50%;
			}
			&::after{
				right : calc( 12.02 * 100% / 270.02 );
				height : calc( 19.32 * var( --remBase ) );
				aspect-ratio : 11.04/19.32;
			}
			span{
				font-size : calc( 23.08 * var( --remBase ) );
				line-height : calc( 29.1 / 23.08 );
			}
		}
		.link01{
			margin-top : calc( 40.2 * var( --remBase ) );
			margin-left : auto;
			margin-right : calc( 18.8 * var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 140 * var( --remBase ) );
		padding-bottom : calc( 91 * var( --remBase ) );
		&::before{
			width : min( 980px , calc( 980 * var( --viewportBase ) ) );
		}
		h2{
			top : calc( -88.52 * var( --remBase ) );
			padding-block : calc( 5 * var( --remBase ) );
			padding-left : calc( 45 * var( --remBase ) );
			padding-right : calc( 27.6 * var( --remBase ) );
			font-size : calc( 65 * var( --remBase ) );
			line-height : calc( 98 / 65 );
			rotate : -10deg;
		}
		> :where( hgroup , p , ul ){
			width : calc( 780 * var( --percentBase ) );
			margin-left : calc( 68 * var( --percentBase ) );
		}
		hgroup{
			&::before{
				top : calc( -89 * var( --remBase ) );
				left : calc( -4 * var( --percentBase ) );
				height : calc( 177 * var( --remBase ) );
				aspect-ratio : 143/177;
			}
			img{
				height : calc( 15.73 * var( --remBase ) );
			}
			p{
				margin-top : calc( 24.27 * var( --remBase ) );
				font-size : calc( 41 * var( --remBase ) );
				line-height : calc( 61 / 41 );
			}
		}
		> p{
			margin-top : calc( 28 * var( --remBase ) );
			font-size : calc( 13 * var( --remBase ) );
			line-height : calc( 25 / 13 );
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 369 * 100% / 780 ) );
			grid-auto-rows : calc( 100 * var( --remBase ) );
			row-gap : calc( 34 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 62 * var( --remBase ) );
		}
		li a{
			padding-top : calc( 3 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 35.3 / 18 );
			box-shadow : calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) 0 color-mix( in sRGB , black 30% , transparent );
			&::before{
				top : 0;
				left : 50%;
				width : 100%;
				height : calc( 28.32 * var( --remBase ) );
				background-position : center;
				background-size : auto 100%;
				translate : -50% -50%;
			}
			&::after{
				right : calc( 27 * 100% / 369 );
				height : calc( 25 * var( --remBase ) );
				aspect-ratio : 15/25;
			}
			span{
				font-size : calc( 28 * var( --remBase ) );
				line-height : calc( 35.3 / 28 );
			}
		}
		.link01{
			margin-top : calc( 60 * var( --remBase ) );
			margin-left : auto;
			margin-right : calc( 70 * var( --percentBase ) );
		}
	}
}

/* --------------------------------------------
WHAT
--------------------------------------------- */
#indexWhat{
	--sectionColor : var( --red );
	&::after{
		background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255140954" );
	}
	li{
		&:nth-child( 1 ){
			a{
				background-color : var( --aqua );
			}
		}
		&:nth-child( 2 ){
			a{
				background-color : var( --green );
			}
		}
		&:nth-child( 3 ){
			a{
				background-color : var( --pink );
			}
		}
		&:nth-child( 4 ){
			a{
				background-color : var( --yellow );
			}
		}
	}
	@media screen and ( width <= 750px ){
		margin-bottom : calc( 64.22 * var( --remBase ) );
		&::before{
			left : 0;
			width : calc( 335.8 * var( --viewportBase ) );
		}
		&::after{
			top : calc( 90 * var( --remBase ) );
			left : calc( 67 * var( --viewportBase ) );
			height : calc( 193.2 * var( --remBase ) );
			aspect-ratio : 248.26/193.2;
		}
		h2{
			left : calc( -11.95 * var( --viewportBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 88 * var( --remBase ) );
		&::before{
			left : calc( 50% - min( 520px , 520 * var( --viewportBase ) ) );
			width : min( 980px , calc( 980 * var( --viewportBase ) ) );
		}
		&::after{
			top : calc( 69 * var( --remBase ) );
			left : calc( 50% + min( 1px , 1 * var( --viewportBase ) ) );
			height : calc( 314.25 * var( --remBase ) );
			aspect-ratio : 403.6/314.25;
		}
		h2{
			left : calc( 50% + max( -546.1px , -546.1 * var( --viewportBase ) ) );
		}
	}
}

/* --------------------------------------------
HOW
--------------------------------------------- */
#indexHow{
	--sectionColor : var( --aqua );
	&::after{
		background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141133" );
	}
	li{
		&:nth-child( 1 ){
			a{
				background-color : var( --green );
			}
		}
		&:nth-child( 2 ){
			a{
				background-color : var( --yellow );
			}
		}
		&:nth-child( 3 ){
			a{
				background-color : var( --pink );
			}
		}
		&:nth-child( 4 ){
			a{
				text-align : center;
				text-indent : 0;
				letter-spacing : 0;
				background-color : var( --red );
				span{
					text-align : center;
					text-indent : 0;
					letter-spacing : 0;
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		margin-bottom : calc( 64.2 * var( --remBase ) );
		&::before{
			right : 0;
			width : calc( 335.34 * var( --viewportBase ) );
		}
		&::after{
			top : calc( 76 * var( --remBase ) );
			left : calc( 89 * var( --viewportBase ) );
			height : calc( 210.33 * var( --remBase ) );
			aspect-ratio : 238.71/210.33;
		}
		h2{
			left : calc( 53.83 * var( --viewportBase ) );
		}
		> :where( hgroup , p , ul ){
			padding-left : calc( 19.2 * var( --percentBase ) );
		}
		li{
			height : auto;
		}
		li a{
			min-height : calc( 70.92 * var( --remBase ) );
			padding-block : calc( 5 * var( --remBase ) );
		}
		li:nth-child( 3 ){
			span:nth-child( 2 ){
				font-size : calc( 19 * var( --remBase ) );
			}
		}
		li:nth-child( 4 ){
			a{
				font-size : calc( 12 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 65 * var( --remBase ) );
		&::before{
			left : calc( 50% - min( 460px , 460 * var( --viewportBase ) ) );
		}
		&::after{
			top : calc( 99 * var( --remBase ) );
			left : calc( 50% + min( 83px , 83 * var( --viewportBase ) ) );
			height : calc( 342.67 * var( --remBase ) );
			aspect-ratio : 387.96/342.67;
		}
		h2{
			left : calc( 50% + max( -15.41px , -15.41 * var( --viewportBase ) ) );
		}
		li a{
			padding-top : calc( 12 * var( --remBase ) );
		}
		li:nth-child( 3 ){
			span:nth-child( 2 ){
				font-size : calc( 24 * var( --remBase ) );
			}
		}
		li:nth-child( 4 ){
			a{
				font-size : calc( 16 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
VOICES
--------------------------------------------- */
:where( #indexVoice01 , #indexVoice02 ){
	color : var( --voiceColor );
	.title01{
		color : var( --voiceColor );
		&::before{
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141056" );
			filter : var( --voiceFilter );
		}
	}
	.splide__slide{
		a{
			display : block;
			background-color : white;
		}
		picture{
			width : 100%;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
		h3{
			font-weight : 300;
			color : var( --voiceColor );
			letter-spacing : .05em;
		}
		p{
			color : var( --voiceColor );
		}
	}
	.link01{
		margin-inline : auto;
		filter : var( --voiceFilter );
	}
	@media screen and ( width <= 750px ){
		.splide__arrows{
			display : block ! important;
		}
		.splide__arrow{
			display : none ! important;
		}
		.splide__track{
			margin-top : calc( 20 * var( --remBase ) );
		}
		.splide__slide{
			a{
				padding-inline : calc( 8 * 100% / 179.4 );
				padding-top : calc( 8 * var( --remBase ) );
				padding-bottom : calc( 8.72 * var( --remBase ) );
			}
			picture{
				height : calc( 116.93 * var( --remBase ) );
			}
			h3{
				margin-top : calc( 10.07 * var( --remBase ) );
				margin-bottom : calc( 12.88 * var( --remBase ) );
				font-size : calc( 12.88 * var( --remBase ) );
				line-height : calc( 15 / 12.88 );
			}
			p{
				font-size : calc( 11.04 * var( --remBase ) );
				font-weight : 300;
				line-height : calc( 13 / 11.04 );
			}
		}
		.link01{
			margin-top : calc( 50.58 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		.splide__arrows{
			display : grid;
			grid-template-columns : auto min( 376.52px , calc( 376.52 * var( --viewportBase ) ) ) auto;
			align-items : center;
			justify-content : center;
		}
		.splide__arrow{
			column-gap : ;
			img{
				height : calc( 33.6 * var( --remBase ) );
				filter : var( --voiceFilter );
			}
		}
		.splide__track{
			max-width : 1200px;
			margin-inline : auto;
			margin-top : calc( 27 * var( --remBase ) );
		}
		.splide__slide{
			a{
				padding-inline : calc( 10 * 100% / 224 );
				padding-top : calc( 10 * var( --remBase ) );
				padding-bottom : calc( 12 * var( --remBase ) );
			}
			picture{
				height : calc( 146 * var( --remBase ) );
			}
			h3{
				margin-top : calc( 14 * var( --remBase ) );
				margin-bottom : calc( 16 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 17 / 14 );
			}
			p{
				font-size : calc( 12 * var( --remBase ) );
				font-weight : 600;
				line-height : calc( 14 / 12 );
			}
		}
		.link01{
			margin-top : calc( 51 * var( --remBase ) );
		}
	}
}
#indexVoice01{
	--voiceColor : var( --red );
	--voiceFilter : var( --filterRed );
	@media screen and ( width <= 750px ){
		margin-bottom : calc( 80 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 188 * var( --remBase ) );
	}
}
#indexVoice02{
	--voiceColor : var( --aqua );
	--voiceFilter : var( --filterAqua );
	@media screen and ( width <= 750px ){
		margin-bottom : calc( 78.78 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		margin-bottom : calc( 90.13 * var( --remBase ) );
	}
}
#main .hatena-module-custom-topRanking{
	position : relative;
	padding-inline : var( --wrapPaddingInline );
	overflow-x : clip;
	&::before{
		position : absolute;
		top : 0;
		display : block;
		height : 100%;
		font-size : 0;
		content : "";
		background-color : var( --pink );
	}
	.hatena-module-title{
		width : auto;
		font-size : 0;
		color : transparent;
		background-repeat : no-repeat;
		background-size : contain;
	}
	li{
		position : relative;
		margin-bottom : 0;
		background-color : white;
		&::before{
			top : 0;
			font-size : 0;
			background-color : transparent;
			background-repeat : no-repeat;
			background-position : 0 0;
			background-size : auto 100%;
			border : 0;
			border-radius : 0;
			translate : 0 -50%;
		}
		&:nth-child( 1 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141024" );
			}
		}
		&:nth-child( 2 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141028" );
			}
		}
		&:nth-child( 3 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141035" );
			}
		}
		&:nth-child( 4 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141043" );
			}
		}
		&:nth-child( 5 ){
			&::before{
				background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141047" );
			}
		}
	}
	picture{
		width : 100%;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	h4{
		font-weight : 300;
	}
	time{
		color : var( --pink );
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 34.32 * var( --remBase ) );
		padding-bottom : calc( 39.3 * var( --remBase ) );
		margin-bottom : calc( 40.26 * var( --remBase ) );
		&::before{
			left : 0;
			width : calc( 335.8 * var( --viewportBase ) );
		}
		.hatena-module-title{
			height : calc( 17.91 * var( --remBase ) );
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255140950" );
			background-position : center;
		}
		.hatena-module-body{
			margin-top : calc( 31.77 * var( --remBase ) );
		}
		.hatena-urllist{
			display : block;
		}
		li{
			width : 100%;
			+ li{
				margin-top : calc( 25.44 * var( --remBase ) );
			}
			&::before{
				left : calc( 9.66 * var( --percentBase ) );
				width : calc( 100% - ( 9.66 * var( --percentBase ) ) );
				height : calc( 23 * var( --remBase ) );
			}
			a{
				display : grid;
				grid-template-rows : calc( 11 * var( --remBase ) ) 1fr calc( 17.1 * var( --remBase ) ) auto calc( 10.58 * var( --remBase ) );
				grid-template-columns : calc( 98.44 * var( --percentBase ) ) calc( 9.56 * var( --percentBase ) ) 1fr calc( 25.42 * var( --percentBase ) );
				height : calc( 98.44 * var( --remBase ) );
			}
		}
		picture{
			grid-row : 1/-1;
			grid-column : 1;
			height : calc( 98.44 * var( --remBase ) );
		}
		:where( h4 , time ){
			grid-column : 3;
		}
		h4{
			display : -webkit-box;
			grid-row : 2;
			overflow : hidden;
			font-size : calc( 12.88 * var( --remBase ) );
			line-height : calc( 15 / 12.88 );
			text-overflow : ellipsis;
			-webkit-box-orient : vertical;
			-webkit-line-clamp : 3;
		}
		time{
			grid-row : 4;
			font-size : calc( 9.2 * var( --remBase ) );
			line-height : calc( 14.72 / 9.2 );
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-template-columns : auto calc( 780 * var( --percentBase ) );
		column-gap : calc( 41 * var( --percentBase ) );
		align-items : start;
		justify-content : start;
		padding-top : calc( 53 * var( --remBase ) );
		padding-bottom : calc( 69 * var( --remBase ) );
		margin-bottom : calc( 60 * var( --remBase ) );
		&::before{
			left : calc( 50% - min( 520px , 520 * var( --viewportBase ) ) );
			width : min( 980px , calc( 980 * var( --viewportBase ) ) );
		}
		.hatena-module-title{
			grid-row : 1;
			grid-column : 1;
			height : calc( 175.24 * var( --remBase ) );
			aspect-ratio : 29.03 / 175.24;
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255140949" );
			background-position : 0 0;
		}
		.hatena-module-body{
			grid-row : 1;
			grid-column : 2;
		}
		.hatena-urllist{
			flex-wrap : nowrap ! important;
			align-items : stretch;
		}
		li{
			width : calc( 139 * 100% / 780 );
			&::before{
				left : calc( 9 * 100% / 139 );
				width : calc( 130 * 100% / 139 );
				height : calc( 29 * var( --remBase ) );
			}
			.urllist-item-inner{
				height : 100%;
			}
			a{
				display : flex;
				flex-direction : column;
				height : 100%;
				padding-bottom : calc( 13 * var( --remBase ) );
			}
		}
		picture{
			height : calc( 139 * var( --remBase ) );
		}
		:where( h4 , time ){
			padding-left : calc( 18 * 100% / 139 );
			padding-right : calc( 16 * 100% / 139 );
		}
		h4{
			margin-top : calc( 18 * var( --remBase ) );
			margin-bottom : calc( 16 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 86 / 60 );
		}
		time{
			margin-top : auto;
			font-size : calc( 10 * var( --remBase ) );
			line-height : calc( 12 / 10 );
		}
	}
}

/* --------------------------------------------
LINKS
--------------------------------------------- */
#indexLinks{
	a:nth-of-type( 1 ){
		>span{
			color : white;
			background-color : var( --red );
			img{
				filter : var( --filterWhite );
			}
		}
		picture{
			width : 100%;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
	}
	a:nth-of-type( 2 ){
		display : grid;
		grid-template-columns : auto auto;
		align-content : center;
		align-items : center;
		justify-content : center;
		font-weight : 600;
		color : var( --red );
		letter-spacing : .02em;
		background-color : white;
		&::before{
			display : block;
			grid-row : 1;
			grid-column : 2;
			width : auto;
			font-size : 0;
			content : "";
			background-image : url( "https://cdn.blog.st-hatena.com/files/26006613675768774/6802888565255141010" );
			filter : var( --filterRed );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
		&::after{
			display : block;
			grid-row : 2;
			grid-column : 1/-1;
			font-size : 0;
			content : "";
			background-color : var( --red );
		}
	}
	@media screen and ( width <= 750px ){
		margin-top : calc( 40.82 * var( --remBase ) );
		a:nth-of-type( 1 ){
			display : grid;
			grid-template-columns : calc( 260 * var( --percentBase ) ) 1fr;
			height : calc( 146 * var( --remBase ) );
			picture{
				grid-row : 1;
				grid-column : 1;
				img{
					width : 100%;
					height : 100%;
					object-fit : cover;
					object-position : center;
				}
			}
			> span{
				display : grid;
				align-items : center;
				justify-content : center;
				img{
					height : calc( 28.98 * var( --remBase ) );
				}
			}
		}
		a:nth-of-type( 2 ){
			row-gap : calc( 7 * var( --remBase ) );
			column-gap : calc( 11 * var( --percentBase ) );
			height : calc( 130 * var( --remBase ) );
			font-size : calc( 15 * var( --remBase ) );
			line-height : calc( 23 / 15 );
			&::before{
				height : calc( 12.28 * var( --remBase ) );
				aspect-ratio : 7.74/12.28;
			}
			&::after{
				height : calc( 2 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-template-columns : calc( 363 * var( --percentBase ) ) calc( 557 * var( --percentBase ) );
		height : calc( 260 * var( --remBase ) );
		margin-top : calc( 60 * var( --remBase ) );
		a:nth-of-type( 1 ){
			display : block;
			grid-row : 1;
			grid-column : 1;
			picture img{
				height : calc( ( 260 - 56 ) * var( --remBase ) );
			}
			> span{
				display : grid;
				grid-template-columns : auto auto;
				align-items : center;
				justify-content : space-between;
				padding-top : calc( 16 * var( --remBase ) );
				padding-bottom : calc( 17 * var( --remBase ) );
				padding-left : calc( 24 * 100% / 363 );
				padding-right : calc( 19.66 * 100% / 363 );
				span{
					font-size : calc( 15 * var( --remBase ) );
					font-weight : 600;
					line-height : calc( 23 / 15 );
				}
				img{
					height : calc( 12.71 * var( --remBase ) );
				}
			}
		}
		a:nth-of-type( 2 ){
			grid-row : 1;
			grid-column : 2;
			row-gap : calc( 8 * var( --remBase ) );
			column-gap : calc( 30.8 * 100% / 557 );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
			&::before{
				height : calc( 12.71 * var( --remBase ) );
				aspect-ratio : 7.78/12.71;
			}
			&::after{
				height : calc( 2 * var( --remBase ) );
			}
		}
	}
}