@charset "UTF-8";

/* --------------------------------------------
SERVICE
--------------------------------------------- */
#service{
	background-color : var( --cyan );
	header{
		h2{
			color : black;
			text-align : center;
		}
	}
	.development{
		color : black;
		h3 , p{
			text-align : center;
		}
		h3{
			font-weight : 400;
		}
		p + p{
			margin-top : 1lh;
		}
		em{
			text-decoration : underline;
			text-underline-offset : .1em;
		}
		strong{
			display : block;
			font-weight : 700;
			text-align : center;
		}
	}
	.infoGraphic{
		h4{
			text-align : center;
			filter : drop-shadow( calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) calc( 8 * var( --remBase ) ) color-mix( in srgb , #02999f 30% , transparent ) );
		}
	}
	.turn{
		h3{
			text-align : center;
		}
	}
	.conclusion{
		h2{
			text-align : center;
		}
		a{
			display : block;
			background-color : var( --yellow );
		}
		p{
			font-weight : 700;
			text-align : center;
			text-indent : .1em;
			letter-spacing : .1em;
		}
		li{
			position : relative;
			padding-left : 1.5em;
			font-weight : 700;
			color : #4c4948;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				letter-spacing : 0;
			}
			em{
				text-decoration : underline;
				text-underline-offset : .1em;
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 53 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		header{
			h2{
				font-size : calc( 28 * var( --remBase ) );
				font-weight : 700;
				line-height : calc( 36 / 28 );
				text-align : center;
				text-indent : .06em;
				letter-spacing : .06em;
			}
		}
		.development{
			margin-top : calc( 29 * var( --remBase ) );
			h3 , p{
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 30 / 14 );
			}
			strong{
				margin-top : calc( 22 * var( --remBase ) );
				font-size : calc( 21 * var( --remBase ) );
				line-height : calc( 30 / 21 );
				text-align : center;
				text-indent : .03em;
				letter-spacing : .03em;
			}
		}
		.infoGraphic{
			position : relative;
			padding-top : calc( 298 * var( --remBase ) );
			&::before{
				position : absolute;
				top : calc( 167.5 * var( --remBase ) );
				left : 50%;
				z-index : 1;
				display : block;
				width : calc( 2 * var( --contentBase ) );
				height : calc( 156 * var( --remBase ) );
				font-size : 0;
				content : "";
				background-color : var( --yellow );
				translate : -50% 0;
			}
			h4{
				img{
					height : calc( 83 * var( --remBase ) );
				}
			}
			> picture{
				position : absolute;
				top : 0;
				left : 50%;
				translate : -50% 0;
				img{
					height : calc( 316.45 * var( --remBase ) );
				}
			}
		}
		.turn{
			margin-top : calc( 51 * var( --remBase ) );
			h3{
				font-size : calc( 21 * var( --remBase ) );
				font-weight : 700;
				line-height : calc( 30 / 21 );
				text-align : center;
				text-indent : .03em;
				letter-spacing : .03em;
			}
			#listServices{
				width : calc( 335 * var( --viewportBase ) );
				margin-inline : auto;
				margin-top : calc( 25 * var( --remBase ) );
				p{
					position : relative;
					padding-inline : calc( 27.5 * var( --contentBase ) );
					margin-top : calc( ( 16.5 - ( ( 28 - 19 ) / 2 ) - 7 ) * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 28 / 14 );
				}
				> li{
					&:nth-child( 1 ){
						> a{
							&::after{
								margin-top : calc( ( -9 - 7 )  * var( --remBase ) );
							}
						}
						.more{
							margin-top : calc( 4.4 * var( --remBase ) );
						}
					}
					&:nth-child( 2 ){
						> a{
							&::after{
								margin-top : calc( ( 21 - 7 ) * var( --remBase ) );
							}
						}
						.more{
							margin-top : calc( 8 * var( --remBase ) );
						}
					}
					&:nth-child( 3 ){
						> a{
							&::after{
								margin-top : calc( ( -14 - 7 ) * var( --remBase ) );
							}
						}
						.more{
							margin-top : calc( 1.8 * var( --remBase ) );
						}
					}
				}
			}
		}
		.conclusion{
			margin-top : calc( 47 * var( --remBase ) );
			h2{
				font-size : calc( 21 * var( --remBase ) );
				font-weight : 700;
				line-height : calc( 30 / 21 );
				text-align : center;
				text-indent : .03em;
				letter-spacing : .03em;
			}
			a{
				display : block;
				width : calc( 340 * var( --viewportBase ) );
				padding-top : calc( 23 * var( --remBase ) );
				padding-bottom : calc( 53 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( 20 * var( --remBase ) );
				border-radius : calc( 25 * var( --remBase ) );
				box-shadow : calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) color-mix( in sRGB , black 16% , transparent );
				p{
					display : grid;
					align-items : start;
					justify-content : end;
					width : auto;
					height : calc( 131 * var( --remBase ) );
					aspect-ratio : 279 / 131;
					padding-top : calc( 29 * var( --remBase ) );
					padding-right : calc( 35.9 * 100% / 340 );
					margin-inline : auto;
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 25 / 18 );
					color : #4c4948;
					text-align : center;
					background : image-set( url( "../images/home/service/char01_sp@1x.webp" ) type( "image/webp" ) 1x , url( "../images/home/service/char01_sp@2x.webp" ) type( "image/webp" ) 2x ) 0 0 / contain no-repeat;
				}
			}
			ul{
				padding-left : calc( 23 * 100% / 340 );
				margin-top : calc( 26.5 * var( --remBase ) );
			}
			li{
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
				+ li{
					margin-top : calc( 15 * var( --remBase ) );
				}
				&.diff-sp{
					letter-spacing : -.03em;
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 70 * var( --remBase ) );
		header{
			h2{
				font-size : calc( 35 * var( --remBase ) );
				font-weight : 900;
				line-height : calc( 63 / 35 );
				text-align : center;
				text-indent : .1em;
				letter-spacing : .1em;
			}
		}
		.development{
			margin-top : calc( 24 * var( --remBase ) );
			h3 , p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 30 / 18 );
			}
			strong{
				font-size : calc( 25 * var( --remBase ) );
				line-height : calc( 30 / 25 );
			}
		}
		.infoGraphic{
			position : relative;
			display : grid;
			grid-auto-flow : column;
			column-gap : calc( 15 * 100% / 1022 );
			align-items : center;
			justify-content : start;
			padding-left : calc( 138 * var( --contentBase ) );
			&::before{
				position : absolute;
				top : 50%;
				left : calc( 453.9 * var( --contentBase ) );
				z-index : 1;
				display : block;
				width : calc( 291.74 * var( --contentBase ) );
				height : calc( 3 * var( --remBase ) );
				font-size : 0;
				content : "";
				background-color : var( --yellow );
				translate : 0 -50%;
			}
			h4{
				img{
					height : calc( 137 * var( --remBase ) );
				}
			}
			> picture{
				img{
					height : calc( 520.95 * var( --remBase ) );
				}
			}
		}
		.turn{
			margin-top : calc( 26 * var( --remBase ) );
			h3{
				font-size : calc( 35 * var( --remBase ) );
				font-weight : 900;
				line-height : calc( 63 / 35 );
				text-align : center;
				text-indent : .1em;
				letter-spacing : .1em;
			}
			#listServices{
				margin-top : calc( 40 * var( --remBase ) );
				> li{
					&:nth-child( 1 ){
						> a{
							&::after{
								margin-top : calc( 8.5 * var( --remBase ) );
							}
						}
					}
					&:nth-child( 2 ){
						> a{
							&::after{
								margin-top : calc( 18.5 * var( --remBase ) );
							}
						}
					}
					&:nth-child( 3 ){
						> a{
							&::after{
								margin-top : calc( 18.5 * var( --remBase ) );
							}
						}
					}
				}
				p{
					padding-inline : calc( 31 * 100% / 370 );
					margin-top : calc( 19.5 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 28 / 14 );
				}
				.more{
					margin-top : calc( 5.4 * var( --remBase ) );
				}
			}
		}
		.conclusion{
			margin-top : calc( 74 * var( --remBase ) );
			h2{
				font-size : calc( 35 * var( --remBase ) );
				font-weight : 900;
				line-height : calc( 63 / 35 );
				text-align : center;
				text-indent : .1em;
				letter-spacing : .1em;
			}
			a{
				display : grid;
				grid-auto-flow : column;
				column-gap : calc( 43.1 * 100% / 1056 );
				align-items : center;
				justify-content : start;
				padding-block : calc( 60 * var( --remBase ) );
				padding-left : calc( 104 * var( --contentBase ) );
				margin-top : calc( 37 * var( --remBase ) );
				border-radius : calc( 25 * var( --remBase ) );
				p{
					width : auto;
					height : calc( 318 * var( --remBase ) );
					aspect-ratio : 192 / 318;
					padding-top : calc( 30 * var( --remBase ) );
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 30 / 18 );
					text-align : center;
					text-indent : .1em;
					letter-spacing : .1em;
					background : image-set( url( "../images/home/service/char01_pc@1x.webp" ) type( "image/webp" ) 1x , url( "../images/home/service/char01_pc@2x.webp" ) type( "image/webp" ) 2x ) 0 0 / contain no-repeat;
				}
			}
			li{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 45 / 18 );
				letter-spacing : .05em;
			}
		}
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works01{
	@media screen and ( width <= 750px ){
		margin-top : calc( 31 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 128 * var( --remBase ) );
	}
}
#otherWorks{
	@media screen and ( width <= 750px ){
		.posts{
			margin-top : calc( ( 36 - ( 18.5 - 1 ) ) * var( --remBase ) );
			> li:nth-child( 9 ){
				display : none ! important;
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-bottom : calc( ( 120 + 4 ) * var( --remBase ) );
		.posts{
			margin-top : calc( ( 58 - 69 + 6.125 ) * var( --remBase ) );
		}
		.more01{
			margin-top : calc( ( 41 + 4 ) * var( --remBase ) );
		}
	}
}