@charset "UTF-8";

/* --------------------------------------------
ACHIEVEMENT
--------------------------------------------- */
@container style( --looks: casual ){
	#achievement{
		> ul{
			> li{
				> a{
					border-radius : calc( 12 * var( --remBase ) );
				}
			}
		}
		picture{
			overflow : hidden;
			border-radius : calc( 6 * var( --remBase ) );
		}
		.levels{
			border-radius : calc( 4 * var( --remBase ) );
		}
	}
}
@container style( --looks: formal ){
	#achievement{
		hgroup{
			p{
				font-family : "Noto Serif JP" , serif;
			}
			h3{
				font-family : "Noto Serif JP" , serif;
			}
		}
	}
}
#achievement{
	.lede{
		color : var( --text );
		text-align : center;
	}
	> ul{
		display : grid;
		justify-content : space-between;
		> li{
			display : contents;
			> a{
				display : grid;
				grid-template-rows : subgrid;
				grid-row : span 4;
				row-gap : 0;
				background-color : white;
				outline : solid 1px color-mix( in sRGB , black 15% , transparent );
				outline-offset : -1px;
				box-shadow : 0 calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
			}
		}
	}
	picture{
		grid-row : 1;
		grid-column : 1/-1;
		width : 100%;
		height : auto;
		aspect-ratio : 4/3;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	.levels{
		display : grid;
		grid-row : 2;
		grid-column : 2;
		grid-auto-flow : column;
		column-gap : .25em;
		align-items : center;
		align-self : start;
		justify-content : center;
		background-color : color-mix( in sRGB , var( --brown ) 75% , white );
		span{
			color : white;
			text-box : trim-both cap alphabetic;
			&:nth-of-type( 1 ){
				font-weight : 500;
			}
			&:nth-of-type( 2 ){
				font-weight : 600;
			}
		}
	}
	hgroup{
		display : grid;
		grid-row : 2;
		grid-column : 1/-1;
		p{
			grid-row : 1;
			grid-column : 1;
			font-weight : 600;
		}
		h3{
			grid-row : 2;
			grid-column : 1/-1;
			font-weight : 400;
		}
	}
	.values{
		display : grid;
		grid-row : 3;
		grid-column : 1/-1;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : space-between;
		border-top : solid 1px color-mix( in sRGB , black 8% , transparent );
		> span{
			&:nth-of-type( 1 ){
				font-weight : 500;
			}
			&:nth-of-type( 2 ){
				font-weight : 700;
				color : var( --red );
			}
		}
	}
	time{
		grid-row : 4;
		grid-column : 1/-1;
		font-weight : 300;
		color : #999;
	}
	@media screen and ( width <= 768px ){
		.lede{
			margin-top : calc( 24 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 500;
			line-height : calc( 22 / 18 );
		}
		> ul{
			grid-template-columns : repeat( 2 , calc( 174 * var( --contentBase ) ) );
			row-gap : calc( 12 * var( --remBase ) );
			> li{
				> a{
					grid-template-columns : 1fr calc( 52 * 100% / 158 );
					padding-inline : calc( 8 * 100% / 174 );
					padding-top : calc( 8 * var( --remBase ) );
					padding-bottom : calc( 16 * var( --remBase ) );
				}
			}
		}
		picture{
			margin-bottom : calc( 8 * var( --remBase ) );
		}
		.levels{
			height : calc( 20 * var( --remBase ) );
			span{
				font-size : calc( 12 * var( --remBase ) );
			}
		}
		hgroup{
			grid-template-rows : minmax( calc( 20 * var( --remBase ) ) , auto ) 1fr;
			row-gap : calc( 2 * var( --remBase ) );
			padding-inline : calc( 2 * 100% / 158 );
			p{
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
			}
			h3{
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
			}
		}
		.values{
			padding-top : calc( 8 * var( --remBase ) );
			padding-left : calc( 4 * 100% / 158 );
			padding-right : calc( 4 * 100% / 158 );
			margin-top : calc( 8 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 12 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 18 * var( --remBase ) );
				}
			}
		}
		time{
			padding-inline : calc( 2 * 100% / 158 );
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
		}
		.link01{
			margin-top : calc( 28 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		.lede{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 500;
			line-height : calc( 24 / 18 );
		}
		> ul{
			grid-template-columns : repeat( 4 , calc( 238 * var( --contentBase ) ) );
			row-gap : calc( 16 * var( --remBase ) );
			> li{
				> a{
					grid-template-columns : 1fr calc( 72 * 100% / 214 );
					padding-inline : calc( 12 * 100% / 238 );
					padding-top : calc( 12 * var( --remBase ) );
					padding-bottom : calc( 20 * var( --remBase ) );
				}
			}
		}
		picture{
			margin-bottom : calc( 12 * var( --remBase ) );
		}
		.levels{
			height : calc( 24 * var( --remBase ) );
			span{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		hgroup{
			grid-template-rows : minmax( calc( 24 * var( --remBase ) ) , auto ) 1fr;
			row-gap : calc( 2 * var( --remBase ) );
			padding-inline : calc( 4 * 100% / 214 );
			p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 24 / 18 );
			}
			h3{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.2;
			}
		}
		.values{
			padding-top : calc( 12 * var( --remBase ) );
			padding-left : calc( 12 * 100% / 214 );
			padding-right : calc( 4 * 100% / 214 );
			margin-top : calc( 12 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 14 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 22 * var( --remBase ) );
				}
			}
		}
		time{
			padding-inline : calc( 4 * 100% / 214 );
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
		}
		.link01{
			margin-top : calc( 64 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	padding-block : calc( 20 * var( --remBase ) );
	padding-top : calc( 40 * var( --remBase ) );
	color : white;
	background-color : var( --brown );
	a{
		color : white;
	}
	.logo{
		display : block;
		img{
			height : calc( 52 * var( --remBase ) );
		}
	}
	.address{
		margin-top : calc( 30 * var( --remBase ) );
	}
	.address a{
		font-size : calc( 14 * var( --remBase ) );
		font-weight : 300;
		line-height : calc( 24 / 14 );
		text-indent : .1em;
		letter-spacing : .1em;
	}
	.license{
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 300;
		line-height : 1.5;
		text-indent : .1em;
		letter-spacing : .1em;
	}
	> ul{
		display : grid;
		align-items : start;
	}
	li li{
		list-style-position : inside;
		list-style-type : "・";
	}
	h3{
		margin-bottom : calc( 10 * var( --remBase ) );
	}
	h3 a{
		font-size : calc( 15 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.6;
	}
	li li a , li p a{
		font-weight : 300;
		letter-spacing : .1em;
	}
	li p a{
		font-size : calc( 14 * var( --remBase ) );
		line-height : calc( 24 / 14 );
	}
	.copyright{
		font-size : calc( 12 * var( --remBase ) );
		font-weight : 300;
		line-height : 2;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
	}
	@media screen and ( width <= 768px ){
		> ul{
			grid-template-columns : repeat( 2 , calc( 184 * var( --contentBase ) ) );
			row-gap : calc( 40 * var( --remBase ) );
			margin-top : calc( 20 * var( --remBase ) );
			> li{
				padding-inline : calc( 4 * 100% / 184 );
			}
		}
		li li a{
			font-size : calc( 12 * var( --remBase ) );
			line-height : 2;
		}
		.copyright{
			margin-top : calc( 30 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : calc( 10 * var( --contentBase ) ) calc( 310 * var( --contentBase ) ) calc( 10 * var( --contentBase ) ) calc( 30 * var( --contentBase ) ) calc( 10 * var( --contentBase ) ) calc( 620 * var( --contentBase ) ) calc( 10 * var( --contentBase ) );
		.logo{
			grid-row : 1;
			grid-column : 2;
		}
		.address{
			grid-row : 2;
			grid-column : 2;
		}
		.license{
			grid-row : 3;
			grid-column : 2;
		}
		> ul{
			grid-template-columns : repeat( 4 , calc( 155 * 100% / 620 ) );
			grid-row : 1/5;
			grid-column : 6;
			grid-auto-flow : column;
			> li{
				padding-inline : calc( 10 * 100% / 155 );
			}
		}
		li li a{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 24 / 14 );
		}
		.copyright{
			grid-row : 5;
			grid-column : 1/-1;
			margin-top : calc( 40 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#footer{
		a:hover , ul li a:hover{
			opacity : .7;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footer{
		a , ul li a{
			transition : opacity var( --transitionBase );
		}
	}
}

/* --------------------------------------------
FIXED LINKS
--------------------------------------------- */
body:has( #fixedLinks ){
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 58 * var( --remBase ) );
	}
}
#fixedLinks{
	position : fixed;
	z-index : 5;
	display : grid;
	.line , .contact{
		display : block;
		img{
			width : 100%;
			height : auto;
		}
	}
	.tel{
		position : relative;
		z-index : 0;
		display : block;
		align-content : center;
		color : white;
		background-color : var( --blue );
		img{
			position : absolute;
			z-index : 1;
		}
	}
	@media screen and ( width <= 768px ){
		bottom : 0;
		left : 0;
		grid-template-columns : calc( 78 * var( --viewportBase ) ) calc( 234 * var( --viewportBase ) ) calc( 78 * var( --viewportBase ) );
		width : 100%;
		height : calc( 58 * var( --remBase ) );
		.tel{
			img{
				top : calc( -24 * var( --remBase ) );
				left : calc( -20 * 100% / 234 );
				height : calc( 41 * var( --remBase ) );
			}
			> span:not( .is-pc ){
				display : block;
				text-align : center;
			}
			span{
				&:nth-of-type( 2 ){
					margin-bottom : calc( 4 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
				}
				&:nth-of-type( 3 ){
					font-size : calc( 12 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		bottom : calc( 10 * var( --remBase ) );
		right : calc( 10 * var( --viewportBase ) );
		grid-template-rows : auto calc( 104 * var( --remBase ) );
		grid-template-columns : calc( 128 * 100% / 328 ) calc( 10 * 100% / 328 ) calc( 80 * 100% / 328 ) calc( 10 * 100% / 328 ) calc( 10 * 100% / 328 ) calc( 80 * 100% / 328 ) calc( 10 * 100% / 328 );
		row-gap : calc( 10 * var( --remBase ) );
		width : calc( 328 * var( --viewportBase ) );
		.line{
			grid-row : 1;
			grid-column : 3;
		}
		.contact{
			grid-row : 1;
			grid-column : 6;
		}
		.tel{
			grid-row : 2;
			grid-column : 1/-1;
			border-radius : 100vmax;
			img{
				top : calc( -30 * var( --remBase ) );
				left : calc( 30 * 100% / 328 );
				height : calc( 53 * var( --remBase ) );
			}
			span{
				display : block;
				text-align : center;
				&:nth-of-type( 1 ){
					font-size : calc( 14 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					margin-block : calc( 6 * var( --remBase ) );
					font-size : calc( 28 * var( --remBase ) );
				}
				&:nth-of-type( 3 ){
					font-size : calc( 14 * var( --remBase ) );
				}
			}
		}
	}
}