@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
#columns , #link{
	--green01 : #399482;
	--green02 : color-mix( in sRGB , var( --green01 ) , white 55% );
	--yellow01 : #f9c719;
	--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;
		}
	}
}
body{
	@media screen and ( width <= 768px ){
		padding-top : 56px;
	}
}

/* --------------------------------------------
COLUMNS
--------------------------------------------- */
#columns{
	@media screen and ( width <= 768px ){
		padding-inline : calc( 16 * 100% / 400 );
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
	}
	@media screen and ( width > 768px ){
		display : grid;
		grid-template-columns : calc( 226 * 100% / 1080 ) 1fr;
		align-items : start;
		padding-inline : max( calc( 100% - 1080px ) / 2 , calc( 100 * 100% / 1280 ) );
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
		#sidebar{
			grid-row : 1;
			grid-column : 1;
		}
	}
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebar{
	font-family : "Noto Serif JP" , Georgia , "Times New Roman" , serif;
	> ul{
		> li{
			box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , var( --green01 ) 40% , transparent );
			> a{
				display : grid;
				place-items : center;
				font-weight : 500;
				color : white;
				text-indent : -.1em;
				letter-spacing : .1em;
				background-color : var( --green01 );
				outline : solid 1px var( --green01 );
			}
		}
	}
	h4{
		display : grid;
		place-items : center;
		font-weight : 500;
		color : white;
		text-indent : -.1em;
		letter-spacing : .1em;
		background-color : var( --green01 );
	}
	ul ul{
		background-color : white;
	}
	li li a{
		display : grid;
		grid-auto-flow : column;
		column-gap : .75em;
		align-items : center;
		justify-content : start;
		-webkit-text-decoration : underline;
		text-decoration : underline;
		text-decoration-color : transparent;
		text-underline-offset : .2em;
		&::before{
			display : block;
			width : auto;
			height : .75em;
			aspect-ratio : 1;
			clip-path : polygon( 0 0 , 100% 50% , 0 100% );
			content : "";
			background-color : var( --yellow01 ) ;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 80 * var( --remBase ) );
		> ul{
			> li{
				+ li{
					margin-top : calc( 24 * var( --remBase ) );
				}
				> a{
					height : calc( 40 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
				}
			}
		}
		h4{
			height : calc( 40 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		ul ul{
			padding-inline : calc( 12 * 100% / 226 );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 24 * var( --remBase ) );
			li + li{
				margin-top : calc( 8 * var( --remBase ) );
			}
			a{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.4;
			}
		}
	}
	@media screen and ( width > 768px ){
		> ul{
			> li{
				+ li{
					margin-top : calc( 24 * var( --remBase ) );
				}
				> a{
					height : calc( 40 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
				}
			}
		}
		h4{
			height : calc( 40 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		ul ul{
			padding-inline : calc( 12 * 100% / 226 );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 24 * var( --remBase ) );
			li + li{
				margin-top : calc( 8 * var( --remBase ) );
			}
			a{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.4;
			}
		}
	}
}
@media ( hover : hover ){
	#sidebar{
		> ul{
			> li{
				>a:hover{
					color : var( --green01 );
					background-color : white;
				}
			}
		}
		li li a:hover{
			text-decoration-color : var( --yellow01 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#sidebar{
		> ul{
			> li{
				> a{
					transition : background-color .3s linear , color .3s linear;
				}
			}
		}
		li li a{
			transition : text-decoration-color .3s linear;
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-size : 15px;
	font-weight : 500;
	line-height : calc( 25.5 / 15 );
	text-align : center;
	text-indent : -1px;
	letter-spacing : 1px;
	&::before{
		display : block;
		padding-bottom : 13px;
		font-family : Aboreto , sans-serif;
		font-size : 60px;
		font-weight : 700;
		font-feature-settings : "smcp";
		font-variant : small-caps;
		line-height : calc( 72 / 60 );
		text-align : center;
		text-indent : -3px;
		letter-spacing : 3px;
		content : attr( data-en );
	}
	&::after{
		display : block;
		width : 100px;
		height : 3px;
		margin-inline : auto;
		margin-top : 14px;
		font-size : 0;
		content : "";
		background-repeat : repeat;
		background-size : 7px auto;
	}
	&.base{
		color : #3b4056;
		&::before{
			color : var( --green01 );
		}
		&::after{
			background-image : url( "data:image/svg+xml;base64,PHN2ZyAgZmlsbD0iIzliOGY1OCIgaGVpZ2h0PSIxMXB4IiB3aWR0aD0iMTFweCIgdmlld0JveD0iMCAwIDExIDExIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjQxLDAsMCwxLjQxVjBaTTExLDBIOS41OUwwLDkuNTlWMTFIMS40MUwxMSwxLjQxWm0wLDkuNTlMOS41OSwxMUgxMVoiLz48L3N2Zz4=" );
		}
	}
	&.white{
		color : white;
		&::before{
			color : white;
		}
		&::after{
			background-image : url( "data:image/svg+xml;base64,PHN2ZyAgZmlsbD0iI2ZmZmZmZiIgaGVpZ2h0PSIxMXB4IiB3aWR0aD0iMTFweCIgdmlld0JveD0iMCAwIDExIDExIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjQxLDAsMCwxLjQxVjBaTTExLDBIOS41OUwwLDkuNTlWMTFIMS40MUwxMSwxLjQxWm0wLDkuNTlMOS41OSwxMUgxMVoiLz48L3N2Zz4=" );
		}
	}
	@media screen and ( width <= 980px ){
		font-size : 25px;
		line-height : calc( 45 / 25 );
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
#link{
	padding-block : 81px;
	background : url( "data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAyKSIgaGVpZ2h0PSIxMjBweCIgd2lkdGg9IjcwcHgiIHZpZXdCb3g9IjAgMCA3MCAxMjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcwLDEyMEgwTDM1LDYwWk03MCwwLDM1LDYwSDcwWk0wLDBWNjBIMzVaIi8+PC9zdmc+" ) center top repeat var( --green01 );
	a{
		position : relative;
		display : grid;
		place-items : center;
		width : 312px;
		height : 56px;
		margin-inline : auto;
		margin-top : 36px;
		font-family : "Noto Serif JP" , Georgia , "Times New Roman" , serif;
		font-size : 14px;
		font-weight : 500;
		line-height : calc( 23.8 / 14 );
		color : var( --green01 );
		text-indent : -1px;
		letter-spacing : 1px;
		background-color : white;
		border-radius : 1px;
		outline : solid 1px white;
		outline-offset : -1px;
		&::after{
			position : absolute;
			top : 50%;
			right : 14px;
			font-family : ETmodules;
			font-size : 14px;
			font-weight : 400;
			content : "5";
			translate : 0 -50%;
		}
	}
}