@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Banner_aspect: 2.618 / 1.2;
		--Banner_H3_font-size: 3.8vw;
		--Banner_H3_Em_font-size: 9vw;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Banner_aspect: 2.618 / 1;
		--Banner_H3_font-size: var(--H3_font-size);
		--Banner_H3_Em_font-size: var(--Size_40);
	}
}

@media screen and (min-width:1161px) {
	:root {
		--H3_font-size: var(--Size_24);
		--H3_Em_font-size: var(--Size_40);
		--Banner_aspect: 2.618 / 1;
		--Banner_H3_font-size: var(--H3_font-size);
		--Banner_H3_Em_font-size: var(--Size_40);
	}
}

section {
	&  div {
		& table {
			width: 100%;
			border-collapse: collapse;
			& tr {
				& th {
					padding: var(--Size_06);
					background: #dcdddd;
					border: 1px var(--Color_K) solid;
				}
				& td {
					padding: var(--Size_06);
					border: 1px var(--Color_K) solid;
				}
			}
		}
	}
}

#banner {
	display: flex;
	margin: var(--Margin_S) 0 0;
	width: 100%;
	& > div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		background: url('../common/svg/circle_sumi.svg');
		background-repeat: no-repeat;
		background-position: left;
		aspect-ratio: var(--Banner_aspect);
		& > div {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 60%;
			z-index: 1;
			& > div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 70%;
				& h3 {
					margin: 0;
					padding: var(--Gap_M) 0 0;
					font-size: var(--Banner_H3_font-size);
					& em {
						display: block;
						font-size: var(--Banner_H3_Em_font-size);
						font-weight: 600;
					}
				}
				& a {
					display: inline-flex;
					align-items: center;
					margin: var(--Margin_S) 0 0;
					padding: 0 var(--Margin_S) var(--Gap_S) 0;
					font-size: var(--A_font-size);
					color: var(--Color_K);
					font-weight: 600;
					border-bottom: 3px var(--Color_K) solid;
				}
				& a:before {
					content: '';
					position: absolute;
					bottom: -2px;
					right: -2px;
					width: var(--Size_30);
					height: 3px;
					border-radius: var(--Border-radius_L);
					background-color: var(--Color_K);
					transform: rotate(50deg);
					transform-origin: calc(100% - 2px) 50%;
				}
				& a.out:after {
					content: "\f08e";
					padding: 0 0 0 var(--Gap_S);
					font-size: var(--Size_10);
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}
				& a:hover {
					color: var(--Color_R);
					border-bottom: 3px var(--Color_R) solid;
				}
				& a:hover:before {
					background-color: var(--Color_R);
				}
			}
		}
	}
	& > div:after {
		content: '';
		position: absolute;
		top: 0;
		left: 5%;
		height: 100%;
		background: url('../common/img/philosophy/representative.png');
		background-repeat: no-repeat;
		background-size: contain;
		aspect-ratio: 1 / 1;
	}
}