@charset "UTF-8";

/* --------------------------------------------
CASES
--------------------------------------------- */
#cases{
	.content{
		.wp-block-image.size-full{
			img{
				width : 100%;
				height : auto;
				box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , var( --green01 ) 40% , transparent );
			}
		}
		h2{
			font-family : "Noto Serif JP" , Georgia , "Times New Roman" , serif;
			font-weight : 500;
			color : var( --green01 );
			&::after{
				display : block;
				width : 100%;
				height : 1px;
				content : "";
			}
		}
		.wp-block-list{
			> li{
				display : grid;
				grid-template-columns : auto 1fr;
				align-items : start;
				justify-content : start;
				&::before{
					grid-row : 1/-1;
					grid-column : 1;
					color : var( --yellow01 );
					content : "・";
				}
				&:has( strong ){
					grid-template-rows : auto auto;
					strong{
						grid-row : 1;
						grid-column : 2;
					}
				}
			}
		}
	}
	@media screen and ( width <= 768px ){
		.content{
			margin-top : calc( 64 * var( --remBase ) );
			.wp-block-image + p{
				margin-top : calc( 24 * var( --remBase ) );
			}
			p{
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
			p + h2{
				margin-top : calc( 64 * var( --remBase ) );
			}
			h2{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
				text-indent : calc( 16 * 100% / 800 );
				&::after{
					margin-top : calc( 12 * var( --remBase ) );
					background-image : linear-gradient( to right , var( --green01 ) 24% , var( --yellow01 ) 24% , var( --yellow01 ) 100% );
				}
			}
			h2 + .wp-block-image{
				margin-top : calc( 18 * var( --remBase ) );
			}
			p + .wp-block-list{
				margin-top : calc( 16 * var( --remBase ) );
			}
			.wp-block-list{
				li , strong{
					font-size : calc( 14 * var( --remBase ) );
					line-height : 1.5;
				}
				li{
					+ li{
						margin-top : calc( 4 * var( --remBase ) );
					}
				}
				li:has( strong ){
					row-gap : calc( 2 * var( --remBase ) );
				}
			}
			.wp-block-list + p{
				margin-top : calc( 16 * var( --remBase ) );
			}
			p + p{
				margin-top : calc( 16 * var( --remBase ) );
			}
			.wp-block-list + h2{
				margin-top : calc( 64 * var( --remBase ) );
			}
		}
	}
	@media screen and ( width > 768px ){
		padding-left : calc( 54 * 100% / 854 );
		.content{
			margin-top : calc( 64 * var( --remBase ) );
			.wp-block-image + p{
				margin-top : calc( 24 * var( --remBase ) );
			}
			p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.5;
			}
			p + h2{
				margin-top : calc( 80 * var( --remBase ) );
			}
			h2{
				font-size : calc( 24 * var( --remBase ) );
				line-height : 1.5;
				text-indent : calc( 16 * 100% / 800 );
				&::after{
					margin-top : calc( 12 * var( --remBase ) );
					background-image : linear-gradient( to right , var( --green01 ) 24% , var( --yellow01 ) 24% , var( --yellow01 ) 100% );
				}
			}
			h2 + .wp-block-image{
				margin-top : calc( 24 * var( --remBase ) );
			}
			p + .wp-block-list{
				margin-top : calc( 20 * var( --remBase ) );
			}
			.wp-block-list{
				li , strong{
					font-size : calc( 18 * var( --remBase ) );
					line-height : 1.5;
				}
				li{
					+ li{
						margin-top : calc( 8 * var( --remBase ) );
					}
				}
				li:has( strong ){
					row-gap : calc( 4 * var( --remBase ) );
				}
			}
			.wp-block-list + p{
				margin-top : calc( 20 * var( --remBase ) );
			}
			p + p{
				margin-top : calc( 20 * var( --remBase ) );
			}
			.wp-block-list + h2{
				margin-top : calc( 80 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact{
	background-color : color-mix( in sRGB , white 40% , transparent );
	border-style : solid;
	border-width : 1px;
	border-image-source : linear-gradient( 45deg , var( --yellow01 ) , var( --green01 ) );
	border-image-slice : 1;
	box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , var( --green01 ) 40% , transparent );
	h3{
		font-weight : 500;
		text-align : center;
	}
	a{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		> span:nth-of-type( 1 ){
			display : grid;
			align-items : center;
			justify-content : center;
			width : auto;
			aspect-ratio : 1;
			overflow : hidden;
			font-family : FontAwesome;
			font-weight : 900;
			color : white;
			background-color : var( --green01 );
			border-radius : 50%;
		}
		> span:nth-of-type( 2 ){
			font-family : "Noto Serif JP" , Georgia , "Times New Roman" , serif;
			font-style : italic;
			font-weight : 500;
			color : var( --green01 );
		}
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 48 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		h3{
			font-size : calc( 20 * var( --remBase ) );
		}
		a{
			column-gap : calc( 12 * var( --remBase ) );
			margin-top : calc( 40 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					height : calc( 48 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 32 * var( --remBase ) );
				}
			}
		}
	}
	@media screen and ( width > 768px ){
		padding-block : calc( 48 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		h3{
			font-size : calc( 20 * var( --remBase ) );
		}
		a{
			column-gap : calc( 12 * var( --remBase ) );
			margin-top : calc( 40 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					height : calc( 64 * var( --remBase ) );
					font-size : calc( 32 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 64 * var( --remBase ) );
				}
			}
		}
	}
}