@charset "UTF-8";

/* --------------------------------------------
FOOTER
--------------------------------------------- */
@media print , screen and ( min-width : 750.02px ){
	:root{
		--toTopHeight : 50;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#footerSns{
		display : grid;
		align-items : center;
		justify-content : start;
	}
	#footerSns figcaption{
		font-weight : 900;
		letter-spacing : .05em;
	}
	#footerSns ul{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
	}
	#footerSns a{
		display : block;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#footerSns{
		grid-template-columns : calc( 259 * 100% / 849 ) auto;
		padding-top : calc( 10 var( --remBase ) );
		padding-bottom : calc( 26 var( --remBase ) );
		padding-left : calc( 391 var( --viewportBase ) );
		margin-bottom : calc( -1 * var( --toTopHeight ) var( --remBase ) );
	}
	#footerSns figcaption{
		font-size : 2rem;
	}
	#footerSns ul img{
		height : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#footerSns{
		grid-template-columns : calc( 311 * 100% / 1289 ) auto;
		padding-top : calc( 14 * 100vw / 2000 );
		padding-bottom : calc( 34 * 100vw / 2000 );
		padding-left : calc( 711 * 100% / 2000 );
		margin-bottom : calc( -1 * var( --toTopHeight ) * 100vw / 2000 );
	}
	#footerSns figcaption{
		font-size : calc( 24 * 100vw / 2000 );
	}
	#footerSns ul img{
		height : calc( 40 * 100vw / 2000 );
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#footerSns{
		grid-template-columns : 711px 311px auto;
		padding-inline : calc( ( 100% - 2000px ) / 2 );
		padding-top : 14px;
		padding-bottom : 34px;
		margin-bottom : calc( var( --toTopHeight ) * -1px );
	}
	#footerSns figcaption{
		grid-row : 1;
		grid-column : 2;
		font-size : 24px;
	}
	#footerSns ul{
		grid-row : 1;
		grid-column : 3;
	}
	#footerSns ul img{
		height : 40px;
	}
}
#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( var( --toTopHeight ) var( --remBase ) );
		padding-left : calc( 21 var( --viewportBase ) );
		margin-left : auto;
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#toTop{
		grid-template-columns : auto calc( 24 * 100% / 138 );
		column-gap : calc( 3 * 100% / 138 );
		width : calc( 180 * 100% / 2000 );
		height : calc( var( --toTopHeight ) * 100vw / 2000 );
		padding-left : calc( 42 * 100% / 2000 );
		margin-left : auto;
		font-size : calc( 20 * 100vw / 2000 );
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#toTop{
		grid-template-columns : auto 24px;
		column-gap : 3px;
		width : 180px;
		height : calc( var( --toTopHeight ) * 1px );
		padding-left : 42px;
		margin-left : calc( 50% + 820px );
		font-size : 20px;
	}
}
@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 * 100% / 1168 ) calc( 29 * 100% / 1168 ) 1fr calc( 86 * 100% / 1168 ) calc( 200 * 100% / 1168 ) calc( 12 * 100% / 1168 ) calc( 40 * 100% / 1168 );
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( ( 43 - 1.6 ) var( --remBase ) );
		padding-left : calc( 40 * 100% / 1240 );
		padding-right : calc( 32 * 100% / 1240 );
	}
	#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 li:not( :last-child )::after{
		content : "　／　";
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#footerLinks{
		grid-template-rows : auto calc( ( 8 - 2 - 2 ) * 100vw / 2000 ) auto 1fr;
		grid-template-columns : calc( 350 * 100% / 1880 ) calc( 47 * 100% / 1880 ) 1fr calc( 83 * 100% / 1880 ) calc( 260 * 100% / 1880 ) calc( 10 * 100% / 1880 ) calc( 50 * 100% / 1880 );
		padding-inline : calc( 60 * 100% / 2000 );
		padding-top : calc( 83 * 100vw / 2000 );
		padding-bottom : calc( ( 83 - 2 ) * 100vw / 2000 );
	}
	#footerLinks .logo{
		padding-top : calc( 4 * 100vw / 2000 );
	}
	#footerLinks ul{
		row-gap : calc( 20 * 100vw / 2000 );
		padding-top : calc( ( 11 - 2 ) * 100vw / 2000 );
	}
	#footerLinks li:not( :last-child )::after , #footerLinks a{
		font-size : calc( 20 * 100vw / 2000 );
	}
	#footerLinks .member{
		grid-template-columns : calc( 38 * 100% / 236 ) auto;
		column-gap : calc( 2 * 100% / 236 );
		height : calc( 50 * 100vw / 2000 );
		padding-left : calc( 24 * 100% / 260 );
		font-size : calc( 20 * 100vw / 2000 );
	}
	#footerLinks :where( dt,dd ){
		font-size : calc( 20 * 100vw / 2000 );
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#footerLinks{
		grid-template-rows : auto calc( 8px - 2px - 2px ) auto 1fr;
		grid-template-columns : 350px 47px 1fr 83px 260px 10px 50px;
		padding-inline : calc( ( 100% - 1880px ) / 2 );
		padding-top : 83px;
		padding-bottom : calc( 83px - 2px );
	}
	#footerLinks .logo{
		padding-top : 4px;
	}
	#footerLinks ul{
		row-gap : 20px;
		padding-top : calc( 11px - 2px );
	}
	#footerLinks li:not( :last-child )::after , #footerLinks a{
		font-size : 20px;
	}
	#footerLinks .member{
		grid-template-columns : 38px auto;
		column-gap : 2px;
		height : 50px;
		padding-left : 24px;
		font-size : 20px;
	}
	#footerLinks :where( dt,dd ){
		font-size : 20px;
	}
}
#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 ) );
		padding-right : calc( 44 * 100% / 1240 );
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#copyright{
		height : calc( 205 * 100vw / 2000 );
		padding-inline : calc( 60 * 100% / 2000 );
		padding-top : calc( ( 46 - 2 ) * 100vw / 2000 );
		font-size : calc( 20 * 100vw / 2000 );
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#copyright{
		height : 205px;
		padding-inline : calc( ( 100% - 1880px ) / 2 );
		padding-top : calc( 46px - 2px );
		font-size : 20px;
	}
}