@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
#column{
	--green01 : #399482;
	--green02 : color-mix( in sRGB , var( --green01 ) , white 55% );
	--filterWhite : invert( 100% ) sepia( 93% ) saturate( 26% ) hue-rotate( 21deg ) brightness( 108% ) contrast( 107% );
	--filterGreen01 : invert( 48% ) sepia( 95% ) saturate( 260% ) hue-rotate( 118deg ) brightness( 87% ) contrast( 87% );
	box-sizing : border-box;
	padding : 0;
	margin : 0;
	line-height : 1;
	*{
		box-sizing : border-box;
		padding : 0;
		margin : 0;
		line-height : 1;
	}
	ul{
		list-style : none;
	}
	img{
		vertical-align : top;
	}
	a{
		-webkit-text-decoration : none;
		text-decoration : none;
	}
	@media screen and ( width <= 768px ){
		--remBase : 100vw / 400;
		br.pc{
			display : none;
		}
	}
	@media screen and ( width > 768px ){
		--remBase : min( 1px , 100vw / 1280 );
		br.sp{
			display : none;
		}
	}
}

/* --------------------------------------------
POST
--------------------------------------------- */
#column{
	background-color : white;
	> article{
		> header{
			display : grid;
			grid-template-columns : auto 1fr;
			justify-content : start;
			border-bottom : solid 1px #e2e2e2;
			h1{
				grid-row : 1;
				grid-column : 1/-1;
			}
			time , ul{
				grid-row : 2;
			}
			time{
				grid-column : 1;
			}
			ul{
				display : flex;
				flex-wrap : wrap;
				grid-column : 2;
				&::before{
					white-space : pre;
					content : " | ";
				}
			}
			a{
				color : #3b4056;
			}
		}
	}
	.archive{
		background : url( "data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA2KSIgaGVpZ2h0PSIxMXB4IiB3aWR0aD0iMTFweCIgdmlld0JveD0iMCAwIDExIDExIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjQxLDAsMCwxLjQxVjBaTTExLDBIOS41OUwwLDkuNTlWMTFIMS40MUwxMSwxLjQxWm0wLDkuNTlMOS41OSwxMUgxMVoiLz48L3N2Zz4=" ) 0 0 repeat;
		background-color : var( --green01 );
		border : solid 1px #ddd;
		p{
			font-family : "Noto Serif JP" , Georgia , "Times New Roman" , serif;
			font-weight : 600;
			color : white;
			text-align : center;
			&::before{
				display : block;
				font-family : Aboreto , display;
				font-weight : 700;
				font-feature-settings : "smcp";
				font-variant : small-caps;
				text-indent : calc( -3 * var( --remBase ) );
				letter-spacing : calc( 3 * var( --remBase ) );
				content : "NEWS";
			}
		}
		a{
			position : relative;
			display : block;
			align-content : center;
			margin-inline : auto;
			font-family : "Noto Serif JP" , Georgia , "Times New Roman" , serif ! important;
			font-weight : 500;
			color : var( --green01 );
			text-align : center;
			-webkit-text-decoration : underline;
			text-decoration : underline;
			background-color : white;
			outline : solid 1px white;
			outline-offset : -1px;
			&::after{
				position : absolute;
				top : 50%;
				font-weight : 100;
				content : ">";
				translate : 0 -50%;
			}
		}
	}
	> aside{
		h4{
			font-weight : 400;
		}
		a{
			font-weight : 500;
			color : #666;
		}
	}
	@media screen and ( width <= 768px ){
		padding-inline : calc( 16 * 100% / 400 );
		padding-top : calc( 24 * var( --remBase ) + 56px );
		padding-bottom : calc( 56 * var( --remBase ) );
		> article{
			header{
				row-gap : calc( 10 * var( --remBase ) );
				padding-bottom : calc( 24 * var( --remBase ) );
				h1{
					font-size : calc( 22 * var( --remBase ) );
					line-height : calc( 28.6 / 22 );
				}
				time , a{
					color : #666;
				}
				time , ul , a{
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 25.5 / 14 );
				}
			}
		}
		.archive{
			padding-block : calc( 36 * var( --remBase ) );
			margin-top : calc( 124 * var( --remBase ) );
			p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 32.4 / 18 );
				&::before{
					font-size : calc( 40 * var( --remBase ) );
					line-height : calc( 48 / 40 );
				}
			}
			a{
				width : calc( 228 * 100% / 368 );
				height : calc( 56 * var( --remBase ) );
				margin-top : calc( 24 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				&::after{
					right : calc( 60 * 100% / 228 );
				}
			}
		}
		> aside{
			margin-top : calc( 68 * var( --remBase ) );
			h4{
				font-size : calc( 13 * var( --remBase ) );
				line-height : calc( 15.6 / 13 );
			}
			ul{
				margin-top : calc( 12 * var( --remBase ) );
			}
			li + li{
				margin-top : calc( 8 * var( --remBase ) );
			}
			a{
				font-size : calc( 15 * var( --remBase ) );
				line-height : calc( 25.5 / 15 );
			}
		}
	}
	@media screen and ( width > 768px ){
		display : grid;
		grid-template-columns : calc( 854 * 100% / 1080 ) 1fr;
		align-items : stretch;
		padding-inline : max( calc( 100% - 1080px ) / 2 , calc( 100 * 100% / 1280 ) );
		> article , > aside{
			padding-top : calc( 58 * var( --remBase ) );
			padding-bottom : calc( 110 * var( --remBase ) );
		}
		> article{
			padding-right : calc( 60 * 100% / 854 );
			> header{
				row-gap : calc( 10 * var( --remBase ) );
				padding-bottom : calc( 24 * var( --remBase ) );
				h1{
					font-size : calc( 16 * var( --remBase ) );
					line-height : calc( 20.8 / 16 );
				}
				time , ul , a{
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 25.5 / 14 );
				}
			}
		}
		.archive{
			padding-block : calc( 54 * var( --remBase ) );
			margin-top : calc( 124 * var( --remBase ) );
			p{
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 30.6 / 17 );
				&::before{
					margin-bottom : calc( 13 * var( --remBase ) );
					font-size : calc( 50 * var( --remBase ) );
					line-height : calc( 60 / 50 );
				}
			}
			a{
				width : calc( 326 * 100% / 792 );
				height : calc( 56 * var( --remBase ) );
				margin-top : calc( 24 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				&::after{
					right : calc( 60 * 100% / 326 );
				}
			}
		}
		> aside{
			padding-left : calc( 30 * 100% / 226 );
			border-left : solid 1px #e2e2e2;
			h4{
				font-size : calc( 13 * var( --remBase ) );
				line-height : calc( 15.6 / 13 );
			}
			ul{
				margin-top : calc( 12 * var( --remBase ) );
			}
			li + li{
				margin-top : calc( 8 * var( --remBase ) );
			}
			a{
				font-size : calc( 15 * var( --remBase ) );
				line-height : calc( 25.5 / 15 );
			}
		}
	}
}
#content{
	p{
		font-size : calc( 17 * var( --remBase ) );
		font-weight : 500;
		line-height : calc( 37.4 / 17 );
		+ p{
			margin-top : calc( 16 * var( --remBase ) );
		}
		a{
			color : var( --green01 );
			-webkit-text-decoration : underline;
			text-decoration : underline;
		}
	}
	.wp-block-list{
		li{
			display : grid;
			grid-template-columns : auto auto;
			align-items : start;
			justify-content : start;
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 37.4 / 17 );
			&::before{
				content : "・";
			}
		}
	}
	figure{
		margin-top : calc( 24 * var( --remBase ) );
	}
	.thumbnail{
		display : block;
		width : 100%;
		margin-top : calc( 78 * var( --remBase ) );
	}
	&.borderBottom{
		&::after{
			display : block;
			height : calc( 2 * var( --remBase ) );
			margin-top : calc( 24 * var( --remBase ) );
			margin-bottom : calc( 16 * var( --remBase ) );
			content : "";
			background-image : linear-gradient( 90deg , #399482 31% , #f9c719 31% );
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 40 * var( --remBase ) );
		&.borderBottom::after{
			width : calc( 100 * 100% / 368 );
		}
	}
	@media screen and ( width > 768px ){
		padding-top : calc( 40 * var( --remBase ) );
		.thumbnail{
			max-width : calc( 400 * 100% / 792 );
		}
		&.borderBottom::after{
			width : calc( 100 * 100% / 792 );
		}
	}
}
#recruit{
	h2{
		font-family : Kosugi , Helvetica , Arial , Lucida , sans-serif;
		font-size : calc( 17 * var( --remBase ) );
		font-weight : 500;
		line-height : calc( 34 / 17 );
		color : var( --green01 );
	}
	.thumbnail{
		display : block;
		overflow : hidden;
		border-radius : calc( 14 * var( --remBase ) );
		img{
			width : 100%;
			height : auto;
		}
	}
	.lede{
		padding-block : calc( 20 * var( --remBase ) );
		font-size : calc( 15 * var( --remBase ) );
		font-weight : 500;
		line-height : calc( 31.5 / 15 );
		border : solid 1px rgb( 89 102 88 / .32 );
		border-radius : calc( 12 * var( --remBase ) );
	}
	.box{
		li{
			padding-block : calc( 20 * var( --remBase ) );
			font-size : calc( 15 * var( --remBase ) );
			font-weight : 500;
			line-height : calc( 31.5 / 15 );
			background-color : #e4e1ce;
			border-radius : calc( 11 * var( --remBase ) );
		}
	}
	.requirements{
		margin-top : calc( 40 * var( --remBase ) );
		border-top : solid 1px var( --green01 );
		h3{
			font-family : Kosugi , Helvetica , Arial , Lucida , sans-serif;
			font-size : calc( 20 * var( --remBase ) );
			font-weight : 500;
			line-height : calc( 25.5 / 20 );
			color : var( --green01 );
			border-bottom : dotted 1px currentColor;
		}
		picture{
			display : block;
			overflow : hidden;
			border-radius : calc( 14 * var( --remBase ) );
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	.requirement , .contact{
		font-weight : 500;
	}
	.requirement{
		font-size : calc( 15 * var( --remBase ) );
		line-height : calc( 25.5 / 15 );
		&::after{
			display : block;
			height : calc( 2 * var( --remBase ) );
			content : "";
			background-image : linear-gradient( 90deg , #399482 31% , #f9c719 31% );
		}
	}
	.contact{
		font-size : calc( 19 * var( --remBase ) );
		line-height : calc( 25.5 / 19 );
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 24 * var( --remBase ) );
		.thumbnail{
			margin-top : calc( 32 * var( --remBase ) );
		}
		.lede{
			padding-inline : calc( 20 * 100% / 368 );
			margin-top : calc( 32 * var( --remBase ) );
		}
		.box{
			margin-top : calc( 32 * var( --remBase ) );
			li{
				padding-inline : calc( 20 * 100% / 368 );
				+ li{
					margin-top : calc( 32 * var( --remBase ) );
				}
			}
		}
		.requirements{
			h3{
				padding-block : calc( 32 * var( --remBase ) );
			}
			picture{
				margin-top : calc( 32 * var( --remBase ) );
			}
		}
		.requirement{
			margin-top : calc( 52 * var( --remBase ) );
			&::after{
				width : calc( 100 * 100% / 368 );
				margin-top : calc( 32 * var( --remBase ) );
			}
		}
		.contact{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media screen and ( width > 768px ){
		padding-top : calc( 20 * var( --remBase ) );
		.thumbnail{
			width : calc( 400 * 100% / 792 );
			margin-top : calc( 24 * var( --remBase ) );
		}
		.lede{
			padding-inline : calc( 20 * 100% / 792 );
			margin-top : calc( 24 * var( --remBase ) );
		}
		.box{
			margin-top : calc( 24 * var( --remBase ) );
			li{
				padding-inline : calc( 20 * 100% / 792 );
			}
			li + li{
				margin-top : calc( 24 * var( --remBase ) );
			}
		}
		.requirements{
			h3{
				padding-block : calc( 24 * var( --remBase ) );
			}
			picture{
				width : calc( 400 * 100% / 792 );
				margin-top : calc( 24 * var( --remBase ) );
			}
		}
		.requirement{
			margin-top : calc( 48 * var( --remBase ) );
			&::after{
				width : calc( 100 * 100% / 792 );
				margin-top : calc( 24 * var( --remBase ) );
			}
		}
		.contact{
			margin-top : calc( 16 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#column > aside a:hover{
		color : var( --green01 );
	}
	#column .archive a:hover{
		color : white;
		-webkit-text-decoration : none;
		text-decoration : none;
		background-color : transparent;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#column > aside a{
		transition : color .3s linear;
	}
	#column .archive a{
		transition : color .3s linear , background-color .3s linear , text-decoration .3s linear;
	}
}