@charset "UTF-8";

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#toTop{
	display : grid;
	align-items : center;
	justify-content : start;
	width : fit-content;
	font-family : Roboto Flex;
	font-weight : 700;
	color : #424245;
	letter-spacing : .05em;
	background-color : #f2f2f2;
}
#toTop::after{
	display : block;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/up.svg" ) 0 0 / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	#toTop{
		grid-template-columns : auto calc( 30 * 100% / 177 );
		column-gap : calc( 10 * 100% / 177 );
		width : calc( 200 var( --viewportBase ) );
		height : calc( 50 var( --remBase ) );
		padding-left : calc( 23 var( --viewportBase ) );
		margin-left : auto;
		font-size : 2.4rem;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#toTop{
		grid-template-columns : auto calc( 24 * 100% / 119 );
		column-gap : calc( 3 * 100% / 119 );
		width : calc( 140 var( --viewportBase ) );
		height : calc( 50 var( --remBase ) );
		padding-left : calc( 21 var( --viewportBase ) );
		margin-left : auto;
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#toTop{
		grid-template-columns : auto calc( 24 * 100% / 138 );
		column-gap : calc( 3 * 100% / 138 );
		width : calc( 180 var( --viewportBase ) );
		height : calc( 50 var( --remBase ) );
		padding-left : calc( 42 var( --viewportBase ) );
		font-size : 2rem;
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#toTop{
		margin-left : auto;
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#toTop{
		margin-left : calc( 50% + 820px );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#footerLinks{
		display : grid;
		justify-content : start;
		background-color : #f2f2f2;
	}
	#footerLinks .logo{
		grid-row : 1/5;
		grid-column : 1;
	}
	#footerLinks ul{
		display : flex;
		flex-wrap : wrap;
		grid-row : 1;
		grid-column : 3;
	}
	#footerLinks li:not( :last-child )::after , #footerLinks a{
		font-size : 2rem;
		font-weight : 900;
		line-height : 1.2;
		color : #424245;
		letter-spacing : .05em;
	}
	#footerLinks li:not( :last-child )::after{
		white-space : pre;
	}
	#footerLinks .member{
		display : grid;
		grid-row : 1;
		grid-column : 5;
		align-items : center;
		justify-content : start;
		font-weight : 900;
		color : #fff;
		letter-spacing : .05em;
		background-color : #424245;
		border-radius : 100vmax;
	}
	#footerLinks .member::before{
		display : block;
		aspect-ratio : 1;
		font-size : 0;
		content : "";
		background : url( "../images/ui/icon/person.svg" ) center / contain no-repeat;
	}
	#footerLinks .x{
		grid-row : 1;
		grid-column : 7;
		aspect-ratio : 1;
	}
	#footerLinks dl{
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 3/5;
		grid-column : 3/8;
		align-items : center;
		justify-content : end;
		justify-self : end;
	}
	#footerLinks :where( dt, dd ){
		font-weight : 900;
		line-height : 1.2;
		color : #424245;
		letter-spacing : .05em;
	}
	#footerLinks img{
		width : 100%;
		height : auto;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#footerLinks{
		grid-template-rows : auto calc( ( 16 - 1.6 - 1.6 ) var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 200 var( --percentBase ) ) calc( 29 var( --percentBase ) ) 1fr calc( 86 var( --percentBase ) ) calc( 200 var( --percentBase ) ) calc( 12 var( --percentBase ) ) calc( 40 var( --percentBase ) );
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( ( 43 - 1.6 ) var( --remBase ) );
	}
	#footerLinks ul{
		row-gap : calc( 10 var( --remBase ) );
		padding-top : calc( ( 4 - 1.6 ) var( --remBase ) );
	}
	#footerLinks li:not( :last-child )::after , #footerLinks a{
		font-size : 1.6rem;
	}
	#footerLinks li:not( :last-child )::after{
		content : " ／ ";
	}
	#footerLinks .member{
		grid-template-columns : calc( 25 * 100% / 174 ) auto;
		column-gap : calc( 2 * 100% / 174 );
		height : calc( 40 var( --remBase ) );
		padding-left : calc( 26 * 100% / 200 );
		font-size : 1.4rem;
	}
	#footerLinks :where( dt,dd ){
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#footerLinks{
		grid-template-rows : auto calc( ( 8 - 2 - 2 ) var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 350 var( --percentBase ) ) calc( 47 var( --percentBase ) ) 1fr calc( 83 var( --percentBase ) ) calc( 260 var( --percentBase ) ) calc( 10 var( --percentBase ) ) calc( 50 var( --percentBase ) );
		padding-top : calc( 83 var( --remBase ) );
		padding-bottom : calc( ( 83 - 2 ) var( --remBase ) );
	}
	#footerLinks .logo{
		padding-top : calc( 4 var( --remBase ) );
	}
	#footerLinks ul{
		row-gap : calc( 20 var( --remBase ) );
		padding-top : calc( ( 11 - 2 ) var( --remBase ) );
	}
	#footerLinks li:not( :last-child )::after , #footerLinks a{
		font-size : 2rem;
	}
	#footerLinks li:not( :last-child )::after{
		content : "　／　";
	}
	#footerLinks .member{
		grid-template-columns : calc( 38 * 100% / 236 ) auto;
		column-gap : calc( 2 * 100% / 236 );
		height : calc( 50 var( --remBase ) );
		padding-left : calc( 24 * 100% / 260 );
		font-size : 2rem;
	}
	#footerLinks :where( dt,dd ){
		font-size : 2rem;
	}
}
#copyright{
	font-family : Roboto Flex;
	font-weight : 700;
	line-height : 1.2;
	color : #fff;
	letter-spacing : .05em;
	background-color : #424245;
}
@media screen and ( max-width : 750px ){
	#copyright{
		height : calc( 225 var( --remBase ) );
		padding-top : calc( ( 113 - 2.6 ) var( --remBase ) );
		font-size : 2.6rem;
		text-align : center;
		text-indent : .05em;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#copyright{
		text-align : right;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#copyright{
		height : calc( 124 var( --remBase ) );
		padding-top : calc( ( 21 - 1.6 ) var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#copyright{
		height : calc( 205 var( --remBase ) );
		padding-top : calc( ( 46 - 2 ) var( --remBase ) );
		font-size : 2rem;
	}
}