@charset "UTF-8";

/* --------------------------------------------
FOOTER PC
--------------------------------------------- */
@media print , screen and ( min-width : 750.02px ){
	#footerPC{
		padding-block : calc( 36 var( --remBase ) );
		background-color : var( --BackColor01 );
	}
	#footerPC .box{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : space-between;
	}
	#footerPC .logo{
		display : block;
		width : fit-content;
	}
	#footerPC .logo img{
		height : calc( 66 var( --remBase ) );
	}
	#footerPC .mypages{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 16 var( --remBase ) );
	}
	#footerPC .mypages a{
		display : grid;
		align-items : center;
		justify-content : center;
		height : 100%;
		padding-inline : calc( 12 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		border : solid 1px var( --AccentColor03-4 );
		border-radius : calc( 6 var( --remBase ) );
	}
	#footerPC .mypages a::before{
		display : block;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 center;
		background-size : contain;
	}
	#footerPC .mypage01{
		grid-template-columns : calc( 29 var( --remBase ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
		padding-block : calc( 8 var( --remBase ) );
	}
	#footerPC .mypage01::before{
		height : calc( 29 var( --remBase ) );
		background-image : url( "../images/footer/icon01.svg" );
	}
	#footerPC .mypage02{
		grid-template-columns : calc( 39 var( --remBase ) ) auto;
		column-gap : calc( 4 var( --remBase ) );
		padding-block : calc( 8 var( --remBase ) );
	}
	#footerPC .mypage02::before{
		height : calc( 30 var( --remBase ) );
		background-image : url( "../images/footer/icon02.svg" );
	}
	#footerPC .mypage03{
		grid-template-columns : calc( 38 var( --remBase ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
		padding-block : calc( 6 var( --remBase ) );
	}
	#footerPC .mypage03::before{
		height : calc( 34 var( --remBase ) );
		background-image : url( "../images/footer/icon03.svg" );
	}
	#footerPC .links01{
		display : grid;
		grid-template-columns : calc( 320 var( --percentBase ) ) calc( 320 var( --percentBase ) ) calc( 680 var( --percentBase ) );
		justify-content : space-between;
		margin-top : calc( 48 var( --remBase ) );
	}
	#footerPC .links01 > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
	}
	#footerPC .links01 h4{
		display : grid;
		align-items : center;
		align-self : center;
		justify-content : start;
		padding-bottom : calc( 6 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		font-weight : 700;
		line-height : 1.7;
		color : #4f4f4f;
		white-space : nowrap;
		border-bottom : solid 1px var( --AccentColor01-3 );
	}
	#footerPC .links01 h4::before{
		display : block;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 center;
		background-size : contain;
	}
	#footerPC .links01 > li:nth-child( 1 ) h4{
		grid-template-columns : calc( 41 * 100% / 320 ) auto;
		column-gap : calc( 4 * 100% / 320 );
	}
	#footerPC .links01 > li:nth-child( 1 ) h4::before{
		height : calc( 38 var( --remBase ) );
		background-image : url( "../images/footer/links0101.svg" );
	}
	#footerPC .links01 > li:nth-child( 2 ) h4{
		grid-template-columns : calc( 39 * 100% / 320 ) auto;
		column-gap : calc( 6 * 100% / 320 );
	}
	#footerPC .links01 > li:nth-child( 2 ) h4::before{
		height : calc( 40 var( --remBase ) );
		background-image : url( "../images/footer/links0102.svg" );
	}
	#footerPC .links01 > li:nth-child( 3 ) h4{
		grid-template-columns : calc( 39 * 100% / 680 ) auto;
		column-gap : calc( 6 * 100% / 680 );
	}
	#footerPC .links01 > li:nth-child( 3 ) h4::before{
		height : calc( 39 var( --remBase ) );
		background-image : url( "../images/footer/links0103.svg" );
	}
	#footerPC .links01 h4 + ul{
		margin-top : calc( 8 var( --remBase ) );
	}
	#footerPC .links01 li li a{
		display : grid;
		grid-template-columns : calc( 12 var( --fontCoef ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : start;
		font-size : calc( 16 var( --fontCoef ) );
		font-weight : 500;
		line-height : 1.7;
		color : #4f4f4f;
	}
	#footerPC .links01 li li a::before{
		display : block;
		height : calc( 12 var( --fontCoef ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/circle01.svg" ) center / contain no-repeat;
		filter : invert( 96% ) sepia( 0% ) saturate( 0% ) hue-rotate( 229deg ) brightness( 87% ) contrast( 89% );
	}
	#footerPC .links01 > li:nth-child( -n+2 ) li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#footerPC .links01 > li:nth-child( 3 ) > ul{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
	}
	#footerPC .links01 > li:nth-child( 3 ) ul ul{
		padding-left : calc( 34 * 100% / 340 );
		margin-top : calc( 8 var( --remBase ) );
	}
	#footerPC .links01 > li:nth-child( 3 ) li li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#footerPC .links01 h5{
		display : grid;
		grid-template-columns : calc( 12 var( --fontCoef ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : start;
		font-size : calc( 16 var( --fontCoef ) );
		font-weight : 500;
		line-height : 1.7;
		color : #4f4f4f;
	}
	#footerPC .links01 h5::before{
		display : block;
		height : calc( 12 var( --fontCoef ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/circle01.svg" ) center / contain no-repeat;
		filter : invert( 96% ) sepia( 0% ) saturate( 0% ) hue-rotate( 229deg ) brightness( 87% ) contrast( 89% );
	}
	#footerPC .links02{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 16 var( --percentBase ) );
		align-items : center;
		justify-content : start;
		padding-top : calc( 28 var( --remBase ) );
		margin-top : calc( 28 var( --remBase ) );
		border-top : solid 1px #ccc;
	}
	#footerPC .links02 a{
		display : grid;
		grid-template-columns : calc( 12 var( --fontCoef ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : start;
		font-size : calc( 16 var( --fontCoef ) );
		font-weight : 500;
		line-height : 1.7;
		color : #4f4f4f;
	}
	#footerPC .links02 a::before{
		display : block;
		height : calc( 12 var( --fontCoef ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/circle01.svg" ) center / contain no-repeat;
		filter : invert( 96% ) sepia( 0% ) saturate( 0% ) hue-rotate( 229deg ) brightness( 87% ) contrast( 89% );
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#toTop{
		display : grid;
		place-items : center;
		width : calc( 40 var( --viewportBase ) );
		height : calc( 40 var( --remBase ) );
		background-color : var( --AccentColor01 );
	}
	#toTop.is-fixed{
		position : fixed;
		bottom : 0;
		right : calc( 16 var( --viewportBase ) );
	}
	#toTop:not( .is-fixed ){
		position : absolute;
		top : 0;
		translate : 0 -100%;
		right : 0;
	}
	#toTop img{
		height : calc( 24 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( max-width : 750px ){
		#toTop{
			transition : right var( --transitionBase );
		}
	}
}
#footer{
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
}
#footer p{
	font-weight : 500;
}
@media screen and ( max-width : 750px ){
	#footer{
		position : relative;
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 92 var( --remBase ) );
	}
	#footer p{
		font-size : 1.6rem;
		line-height : 1.7;
		text-align : center;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#footer{
		display : grid;
		align-items : center;
		justify-content : center;
		height : calc( 212 var( --remBase ) );
	}
	#footer p{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
	}
}