@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Footer_padding: var(--padding) var(--padding) 0;
		--Footer_Nav_Div_Em_flex-basis: 100%;
	}
}

@media screen and (min-width:769px) {
	:root {
		--Footer_padding: var(--Size_12) var(--padding) 0;
		--Footer_Nav_Div_Em_flex-basis: auto;
	}
}

footer {
	display: flex;
	flex-direction: column;
	padding: 0 var(--padding) 0;
	& nav {
		display: flex;
		flex-direction: var(--Flex-direction_CRR);
		justify-content: space-between;
		gap: var(--Gap_L);
		padding: var(--Size_24) 0 0;
		& > div {
			display: flex;
			flex-direction: column;
			gap: var(--Gap_L);
			& > div {
				display: flex;
				flex-wrap: wrap;
				gap: var(--Gap_L);
				& em {
					flex-basis: var(--Footer_Nav_Div_Em_flex-basis);
					color: var(--Color_FF);
					font-size: var(--Size_08);
				}
				& a {
					color: var(--Color_FF);
					font-size: var(--Size_08);
					& img {
						height: var(--Size_10);
					}
				}
				& a.pdf:after {
					content: "PDF";
					margin: 0 0 0 var(--Gap_S);
					padding: var(--Size_01) var(--Gap_M);
					font-size: var(--Size_06);
					background: var(--Color_FF);
					border-radius: var(--Border-radius_L);
				}
				& a.out:after {
					content: "\f08e";
					padding: 0 0 0 var(--Size_04);
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}
			}
		}
		& p {
			color: var(--Color_FF);
			font-size:var(--Size_08);
			& em {
				font-size:var(--Size_10);
			}
			& a {
				color: var(--Color_FF);
				font-size: var(--Size_08);
			}
			& a:hover {
				color: var(--Color_R);
			}
		}
	}
	& > div {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--Gap_L);
		padding: var(--Margin_S) 0;
		& a {
			display: flex;
			& svg {
				& .st0 {
					fill: var(--Color_FF);
				}
			}
			& #teppen_d {
				height: var(--Size_18);
				aspect-ratio: 300 / 59;
			}
			& #teppen_j {
				height: var(--Size_18);
				aspect-ratio: 112 / 22;
			}
			& img {
				height: var(--Size_18);
			}
		}			
	}
	& > p {
		display: flex;
		justify-content: center;
		padding: 0 0 var(--Gap_L);
		color: var(--Color_FF100);
		font-size: var(--Size_08);
	}
}

body#Teppen_Dash_Company {
	footer {
		background: #000;
		&  nav {
			& > div {
				& > div {
					& a:hover {
						color: var(--Color_R);
					}
					& a.pdf:after {
						color: var(--Color_K);
					}
					& a.pdf:hover:after {
						color: var(--Color_FF);
						background: var(--Color_R);
					}
				}
			}
			& p {
				& a:hover {
					color: var(--Color_R);
				}
			}
		}
		& > div {
			& a:hover {
				& svg {
					& .st0 {
						fill: var(--Color_R);
					}
				}
			}			
		}
	}
}

body#Teppen_Japan {
	footer {
		background: var(--Color_R);
		&  nav {
			& > div {
				& > div {
					& a.pdf:after {
						color: var(--Color_R);
					}
					& a:hover {
						color: var(--Color_K);
					}
					& a.pdf:hover:after {
						color: var(--Color_R);
						background: var(--Color_K);
					}
				}
			}
			& p {
				& a:hover {
					color: var(--Color_K);
				}
			}
		}
		& > div {
			& a:hover {
				& svg {
					& .st0 {
						fill: var(--Color_K);
					}
				}
			}			
		}
	}
}