@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--H2_font-size: var(--Size_22);
		--H3_font-size: var(--Size_14);
		--A_font-size: var(--Size_10);
		--Box_Figure_flex-basis: auto;
		--Wrap_ImgRight_Figure_order: 1;
		--Wrap_ImgRight_Div_order: 2;
		--Wrap_ImgLeft_Figure_order: 1;
		--Wrap_ImgLeft_Div_order: 2;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--H2_font-size: var(--Size_24);
		--H3_font-size: var(--Size_16);
		--A_font-size: var(--Size_10);
		--Box_Figure_flex-basis: 36%;
		--Wrap_ImgRight_Figure_order: 2;
		--Wrap_ImgRight_Div_order: 1;
		--Wrap_ImgLeft_Figure_order: 1;
		--Wrap_ImgLeft_Div_order: 2;
	}
}

@media screen and (min-width:1161px) {
	:root {
		--H2_font-size: var(--Size_24);
		--H3_font-size: var(--Size_18);
		--A_font-size: var(--Size_12);
		--Box_Figure_flex-basis: 36%;
		--Wrap_ImgRight_Figure_order: 2;
		--Wrap_ImgRight_Div_order: 1;
		--Wrap_ImgLeft_Figure_order: 1;
		--Wrap_ImgLeft_Div_order: 2;
	}
}

section {
	& > div {
		& h2 {
			text-align: center;
			font-size: var(--H2_font-size);
			font-weight: 600;
			line-height: 1.2;
			margin: 0 0 var(--Margin_S);
		}
		& p.read {
			margin: 0 0 var(--Margin_M);
			text-align: center;
		}
	}
}

.open {
	margin: 0 0 var(--Margin_M);
	background: var(--Color_1D000);
	aspect-ratio: 2.618 / 1;
}

.box {
	display: flex;
	gap: var(--Margin_S);
	padding: var(--Margin_S) 0 0;
	background: var(--Color_1D000);
	& figure {
		flex-basis: var(--Box_Figure_flex-basis);
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		aspect-ratio: 1 / 1;
		& img {
			z-index: 1;
			width: 100%;
		}
	}
	& > div {
		flex: 1;
		& h3 {
			padding: 0 0 var(--Gap_M);
			width: 100%;
			font-size: var(--H3_font-size);
			font-weight: 600;
			& img {
				width: 100%;
			}
		}
		& p {
			text-align: justify;
			font-size: var(--Size_10);
		}
		& 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);
		}
	}
}

.row {
	flex-direction: var(--Flex-direction_CRR);
}

.col {
	flex-direction: column;
}

.img-right {
	& figure {
		order: var(--Wrap_ImgRight_Figure_order);
	}
	& > div {
		order: var(--Wrap_ImgRight_Div_order);
	}
}

.img-left {
	& figure {
		order: var(--Wrap_ImgLeft_Figure_order);
	}
	& > div {
		order: var(--Wrap_ImgLeft_Div_order);
	}
}

.border {
	border-top: 1px var(--Color_1D020) solid;
}