/* Start of Selection */
.history-content {
	.history-content__inner {
		padding-top: calc(120 / 1440 * 100vw);
		padding-bottom: calc(120 / 1440 * 100vw);
		.history {
			background: #F2F9FF;
			.history__inner {

				padding: calc(64 / 1440 * 100vw);
				display: flex;
				gap: calc(80 / 1440 * 100vw);
				.history-left {
					max-width: calc(193 / 1440 * 100vw);
					min-width: calc(193 / 1440 * 100vw);
					.c-title{
						.c-title__ja{
							color: var(--0-c-2-d-45, #0C2D45);

							/* JP-48B */
							font-family: "Noto Sans JP";
							font-size: calc(48 / 1440 * 100vw);
							font-style: normal;
							font-weight: 700;
							line-height: 160%; /* 76.8px */
							letter-spacing: calc(1.92 / 1440 * 100vw);

							white-space: nowrap;
						}
						.c-title__en{
							color: var(--0-c-2-d-45, #0C2D45);

							/* EN-16R */
							font-family: Montserrat;
							font-size: calc(16 / 1440 * 100vw);
							font-style: normal;
							font-weight: 400;
							line-height: 160%; /* 25.6px */
						}
					}
				}
				.history-right {
					width: 100%;
					position:relative;
					/* Start of Selection */
					/* Start of Selection */
					.vertical-line{
						position:absolute;
						top:0;
						left: calc(152 / 1440 * 100vw);
						width: calc(2 / 1440 * 100vw);
						height:100%;
						background: repeating-linear-gradient(
							to bottom,
							#7da1c4 0px,
							#7da1c4 calc(7 / 1440 * 100vw),
							transparent calc(7 / 1440 * 100vw),
							transparent calc(12 / 1440 * 100vw)
						);
					}
					.last-dot{
						position:absolute;
						bottom: calc(-5 / 1440 * 100vw);
						left: calc(148 / 1440 * 100vw);
						width: calc(10 / 1440 * 100vw);
						height: calc(10 / 1440 * 100vw);
						background-color: #7da1c4;
						border-radius: 100%;
					}
					/* End of Selection */
					/* End of Selection */
					.two-col-table {


						.table-row {
							/* font */
							color: #222;

							/* 列の余白 */
							display: flex;
							align-items: flex-start;
							padding-bottom: calc(24 / 1440 * 100vw);

							/* 区切り線 */
							/* border-bottom: 1px solid #222; */

							.key {
								position: relative;

								min-width: calc(94 / 1440 * 100vw);
								width: calc(94 / 1440 * 100vw);
								margin-right: calc(128 / 1440 * 100vw);

								color: var(--7-da-1-c-4, #7da1c4);

								/* JP-16B */
								font-family: "Noto Sans JP";
								font-size: calc(16 / 1440 * 100vw);
								font-style: normal;
								font-weight: 700;
								line-height: 160%; /* 25.6px */
								letter-spacing: calc(0.64 / 1440 * 100vw);

								&::after {
									position: absolute;
									right: calc(-64 / 1440 * 100vw);
									top: 50%;
									transform: translateY(-50%) ;

									content: "";
									display: block;
									width: calc(10 / 1440 * 100vw);
									height: calc(10 / 1440 * 100vw);
									background-color: #7da1c4;
									border-radius: 100%;
								}
							}
							&:first-child{
								.key{
									&::after{
										display: none;
									}
								}

							}

							.value {
								.tag {
									padding: calc(4 / 1440 * 100vw) calc(24 / 1440 * 100vw);
									width: fit-content;

									color: var(--0-c-2-d-45, #0c2d45);

									/* JP-12R */
									font-family: "Noto Sans JP";
									font-size: calc(12 / 1440 * 100vw);
									font-style: normal;
									font-weight: 400;
									line-height: 160%; /* 19.2px */
									letter-spacing: calc(0.48 / 1440 * 100vw);

									border-radius: calc(64 / 1440 * 100vw);
									background: var(--ccdff-2, #ccdff2);

									margin-bottom: calc(8 / 1440 * 100vw);
								}
								.history-desc {
									color: var(--txt_main, #222);

									/* JP-16R */
									font-family: "Noto Sans JP";
									font-size: calc(16 / 1440 * 100vw);
									font-style: normal;
									font-weight: 400;
									line-height: 160%; /* 25.6px */
									letter-spacing: calc(0.64 / 1440 * 100vw);
								}
							}
						}
						.table-row:first-child {
							padding-top: 0;
						}
					}
				}
			}
		}
	}
}
/* End of Selection */

@media screen and (max-width: 768px) {
	.history-content {
		.history-content__inner {
			padding-top: calc(120 / 375 * 100vw);
			padding-bottom: calc(120 / 375 * 100vw);
			.history {
				background: #F2F9FF;
				.history__inner {

					padding: calc(40 / 375 * 100vw) calc(20 / 375 * 100vw);
					display: flex;
					flex-direction: column;
					gap: calc(40 / 375 * 100vw);
					.history-left {
						max-width: calc(193 / 375 * 100vw);
						min-width: calc(193 / 375 * 100vw);
						.c-title{
							gap:calc(7.4 / 375 * 100vw);
							.c-title__ja{
								color: var(--0-c-2-d-45, #0C2D45);

								/* JP-48B */
								font-family: "Noto Sans JP";
								font-size: calc(28 / 375 * 100vw);
								font-style: normal;
								font-weight: 700;
								line-height: 160%; /* 76.8px */
								letter-spacing: calc(1.12 / 375 * 100vw);

								white-space: nowrap;
							}
							.c-title__en{
								color: var(--0-c-2-d-45, #0C2D45);

								/* EN-16R */
								font-family: Montserrat;
								font-size: calc(12 / 375 * 100vw);
								font-style: normal;
								font-weight: 400;
								line-height: 160%; /* 25.6px */
							}
						}
					}
					.history-right {
						width: 100%;
						position:relative;
						/* Start of Selection */
						/* Start of Selection */
						.vertical-line{
							display: none;
							position:absolute;
							top:0;
							left: calc(152 / 375 * 100vw);
							width: calc(2 / 375 * 100vw);
							height:100%;
							background: repeating-linear-gradient(
								to bottom,
								#7da1c4 0px,
								#7da1c4 calc(7 / 375 * 100vw),
								transparent calc(7 / 375 * 100vw),
								transparent calc(12 / 375 * 100vw)
							);
						}
						.last-dot{
							display: none;
							position:absolute;
							bottom: calc(-5 / 375 * 100vw);
							left: calc(148 / 375 * 100vw);
							width: calc(10 / 375 * 100vw);
							height: calc(10 / 375 * 100vw);
							background-color: #7da1c4;
							border-radius: 100%;
						}
						/* End of Selection */
						/* End of Selection */
						.two-col-table {


							.table-row {
								/* font */
								color: #222;

								/* 列の余白 */
								display: flex;
								flex-direction: column;
								gap: calc(12 / 375 * 100vw);
								align-items: flex-start;
								padding-bottom: calc(48 / 375 * 100vw);
								&:last-child{
									padding-bottom: calc(24 / 375 * 100vw);
								}

								/* 区切り線 */
								/* border-bottom: 1px solid #222; */

								.key {
									position: relative;

									min-width: calc(94 / 375 * 100vw);
									width: calc(94 / 375 * 100vw);
									margin-right: calc(128 / 375 * 100vw);

									color: var(--7-da-1-c-4, #7da1c4);

									/* JP-16B */
									font-family: "Noto Sans JP";
									font-size: calc(16 / 375 * 100vw);
									font-style: normal;
									font-weight: 700;
									line-height: 160%; /* 25.6px */
									letter-spacing: calc(0.64 / 375 * 100vw);

									&::after {

										position: absolute;
										right: calc(-64 / 375 * 100vw);
										top: 50%;
										transform: translateY(-50%) ;

										content: "";
										display: block;
										width: calc(10 / 375 * 100vw);
										height: calc(10 / 375 * 100vw);
										background-color: #7da1c4;
										border-radius: 100%;

										display: none;
									}
								}
								&:first-child{
									.key{
										&::after{
											display: none;
										}
									}

								}

								.value {
									.tag {
										padding: calc(4 / 375 * 100vw) calc(24 / 375 * 100vw);
										width: fit-content;

										color: var(--0-c-2-d-45, #0c2d45);

										/* JP-12R */
										font-family: "Noto Sans JP";
										font-size: calc(12 / 375 * 100vw);
										font-style: normal;
										font-weight: 400;
										line-height: 160%; /* 19.2px */
										letter-spacing: calc(0.48 / 375 * 100vw);

										border-radius: calc(64 / 375 * 100vw);
										background: var(--ccdff-2, #ccdff2);

										margin-bottom: calc(8 / 375 * 100vw);
									}
									.history-desc {
										color: var(--txt_main, #222);

										/* JP-16R */
										font-family: "Noto Sans JP";
										font-size: calc(16 / 375 * 100vw);
										font-style: normal;
										font-weight: 400;
										line-height: 160%; /* 25.6px */
										letter-spacing: calc(0.64 / 375 * 100vw);
									}
								}
							}
							.table-row:first-child {
								padding-top: 0;
							}
						}
					}
				}
			}
		}
	}
}