@charset "utf-8";
@import url("../css_renew/root.css");
@import url("column_base.css");


:root {
	--paper: #11C6CE;
	--mobile: #02ACFD;
	--str-navy: #025AAD;
}


/*root*/
/*------------------------------------------------------------*/
/* 紙とデジタルスタンプラリー費用徹底比較ページ                                         */
/*------------------------------------------------------------*/

.cost_comparison_page {
	width: 100%;
	overflow: hidden;

	h2 {
		position: relative;
		z-index: 10;
		height: 100px;
		display: grid;
		place-content: center;

		&::before {
			position: absolute;
			z-index: 5;
			content: "COST COMPARISON";
			font-size: 10rem;
			line-height: 10rem;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			color: #F0F0F0;
			font-family: 'Nunito Sans', sans-serif;
			font-weight: 700;
		}

		strong {
			font-size: 2.6rem;
			z-index: 10;
			line-height: 2.6rem;
			position: relative;

			span {
				color: var(--deep-blue);
			}
		}
	}
}

section {

	h3,
	.cost_simulation_taxt,
	.cost_comparison_taxt {
		text-align: center;
	}

	h3 {
		font-size: 2.6rem;
	}

	.cost_simulation_taxt,
	.cost_comparison_taxt {
		margin-top: 30px;
		font-size: 1.6rem;
		margin-bottom: 55px;
		font-weight: 500;
		line-height: 3.2rem;
	}
}

#overview {
	position: relative;
	z-index: 3;

	.overview_text {
		padding: 60px 0 70px;
		background: white;
		position: relative;
		z-index: 5;

		@media screen and (max-width: 820px) {
			padding: 45px 0 50px;
		}

		@media screen and (max-width: 480px) {
			padding: 35px 0;
		}

		&::after {
			position: absolute;
			content: "";
			background: white;
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			width: 38px;
			height: auto;
			aspect-ratio: 38/ 29;
			top: calc(100% - 3px);
			left: 0;
			right: 0;
			margin: auto;
			z-index: 3;
		}

		@media screen and (max-width: 820px) {
			&::after {
				width: 30px;
			}
		}


		p {
			font-size: 2.2rem;
			font-weight: 500;
			text-align: center;
			line-height: 3.6rem;
			letter-spacing: 0.06em;

			@media screen and (max-width: 820px) {
				font-size: 1.8rem;
				line-height: 3rem;
			}

			@media screen and (max-width: 480px) {
				font-size: 1.6rem;
				line-height: 2.8rem;
			}

			span {
				font-weight: 600;
				color: var(--new-blue);

			}

			strong {
				display: inline-block;
				color: white;
				background: var(--new-blue);
				padding: 2px 20px 4px;
				margin: 0 4px;
				margin-top: 10px;

				border-radius: 6px;
				font-size: 2.3rem;

				@media screen and (max-width: 820px) {
					font-size: 1.9rem;
					padding: 1px 10px 2px;
					border-radius: 3px;
				}

				@media screen and (max-width: 480px) {
					font-size: 1.6rem;
					padding: 0 5px 2px;
					margin: 0 2px;
					margin-top: 5px;
				}
			}
		}
	}

	.overview_box {
		background: linear-gradient(-125deg, #0AADFC 0%, #09B4F3 40%, #05D3CB 100%);
		margin: 0 auto;
		padding: 72px 0 50px;
		z-index: 2;
		position: relative;

		@media screen and (max-width: 820px) {
			padding: 55px 0 35px;
		}

		@media screen and (max-width: 480px) {
			padding: 45px 0;
		}

		&::after {
			position: absolute;
			content: "";
			width: 100%;
			height: 140px;
			left: 0;
			bottom: -1px;
			background: url(../img/common/bg_white.png) no-repeat;
			background-size: 100% 100%;
			z-index: 1;

		}

		@media screen and (max-width: 820px) {
			&::after {
				height: 70px;
			}
		}

		@media screen and (max-width: 480px) {
			&::after {
				height: auto;
				aspect-ratio: 10/1;
			}

		}

		.container>p {
			position: relative;
			z-index: 2;
			color: white;
			font-size: 2.8rem;
			letter-spacing: 0.06em;
			text-align: center;

			@media screen and (max-width: 820px) {
				font-size: 2.2rem;
			}

			@media screen and (max-width: 480px) {
				font-size: 1.8rem;
			}

			strong {
				position: relative;
				line-height: 3.6rem;

				@media screen and (max-width: 480px) {
					line-height: 3rem;
				}

				&::before,
				&::after {
					position: absolute;
					content: "";
					height: 100%;
					width: 5px;
					background: white;
					top: 5px;
					bottom: 0;
					margin: auto;
					border-radius: 100px;
				}

				&::before {
					right: calc(100% + 20px);
					transform: rotate(-30deg);
				}

				&::after {
					left: calc(100% + 20px);
					transform: rotate(30deg);
				}

				@media screen and (max-width: 820px) {

					&::before,
					&::after {
						height: 50%;
						top: auto;
						width: 3px;
					}
				}
			}
		}

		ul {
			margin-top: 45px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: stretch;
			position: relative;
			z-index: 2;

			@media screen and (max-width: 480px) {
				margin-top: 30px;
			}

			>li {
				background: white;
				border-radius: 15px;
				width: 32.2%;
				padding: 27px 30px 40px;

				filter: drop-shadow(0 13px 36px rgba(2, 172, 253, 0.2));
				transform: translateZ(0);


				@media screen and (max-width: 820px) {
					width: 100%;
					margin-bottom: 15px;
				}

				@media screen and (max-width: 480px) {
					border-radius: 8px;
					padding: 25px 20px 20px;
				}

				h3 {
					font-size: 2rem;
					line-height: 3rem;
					margin-bottom: 20px;

					@media screen and (max-width: 480px) {
						padding: 0;
						margin: 0;
						font-size: 1.8rem;
						line-height: 3rem;
						margin-bottom: 20px;
					}
				}

				.content {

					>p {
						font-size: 1.4rem;
						font-weight: 500;
					}

					ol {
						max-width: 780px;
						margin: 0 auto;
						list-style-type: none;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						padding: 0;

						li {
							width: 100%;
							margin-bottom: 17px;
							padding: 15px 20px 19px;
							background: white;
							border-radius: 8px;

							&:last-child {
								margin-bottom: 0;
							}

							figure {
								display: flex;
								align-items: center;
								justify-content: space-between;
								position: relative;

								.img {
									display: inline-block;
									width: 80px;
									aspect-ratio: 1/1;

									@media screen and (max-width: 480px) {
										width: 65px;
									}

									img {
										width: 100%;
										height: 100%;
										object-fit: contain;
										object-position: center center;
									}
								}

								figcaption {
									width: calc(100% - 80px);
									text-align: left;

									@media screen and (max-width: 480px) {
										width: calc(100% - 65px);

									}

									h4 {
										font-size: 1.6rem;
										line-height: 2.5rem;
										padding-left: 10px;
										position: relative;

										@media screen and (max-width: 480px) {
											font-size: 1.5rem;
										}

										&::before {
											position: absolute;
											content: "";
											height: 1.6rem;
											background-position: center left;
											top: 0.45rem;
											bottom: 0;
											left: 0;
											width: 4px;
											background: #000;

											@media screen and (max-width: 480px) {
												height: 1.5rem;
											}
										}
									}

									p {
										margin-top: 7px;
										font-size: 1.4rem;
										padding-left: 10px;
										line-height: 2.2rem;
										font-weight: 500;
										text-align: left;

										@media screen and (max-width: 480px) {
											font-size: 1.3rem;
										}
									}

								}
							}

							.price {
								display: inline-block;
								font-weight: 600;
								margin-top: 5px;
								font-size: 3rem;

								@media screen and (max-width: 480px) {
									font-size: 2rem;
								}

								small {
									font-size: 1.6rem;

									@media screen and (max-width: 480px) {
										font-size: 1.3rem;
									}
								}

								strong {
									font-family: var(--montserrat);
									font-size: 6.7rem;
									color: var(--paper);
									margin: 0 3px;
									font-weight: 700;
									letter-spacing: 0.01em;
								}

								&.price2 {
									font-size: 2rem;

									strong {
										font-size: 4rem;
									}
								}
							}

						}
					}

					.stamp_system {
						margin-top: 15px;
						background: #757575;
						width: 100%;
						aspect-ratio: 2/1;
					}

					>small {
						font-size: 1.2rem;
						line-height: 2rem;
						color: #757575;
						font-weight: 500;
						text-align: left;
						display: inline-block;
						width: 100%;
						margin-top: 20px;
					}

				}

				&.all_str {
					background: #E7F8FD;

					h3 {
						span {
							color: var(--new-blue);
						}

					}

					.content {
						ol {
							li {
								padding: 15px 12px 19px 25px;

								&:last-child {
									figure {
										img {
											filter: none !important;
										}
									}
								}

								figure {
									img {
										filter: drop-shadow(4px 3px 6px rgba(0, 0, 0, 0.1));
										transform: translateZ(0);

									}

									figcaption {
										h4 {

											&::before {
												background-color: var(--mobile);
											}
										}
									}
								}
							}
						}
					}
				}

				&.paper_str {
					display: flex;
					flex-direction: column;
					background: #E2FEFF;

					@media screen and (max-width: 480px) {
						padding-bottom: 10px;
					}

					h3 {
						span {
							color: #11C6CE;
						}
					}

					.content {
						flex-grow: 1;
						display: flex;
						flex-direction: column;

						ol {
							display: flex;
							flex-direction: column;

							@media screen and (max-width: 820px) {
								flex-direction: row;
								justify-content: space-between;
								align-items: stretch;
								margin: 0;
							}

							@media screen and (max-width: 480px) {
								flex-direction: column;
							}

							li {
								display: flex;
								align-items: center;

								@media screen and (max-width: 820px) {
									width: 48.5%;
									margin: 0;
								}

								@media screen and (max-width: 480px) {
									width: 100%;
									margin-bottom: 17px;
								}

								>div {
									width: 100%;

									@media screen and (max-width: 820px) {
										height: 100%;
										display: flex;
										flex-direction: column;
									}

								}



								figure {
									@media screen and (max-width: 820px) {
										flex-grow: 1;
										align-items: flex-start;
									}

									.img {
										width: 100px;

										@media screen and (max-width: 480px) {
											width: 75px;
										}

										img {
											filter: drop-shadow(-4px 3px 6px rgba(0, 0, 0, 0.1));
											transform: translateZ(0);

										}
									}

									figcaption {
										width: calc(100% - 100px);

										@media screen and (max-width: 480px) {
											width: calc(100% - 80px);

										}

										h4 {

											&::before {
												background-color: var(--paper);
											}
										}
									}
								}

								.price {
									@media screen and (max-width: 820px) {
										margin-top: auto;
									}

									strong {
										color: var(--paper);
										line-height: 1;

										@media screen and (max-width: 480px) {
											font-size: 3rem;
											line-height: 4rem;
										}
									}
								}

							}
						}
					}

				}

				&.digital_str {
					background: #EAF5FF;

					h3 {
						span {
							color: var(--str-navy);
						}

					}

					.content {
						ol {
							li {
								@media screen and (max-width: 820px) {
									display: flex;
									flex-direction: row;
									align-items: center;
								}

								@media screen and (max-width: 480px) {
									flex-direction: column;
									align-items: stretch;
								}

								figure {
									display: block;

									figcaption {
										width: 100%;
									}
								}

								h4 {
									font-size: 2rem;

									@media screen and (max-width: 480px) {
										font-size: 1.5rem;
										text-align: left;
									}

									&::before {

										background: var(--str-navy);
									}
								}

								.stamp_system {
									margin-top: 20px;
									background: none;

									img {
										max-width: 205px;
										margin: 0 auto;
										filter: drop-shadow(-4px 3px 6px rgba(0, 0, 0, 0.1));
										transform: translateZ(0);

										@media screen and (max-width: 480px) {
											max-width: 100%;
										}
									}
								}
							}

							.price {
								display: inline-block;
								font-weight: 600;
								margin-top: 10px;
								font-size: 1.6rem;

								@media screen and (max-width: 820px) {
									text-align: center;
									flex-grow: 1;
								}

								@media screen and (max-width: 480px) {
									font-size: 2rem;
								}

								span {
									font-weight: 500;
								}

								strong {
									font-family: var(--montserrat);
									font-size: 6rem;
									font-weight: 700;
									letter-spacing: 0.1em;
									color: var(--str-navy);

									@media screen and (max-width: 480px) {
										font-size: 4.5rem;
									}
								}
							}

						}

						/* small {
							text-align: center;
						} */
					}


				}

			}
		}
	}
}



.cost_simulation {
	position: relative;
	z-index: 1;
	background: white;
	padding-top: 50px;
	padding-bottom: 65px;

	@media screen and (max-width: 820px) {
		padding-top: 1px;
	}


	.cost_simulation_taxt {
		color: var(--mobile);
		font-size: 2.8rem;
		line-height: 4.6rem;
		font-weight: 600;
		margin-bottom: 0;

		@media screen and (max-width: 820px) {
			font-size: 2.2rem;
			line-height: 3.8rem;
		}

		@media screen and (max-width: 480px) {
			font-size: 2rem;
			line-height: 3rem;
		}

		span {
			position: relative;

			&::after {
				position: absolute;
				content: "";
				bottom: 0;
				left: 0;
				width: 100%;
				height: 11px;
				background: #E0F5FF;
				z-index: 1;
			}

			d {
				position: relative;
				z-index: 2;
			}

		}

		small {
			color: #bbb;
			margin-top: 30px;
			font-size: 1.4rem;
			line-height: 2rem;

			@media screen and (max-width: 480px) {
				font-size: 1rem;
				margin-top: 12px;
			}
		}
	}

	.cost_simulation_box {
		width: 100%;

		&.cost_simulation_box {
			padding-top: 75px;
			padding-bottom: 70px;

			@media screen and (max-width: 820px) {
				padding-top: 45px;
				padding-bottom: 40px;
			}

			@media screen and (max-width: 480px) {
				padding-top: 25px;
			}
		}

		h4 {
			font-size: 2.4rem;
			font-weight: 600;
			text-align: center;
			margin-bottom: 25px;

			@media screen and (max-width: 480px) {
				font-size: 2rem;
				margin-bottom: 15px;
			}

			span {
				font-size: 4rem;
				font-family: var(--montserrat);
				color: #02ACFD;
				font-family: 700;

				@media screen and (max-width: 480px) {
					font-size: 3rem;
				}
			}
		}


	}

	.table_block {
		margin-bottom: 55px;
		>small {
			display: inline-block;
			margin-top: 10px;
			font-weight: 500;
			color: gray;
		}

	}

	.cost_simulation_list {
		display: flex;
		justify-content: space-between;
		filter: drop-shadow(0 13px 36px rgba(2, 172, 253, 0.1));
		transform: translateZ(0);

		@media screen and (max-width: 1200px) {
			flex-direction: column;
		}



		.table_box {
			width: 32%;
			flex-direction: column;
			display: flex;
			justify-content: flex-end;

			@media screen and (max-width: 1200px) {
				width: 100% !important;
			}

			table {
				border-collapse: collapse;
				width: 100%;
				border-radius: 0 0 15px 15px;
				overflow: hidden;

				@media screen and (max-width: 1200px) {
					margin-bottom: 5px;

				}

				th,
				td {
					border: #E4E9EB 1px solid;
					background: white;
				}



				thead {
					tr {
						&:first-child {
							th {
								text-align: center;
								height: 50px;
								border: none;
								border-radius: 5px 5px 0 0;

								@media screen and (max-width: 1200px) {
									height: auto !important;
								}

								h5 {
									padding: 10px;
									height: 100%;
									display: flex;
									color: white;
									justify-content: center;
									align-items: center;
									font-size: 2rem;
									font-weight: bold;
									line-height: 2rem;

									@media screen and (max-width: 1200px) {
										font-size: 1.8rem;
										line-height: 1.8rem;
										padding: 15px 8px;
									}

									@media screen and (max-width: 480px) {
										font-size: 1.4rem;
										padding: 10px 4px;
										line-height: 1.6rem;
									}

								}

							}

						}

						&:nth-child(2) {
							th {
								border-top: none;
								border-bottom: none;
								background: #E7F8FD;
								text-align: center;

								&:first-child {
									border-left: none;
								}

								&:nth-child(2) {
									border-left: none;
								}

								&:last-child {
									border-right: none;
								}

								h5 {
									font-size: 1.6rem;
									padding: 7px;

									@media screen and (max-width: 480px) {
										font-size: 1.3rem;
										padding: 4px;
									}
								}
							}
						}

					}
				}

				tbody {
					tr {

						th,
						td {
							height: 60px;

							@media screen and (max-width: 480px) {
								height: auto;
							}

							&:first-child {
								border-left: none;
							}

							&:last-child {
								border-right: none;
							}

						}

						td {
							padding: 5px 15px;

							&:nth-child(2) {
								border-left: none;
							}

							@media screen and (max-width: 480px) {
								padding: 5px;

							}

							p {
								font-size: 1.7rem;
								font-weight: 500;
								text-align: right;
								letter-spacing: 0.06em;
								font-family: var(--montserrat);

								span {
									&.manen {
										font-family: var(--noto);
										font-size: 80%;
									}
								}

								@media screen and (max-width: 480px) {
									font-size: 1.3rem;
								}

								&.center {
									text-align: center;
									font-weight: 600;
								}
							}
						}

						&:first-child {

							th,
							td {
								border-top: none;
							}
						}

						&:last-child {

							th,
							td {
								border-bottom: none;
							}
						}
					}
				}
			}



			&.paper {
				width: 41.5%;

				table {
					thead {
						tr {
							&:first-child {
								th {
									background: var(--paper);

									&:first-child {
										opacity: 0;
										background: none;
									}
								}
							}

							&:nth-child(2) {
								th {
									width: 25.5%;

									@media screen and (max-width: 480px) {
										width: 22%;
									}

									&:first-child {
										width: auto;
										flex-grow: 1;
										background: #EBEBEB;
										border-radius: 5px 0 0 0;
										border-left: none;

										h5 {
											font-weight: 600;
										}

									}
								}
							}
						}
					}

					tbody {
						tr {
							th {
								background: #FFF8F8;
								text-align: center;
								border-right: none;
								border-left: none;

								h6 {
									font-size: 1.4rem;

									@media screen and (max-width: 480px) {
										font-size: 1.1rem;
									}

									strong {
										font-size: 2rem;

										@media screen and (max-width: 480px) {
											font-size: 1.3rem;
										}
									}
								}
							}

							td {
								&:nth-child(2) {
									border-left: none;
								}

								&.total {
									background: #C5FDF5;

									p {
										font-size: 1.8rem;
										color: #00A3AA;
										font-weight: 600;

										@media screen and (max-width: 480px) {
											font-size: 1.4rem;
										}
									}
								}
							}
						}
					}
				}

			}

			&.digital {
				width: 31.5%;

				table {
					thead {
						tr {
							&:first-child {
								th {
									background: var(--mobile);

									@media screen and (max-width: 1200px) {

										&:first-child {
											opacity: 0;
											background: none;
										}
									}
								}
							}




							&:nth-child(2) {
								th {
									width: calc(100% / 3);
									background: #DDFEFF;

									@media screen and (max-width: 1200px) {
										width: 25.5%;

										@media screen and (max-width: 480px) {
											width: 22%;
										}

										&:first-child {
											width: auto;
											flex-grow: 1;
											background: #EBEBEB;
											border-radius: 5px 0 0 0;
											border-left: none;

											h5 {
												font-weight: 600;
											}

										}

									}
								}
							}

						}
					}

					tbody {
						@media screen and (max-width: 1200px) {

							th {
								background: #FFF8F8;
								text-align: center;
								border-right: none;
								border-left: none;

								h6 {
									font-size: 1.4rem;

									@media screen and (max-width: 480px) {
										font-size: 1.1rem;
									}

									strong {
										font-size: 2rem;

										@media screen and (max-width: 480px) {
											font-size: 1.3rem;
										}

									}
								}
							}
						}

						td {
							&.total {
								background: #CCF3FF;

								p {
									font-size: 1.8rem;
									color: #02ACFD;
									font-weight: 600;

									@media screen and (max-width: 480px) {
										font-size: 1.4rem;
									}
								}
							}

						}
					}
				}

			}

			&.total {
				width: 26%;

				table {
					thead {
						tr {
							&:first-child {
								th {
									background: #FF525F;
									height: 65px;

									@media screen and (max-width: 1200px) {

										&:first-child {
											opacity: 0;
											background: none;
										}
									}

								}

							}

							&:nth-child(2) {
								th {
									width: calc(100% / 2);
									background: #FFF2F3;


									@media screen and (max-width: 1200px) {
										width: 38.25%;

										&:first-child {
											width: auto;
											flex-grow: 1;
											background: #EBEBEB;
											border-radius: 5px 0 0 0;
											border-left: none;

											h5 {
												font-weight: 600;
											}

										}

									}

									@media screen and (max-width: 480px) {
										width: 33%;
									}

								}
							}



						}
					}

					tbody {
						@media screen and (max-width: 1200px) {

							th {
								background: #FFF8F8;
								text-align: center;
								border-right: none;
								border-left: none;

								h6 {
									font-size: 1.4rem;

									@media screen and (max-width: 480px) {
										font-size: 1.1rem;
									}

									strong {
										font-size: 2rem;

										@media screen and (max-width: 480px) {
											font-size: 1.3rem;
										}
									}
								}
							}
						}

						td {
							p {
								font-size: 1.8rem;
								font-weight: 600;
								color: #FF525F;

								@media screen and (max-width: 480px) {
									font-size: 1.3rem;
								}

								&.plus {
									color: var(--black);
								}
							}

							&:last-child {
								p {
									color: var(--black);
									font-weight: 500;
									font-size: 1.5rem;

									@media screen and (max-width: 480px) {
										font-size: 1.3rem;
									}

									d {
										font-size: 1.6rem;
										color: #FF525F;
										font-weight: 600;
										display: inline-block;
										margin-left: 3px;

										@media screen and (max-width: 480px) {
											font-size: 1.3rem;
											margin-left: 1px;
										}
									}

									&.plus {
										d {
											color: var(--black);
										}
									}

								}
							}
						}
					}
				}

			}



		}
	}



	.arrows {
		text-align: center;
		margin-top: -45px;
		margin-bottom: 65px;

		@media screen and (max-width: 820px) {
			margin-bottom: 45px;
		}

		@media screen and (max-width:480px) {
			margin-top: -60px;
			margin-bottom: 35px;
		}

		img {
			max-width: 400px;
			aspect-ratio: 396/56;

			@media screen and (max-width:480px) {
				max-width: 300px;
				width: 80%;
			}
		}
	}

	.link {
		position: relative;

		.container {
			position: relative;
			z-index: 3;

		}

		&:after {
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			background: #EFFBFF;
			top: 50%;
			left: 0;
			margin: auto;
			z-index: 1;
		}

		a {
			filter: drop-shadow(0 1px 70px rgba(196, 236, 257, 0.7));
			transform: translateZ(0);
			transition: all .2s;

			img {
				transition: all .2s;

			}

			&:hover {
				filter: none;
				transform: scale(0.8);

				img {
					opacity: .8;
				}
			}
		}

	}

}


.point {
	padding: 0 0 85px;
	background: #EFFBFF;

	@media screen and (max-width: 820px) {
		padding-bottom: 55px;
	}

	@media screen and (max-width:480px) {
		padding-top: 45px;
	}

	h3 {
		font-size: 2.4rem;

		@media screen and (max-width:480px) {
			font-size: 2.2rem;
			padding: 0;
			line-height: 3.2rem;
		}
	}

	.point_box {
		margin-top: 45px;
		background: white;
		padding: 37px 105px 46px;
		border-radius: 8px;

		@media screen and (max-width: 820px) {
			padding: 40px 35px;
		}

		@media screen and (max-width:480px) {
			margin-top: 30px;
			padding: 35px 25px;
		}

		ul {
			width: 100%;

			li {
				padding: 28px 0;
				width: 100%;
				border-bottom: 1px solid #EAEAEA;
				display: flex;
				text-align: left;
				align-items: flex-start;

				@media screen and (max-width: 820px) {
					padding: 20px 0;
				}

				@media screen and (max-width:480px) {
					padding: 30px 0;
				}

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
					border: none;
				}

				>span {
					background: #025AAD;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					font-weight: 600;
					font-family: var(--montserrat);
					width: 28px;
					aspect-ratio: 1/1;
					border-radius: 50%;
					margin-right: 8px;

					@media screen and (max-width: 820px) {
						width: 30px;
						height: 30px;
						font-size: 1.6rem;
					}

					@media screen and (max-width:480px) {
						width: 24px;
						height: 24px;
						font-size: 1.4rem;
					}
				}

				p {
					flex-grow: 1;
					line-height: 2.7rem;
					font-size: 1.6rem;
					font-weight: 500;
					letter-spacing: 0.06em;

					@media screen and (max-width: 820px) {
						font-size: 1.4rem;
						line-height: 2.4rem;
					}

					@media screen and (max-width: 480px) {
						font-size: 1.3rem;
						line-height: 2.2rem;
					}


					strong {
						color: #025AAD;
					}
				}

			}
		}
	}
}

.rough {
	padding: 70px 0 85px;
	background: #E6F9FF;

	@media screen and (max-width: 820px) {
		padding: 45px 0 55px;
	}

	@media screen and (max-width: 480px) {
		h3 {
			padding: 0;
			margin: 0;
			font-size: 2.2rem;
		}
	}

	.rough_box {
		margin-top: 45px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		filter: drop-shadow(0 13px 36px rgba(2, 172, 253, 0.3));
		transform: translateZ(0);

		@media screen and (max-width: 820px) {
			flex-direction: column;
		}

		.rough_content {
			width: 48%;
			background: white;
			border-radius: 15px;
			overflow: hidden;

			@media screen and (max-width: 820px) {
				width: 100%;
				border-radius: 8px;
				margin-bottom: 10px;
			}

			ul.list {
				background: #81EDF2;
				padding: 30px 32px;
				display: flex;
				justify-content: space-between;

				@media screen and (max-width: 480px) {
					padding: 12px 15px;
				}

				li {
					width: 31.6%;
					aspect-ratio: 1/1;
					border-radius: 50%;
					background: #DAFCFD;
					overflow: hidden;

					h4 {
						width: 100%;
						aspect-ratio: 160/53;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #00C9D1;

						span {
							display: inline-block;
							padding-top: 6px;
							color: white;
							font-size: 1.7rem;
							font-weight: 600;
							letter-spacing: 0.06em;

							@media screen and (max-width: 480px) {
								font-size: 1.2rem;
							}
						}
					}

					p {
						width: 100%;
						aspect-ratio: 160/108;
						font-weight: 600;
						margin-top: 21px;
						text-align: center;
						font-size: 3.2rem;
						letter-spacing: 0.06em;
						line-height: 4.3rem;

						@media screen and (max-width: 820px) {
							margin-top: 30px;
						}

						@media screen and (max-width: 480px) {
							margin-top: 5px;
							font-size: 2rem;
						}

						span {
							color: var(--paper);

							d {
								margin-left: 10px;
								letter-spacing: -0.06em;
								display: inline-block;
								font-size: 5.5rem;
								font-family: var(--montserrat);

								@media screen and (max-width: 480px) {
									font-size: 3rem;
								}
							}
						}
					}

				}
			}

			.text {
				display: block;
				text-align: center;
				padding: 25px 20px 35px;

				small {
					color: var(--paper);
					font-weight: 600;
					display: inline-block;
					font-size: 1.5rem;
				}

				p {
					font-size: 2.2rem;
					line-height: 3.2rem;
					font-weight: 500;
					margin-top: 6px;
					letter-spacing: 0.06em;

					@media screen and (max-width: 480px) {
						font-size: 1.8rem;
						line-height: 3rem;
					}

					span {
						font-size: 2.3rem;
						color: var(--paper);
						font-weight: 600;
					}
				}
			}

			&.digital {
				ul.list {
					background: #99DDFD;

					li {
						background: #DBF6FF;

						h4 {
							background: var(--mobile);

						}

						p {
							span {
								color: var(--mobile);
							}
						}

					}
				}

				.text {
					small {
						color: var(--mobile);
					}

					p {

						span {
							color: var(--mobile);
						}
					}
				}

			}
		}

	}

	.rough_text {
		margin-top: 70px;
		width: 100%;
		text-align: center;

		@media screen and (max-width: 820px) {
			margin-top: 45px;
		}

		@media screen and (max-width: 480px) {
			margin-top: 30px;
		}

		h4 {
			color: #02ACFD;
			font-size: 2.8rem;
			line-height: 4.6rem;
			font-weight: 600;
			letter-spacing: 0.06em;

			@media screen and (max-width: 820px) {
				font-size: 2rem;
				line-height: 3.8rem;
			}

			@media screen and (max-width: 480px) {
				font-size: 2rem;
				line-height: 3.2rem;
				text-align: left;
			}
		}

		p {
			margin-top: 45px;
			font-size: 1.6rem;
			line-height: 2.8rem;
			font-weight: 500;

			@media screen and (max-width: 820px) {
				font-size: 1.4rem;
				line-height: 2.4rem;
			}

			@media screen and (max-width: 480px) {
				margin-top: 30px;
				font-size: 1.5rem;
				line-height: 2.8rem;
				text-align: left;
			}
		}
	}

}