@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Open_Div_Img_width: 42vw;
		--Open_Div_H2_font-size: 7vw;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Open_Div_Img_width: 220px;
		--Open_Div_H2_font-size: var(--Size_20);
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Open_Div_Img_width: 100%;
		--Open_Div_H2_font-size: var(--Size_24);
	}
}

#open {
	display: flex;
	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: 2.618 / 1;
		& > div {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 66%;
			& > div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				& svg {
					width: var(--Open_Div_Img_width);
					aspect-ratio: 377.9 / 65.6;
				}
				& h2 {
					margin: 0;
					padding: var(--Gap_M) 0 0;
					font-size: var(--Open_Div_H2_font-size);
				}
			}
		}
	}
	& > 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;
	}
}

#greeting {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	& .col {
		& div {
			& b {
				display: flex;
				justify-content: flex-end;
				& img {
					height: var(--Size_20);
				}
			}
		}
	}
}

section#contents.page {
	& .wrap {
		& .row {
			& > div {
				& b {
					display: flex;
					justify-content: flex-end;
					width: 100%;
					& img {
						width: calc( var(--Size_10) * 8 );
					}
				}
			}
		}
	}
}