@charset "UTF-8";

/* --------------------------------------------
Go To Top
--------------------------------------------- */
#goToTop{
	position : absolute;
	display : block;
	width : fit-content;
}
@media screen and ( max-width : 750px ){
	#goToTop{
		top : calc( 44 var( --remBase ) );
		right : calc( 30 var( --viewportBase ) );
	}
	#goToTop img{
		height : calc( 168 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#goToTop{
		top : calc( 63 var( --designBaseY ) );
		right : calc( 30 var( --designBaseX ) );
	}
	#goToTop img{
		height : calc( 168 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#goToTop{
		top : 63px;
		right : 78px;
	}
	#goToTop img{
		height : 168px;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	position : relative;
	display : grid;
	color : var( --white );
	background-color : #282727;
}
#footer a{
	color : var( --white );
}
#footer .logo{
	display : block;
	width : fit-content;
}
#footer .logo img{
	width : 100%;
	height : auto;
}
	#footer .logo span{
		font-family : 'Noto Sans JP', sans-serif;
	}

#footer p{
	align-self : end;
	font-family : Jost , sans-serif;
	font-weight : 300;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#footer{
		grid-template-columns : calc( 180 var( --viewportBase ) ) 1fr auto calc( 30 var( --viewportBase ) );
		padding-top : calc( 54 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#footer .logo{
		grid-row : 1;
		grid-column : 1;
		margin-left: calc( 12 var( --remBase ) );
	}
		#footer .logo span{
			font-size: calc( 20 var(--remBase) );
			padding-top: calc( 12 var( --remBase ) );
			font-weight: 300;
			font-family : 'Noto Sans JP', sans-serif;
			line-height: 2.5;
		}

	#footer p{
		grid-row : 1;
		grid-column : 3;
		padding-bottom : calc( 10 var( --remBase ) );
		font-size : 2.6rem ;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#footer .logo{
		grid-row : 1;
		grid-column : 2;
	}
	#footer .logo span{
		display : block;
		font-weight : 300;
		letter-spacing : .05em;
	}
	#footer .links{
		grid-row : 1;
		grid-column : 4;
	}
	#footer p{
		grid-row : 1;
		grid-column : 6;
	}
	#footer .links > ul:nth-of-type( 1 ){
		columns : 2;
	}
	#footer .links > ul:nth-of-type( 1 ) a{
		font-weight : 300;
		line-height : 1.2;
		letter-spacing : .05em;
	}
	#footer .links > ul:nth-of-type( 1 ) > li > a{
		font-family : Jost , 'Noto Sans JP', sans-serif;
	}
	#footer .links > ul:nth-of-type( 1 ) li li a{
		font-family: 'Noto Sans JP', sans-serif;
	}
	#footer .links > ul:nth-of-type( 2 ){
		display : flex;
		align-items : start;
		justify-content : start;
		flex-wrap: wrap;
		line-height: 1.8;
		font-family: 'Noto Sans JP', sans-serif;
	}
	#footer .links > ul:nth-of-type( 2 ) li + li::before , #footer .links > ul:nth-of-type( 2 ) a{
		letter-spacing : .05em;
	}

}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#footer{
		grid-template-columns : calc( 40 var( --designBaseX ) ) calc( 240 var( --designBaseX ) ) calc( 87 var( --designBaseX ) ) calc( 500 var( --designBaseX ) ) 1fr auto calc( 78 var( --designBaseX ) );
		padding-top : calc( 61 var( --designBaseY ) );
		padding-bottom : calc( 91 var( --designBaseY ) );
	}
	#footer .logo span{
		margin-top : calc( 14 var( --designBaseY ) );
		font-size : calc( 20 var( --designBaseY ) );
		font-family: 'Noto Sans JP', sans-serif;
	}
	#footer .links > ul:nth-of-type( 1 ){
		padding-top : calc( ( 26 - 2 ) var( --designBaseY ) );
	}
	#footer .links > ul:nth-of-type( 1 ) li{
		margin-bottom : calc( ( 20 - 2 - 2 ) var( --designBaseY ) );
	}
	#footer .links > ul:nth-of-type( 1 ) ul{
		margin-top : calc( ( 20 - 2 - 2 ) var( --designBaseY ) );
	}
	#footer .links > ul:nth-of-type( 1 ) a{
		font-size : calc( 20 var( --designBaseY ) );
	}
	#footer .links > ul:nth-of-type( 2 ){
		margin-top : calc( ( 53 - 2 ) var( --designBaseY ) );
	}
	#footer .links > ul:nth-of-type( 2 ) li + li::before , #footer .links > ul:nth-of-type( 2 ) a{
		font-size : calc( 18 var( --designBaseY ) );
	}
	#footer p{
		padding-bottom : calc( 20 var( --designBaseY ) );
		font-size : calc( 20 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#footer{
		grid-template-columns : 92px 168px 87px 476px 1fr auto 78px;
		padding-top : 61px;
		padding-bottom : 91px;
	}
	#footer .logo span{
		margin-top : 14px;
		font-size : 20px;
	}
	#footer .links > ul:nth-of-type( 1 ){
		padding-top : calc( 26px - 2px );
	}
	#footer .links > ul:nth-of-type( 1 ) li{
		margin-bottom : calc( 20px - 2px - 2px );
	}
	#footer .links > ul:nth-of-type( 1 ) ul{
		margin-top : calc( 20px - 2px - 2px );
	}
	#footer .links > ul:nth-of-type( 1 ) a{
		font-size : 20px;
	}
	#footer .links > ul:nth-of-type( 2 ){
		margin-top : calc( 53px - 2px );
	}
	#footer .links > ul:nth-of-type( 2 ) li + li::before , #footer .links > ul:nth-of-type( 2 ) a{
		font-size : 18px;
	}
	#footer p{
		padding-bottom : 20px;
		font-size : 20px;
	}
}