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


:root {
	--paper: #3B9CC7;
	--mobile: #FF7025;

	--text: #024B64;
}


/*root*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーで経済効果・費用対効果はあるの？                                     */
/*------------------------------------------------------------*/
.commercial_ideas_page h2::before {
	position: absolute;
	z-index: 5;
	content: "STAMP RALLY GUIDE";
	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;
}

.commercial_ideas_page h2 {
	position: relative;
	z-index: 10;
	height: 100px;
	place-content: center;
}

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

section {
	&.commercial_ideas {
		padding: 75px 0;
		background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);

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

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

		.commercial_ideas_box {
			.title {
				margin-bottom: 1.5em;

				@media screen and (max-width: 480px) {
					margin-bottom: 1em;
				}

				h3 {
					text-align: center;

					span {
						display: inline-block;
						position: relative;
						color: white;
						font-size: 3.2rem;
						font-weight: 600;
						letter-spacing: 0.01em;
						padding-bottom: 0.5em;

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


						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 40px;
							aspect-ratio: 68 / 71;
							bottom: 0;
							margin: auto;
						}


						&::before {
							background: url(../img/guide/guide_left.svg) no-repeat;
							background-size: contain;
							right: calc(100% + 15px);
						}

						&::after {
							background: url(../img/guide/guide_right.svg) no-repeat;
							background-size: contain;
							left: calc(100% + 15px);
						}

						strong {
							letter-spacing: 0.06em;

							margin-top: 6px;
							display: inline-block;
							background: white;
							color: var(--new-blue);
							padding: 1px 20px 5px;
							font-size: 3.5rem;

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

							@media screen and (max-width: 480px) {
								padding: 3px 11px 5px;
								font-size: 6vw;
								display: inline-block;
							}
						}

						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 68px;
							aspect-ratio: 68/71;
							bottom: -5px;
							margin: auto;
						}


						&::before {
							background: url(../img/guide/guide_left.svg) no-repeat;
							background-size: contain;
							right: calc(100% + 25px);
						}

						&::after {
							background: url(../img/guide/guide_right.svg) no-repeat;
							background-size: contain;
							left: calc(100% + 25px);
						}

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

							&::before,
							&::after {
								width: 45px;
							}

							&::before {
								right: calc(100% + 10px);
							}

							&::after {
								left: calc(100% + 10px);
							}


						}

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

							&::before,
							&::after {
								width: 35px;
								bottom: 0;
							}

							&::before {
								right: auto;
								left: -40px;
							}

							&::after {
								left: auto;
								right: -40px;
							}

						}



					}
				}
			}

			.commercial_ideas_content {
				margin-top: 30px;
				display: flex;
				justify-content: space-between;

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

				.paper {
					width: 65%;
					background: white;
					border-radius: 15px;
					overflow: hidden;

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

					h3 {
						margin-bottom: 1.5em;
						text-align: left;

						@media screen and (max-width: 480px) {
							text-align: center;
							margin-bottom: 1.2em;
						}

						span {
							font-size: 2.4rem;
							letter-spacing: .03em;
							font-weight: 600;
							background: linear-gradient(120deg, #00C686 0%, #07B3DE 60%, #0079C6 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;

							@media screen and (max-width: 480px) {
								font-size: 4.8vw;
								text-align: center;
							}
						}
					}

					.text {
						padding: 3em 4em;
						width: 100%;

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

						p {
							font-size: 1.4rem;
							line-height: 2.8rem;
							color: var(--text);

							@media screen and (max-width: 820px) {
								br.pc {
									display: none;
								}
							}

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

						}
					}
				}

				.cost_table_box {
					width: 33%;
					filter: drop-shadow(0 6px 12px rgba(2, 172, 253, 1));
					transform: translateZ(0);

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

					h4 {
						text-align: center;
						margin-bottom: 0.5em;
						font-size: 2rem;
						color: white;
					}

					.cost_table {
						width: 100%;
						border-collapse: separate;
						border-spacing: 0;
						border-radius: 10px;
						overflow: hidden;

						th,
						td {
							padding: 18px;
						}

						thead {
							th {
								background: var(--paper);
								font-weight: bold;
								text-align: center;
								color: white;
								border-left: 1px solid #f0f0f0;

								&:first-child {
									width: 45%;
									border: none;
								}
							}
						}

						tbody {
							tr {
								background: #fff;

								&:last-child {
									td {
										overflow: hidden;

										&:first-child {
											border: none;
											border-radius: 0 0 0 10px;
										}

										&:last-child {
											border-radius: 0 0 10px 0;
										}

									}
								}

								td {
									border-left: 1px solid #f0f0f0;

									.star_rating {
										width: 100%;
										display: flex;
										justify-content: center;
										align-items: center;

										span {
											color: #bbbbbb;

											i {
												margin: 0 0.1em;
												font-size: 1.8rem;
											}

											&.active {
												color: #f8b400;
												text-shadow: 0 0 4px rgba(248, 180, 0, .3);
											}
										}
									}


									&:nth-child(2) {
										font-size: 1.7rem;
										font-weight: 500;
										color: var(--text);

										span {
											font-family: var(--montserrat);
											font-size: 135%;
											font-weight: 600;
										}

										&::before {
											display: none;
										}

									}

								}

								&:nth-child(even) {
									background: #f8fcfd;
								}
							}

						}


					}
				}
			}

		}
	}

	&.ideas_list {
		padding: 75px 0;
		background: #CFF4FC;

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

		.title {
			text-align: center;

			h3 {
				font-size: 3.4rem;
				color: var(--text);

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

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

				small {
					color: var(--new-blue);
					display: inline-block;
					margin-bottom: 0.5em;
					width: 100%;
				}



				span.num {
					font-family: var(--montserrat);
					color: var(--new-blue);
					font-weight: 700;
					font-size: 140%;
					display: inline-block;
					letter-spacing: 0.03em;
					margin: 0 0.1em;

				}

			}

			p {
				margin-top: 2em;
				font-size: 1.6rem;
				line-height: 2.8rem;
				color: var(--text);

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

				@media screen and (max-width: 480px) {
					text-align: left;
					font-size: 1.2rem;
					font-weight: 500;
					line-height: 2.2rem;
				}
			}
		}


		.ideas_list_box {
			margin-top: 3.5em;

			ol {
				list-style-type: none;
				counter-reset: column_num;
				padding: 0;

				>li {
					background: white;
					border-radius: 20px;
					padding: 4em 4.5em 3.5em;
					counter-increment: column_num;
					position: relative;

					margin-bottom: 3em;

					>small {
						display: inline-block;
						margin-top: 2em;
						font-size: 1.1rem;
						color: #666;
						font-weight: 500;
						width: 100%;
						display: block;
						text-align: right;

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

					@media screen and (max-width: 820px) {
						padding: 3em 3.5em;
					}

					@media screen and (max-width: 480px) {
						padding: 3em 2.5em 2.5em;
					}

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

					&:before {
						position: absolute;
						top: -5rem;
						left: 0;
						margin: auto;
						content: counter(column_num, decimal-leading-zero) "";
						font-family: var(--montserrat);
						display: inline-block;
						font-size: 7rem;
						background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						color: transparent;
						font-weight: 700;
					}

					@media screen and (max-width: 820px) {
						&:before {
							font-size: 5em;
						}

					}

					@media screen and (max-width: 480px) {
						&:before {
							font-size: 3.5em;
							top: -3rem;
						}

					}

					.idea_card {
						display: flex;
						flex-wrap: wrap;
						text-align: left;
						justify-content: space-between;
						align-items: flex-start;

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

						.idea_header {
							width: 61%;

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

							h4 {
								color: var(--new-blue);
								font-size: 2.8rem;

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

								@media screen and (max-width: 480px) {
									font-size: 5vw;
									line-height: 7vw;
								}
							}

							.idea_status {
								margin-top: 1.5em;
								/* background: #EFFBFF;
								border-radius: 10px; */
								width: auto;
								justify-content: space-between;
								flex-wrap: wrap;

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


								.status_item {
									display: inline-flex;
									align-items: center;
									justify-content: flex-start;
									flex: auto;
									padding-right: 2em;

									@media screen and (max-width: 480px) {
										margin-bottom: 0.5em;
									}

									&:last-child {
										margin: 0 !important;
									}

									.label {
										margin-right: 10px;
										font-size: 1.6rem;
										font-weight: 600;
										color: var(--text);

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

									.star_rating {
										display: flex;
										align-items: center;

										span {
											color: #bbbbbb;

											i {
												margin: 0 0.1em;
												font-size: 2rem;

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

											&.active {
												color: #f8b400;
												text-shadow: 0 0 4px rgba(248, 180, 0, .3);
											}
										}
									}
								}


							}
						}

						.idea_img {

							width: 35%;

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

							.img {
								aspect-ratio: 1008/715;
								transition: all .1s;

								&:hover {
									opacity: 0.7;
								}

							}

							small {
								color: #6b6b6b;
							}

							.buttons {
								display: flex;
								margin-top: 1em;

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

								.button {
									border: 1px solid var(--new-blue);
									flex: auto;
									padding: 8px;

									&:first-child {
										margin-right: 4px;

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

									span {
										font-size: 1.4rem;
										padding-right: 25px;
										display: inline-block;
										text-align: center;

										&::before {
											width: 20px;
											height: 20px;
										}

										&::after {
											width: 6px;
											right: 6px;
											background-size: contain;
											background-position: center center;
										}
									}
								}
							}
						}

					}

					.idea_text {
						margin-top: 1.5em;
						padding-top: 1.5em;
						margin-bottom: 2.5em;
						border-top: 1px solid var(--paper);

						p {
							font-size: 1.4rem;
							line-height: 2.6rem;
							font-weight: 500;

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

					}

					.info_data {
						margin-top: 2em;
						display: flex;
						justify-content: space-between;
						width: 100%;

						@media screen and (max-width: 820px) {
							width: 100%;
							order: 1;
							margin-top: 0;
							margin-bottom: 2em;
						}

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

						.info_box {
							width: 49%;
							border: 3px solid var(--paper);
							border-radius: 10px;
							padding: 2em 2.5em;
							position: relative;

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

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

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

							h5 {
								position: absolute;
								top: -0.8em;
								left: 0;
								right: 0;
								margin: auto;
								font-size: 2rem;
								width: 100%;
								text-align: center;
								color: var(--paper);

								span {
									text-align: center;
									background: white;
									display: inline-block;
									width: auto;
									padding: 0 1em;
								}

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

							}

							ul {
								flex-direction: column;

								li {
									font-size: 1.6rem;
									margin-bottom: 1.2em;
									text-align: left;
									position: relative;
									padding-left: 3.5rem;
									font-weight: 600;

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

									@media screen and (max-width: 480px) {
										font-size: 1.3rem;
										margin-bottom: 0.8em;
										padding-left: 2.4rem;
									}

									::before {
										content: "\f00c";
										font-family: "Font Awesome 6 Free";
										font-weight: 900;
										position: absolute;
										left: 0;
										top: 0;
										bottom: 0;
										color: white;
										background: var(--paper);
										padding: 5px;
										font-size: 1.4rem;
										line-height: 1.4rem;
										width: 1.6rem;
										height: 1.6rem;
										display: flex;
										align-items: center;
										justify-content: center;
										border-radius: 100px;
									}

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

									@media screen and (max-width: 480px) {
										::before {
											font-size: 1rem;
											width: 1.2rem;
											height: 1.2rem;
											padding: 3px;
										}


									}

									&:last-child {
										margin: 0;
									}


								}
							}

							&:nth-child(2) {
								border-color: var(--new-blue);

								h5 {

									color: var(--new-blue);

								}

								ul {
									li {
										span {
											&::before {
												background: var(--new-blue);
											}

										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	&.ideas_tables {
		padding: 75px 0;
		background: #EFFBFF;
		position: relative;

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

		.title {
			text-align: center;

			h3 {
				font-size: 3.4rem;
				color: var(--text);

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

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

				small {
					color: var(--new-blue);
					display: inline-block;
					margin-bottom: 0.5em;
					width: 100%;
				}



				span.num {
					font-family: var(--montserrat);
					color: var(--new-blue);
					font-weight: 700;
					font-size: 140%;
					display: inline-block;
					letter-spacing: 0.03em;
					margin: 0 0.1em;

				}

			}
		}

		.ideas_tables_box {
			margin-top: 3.5em;

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

			.campaign_box {

				h4 {
					text-align: center;
					margin-bottom: 0.5em;
					font-size: 2rem;
					color: white;
				}

				.campaign_table {
					width: 100%;
					border-collapse: separate;
					border-spacing: 0;
					border-radius: 10px;
					overflow: hidden;

					th,
					td {
						padding: 20px 30px;
					}

					thead {
						th {
							background: var(--paper);
							font-weight: bold;
							text-align: center;
							color: white;
							border-left: 1px solid #f0f0f0;

							&:first-child {
								width: 45%;
								border: none;
							}
						}
					}

					tbody {
						counter-reset: plan-no;

						tr {
							background: #fff;
							counter-increment: plan-no;

							td:first-child {
								&::before {
									content: counter(plan-no, decimal-leading-zero);
									margin: auto;
									font-family: var(--montserrat);
									display: inline-block;
									font-size: 135%;
									background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									background-clip: text;
									color: transparent;
									font-weight: 700;
									margin-left: -10px;
									margin-right: 5px;

								}
							}

							&:nth-child(even) {
								background: #f8fcfd;
							}

							&:last-child {

								td {
									&:first-child {
										border-radius: 0 0 0 10px;
									}

									&:last-child {
										border-radius: 0 0 10px 0;
									}
								}
							}
						}

						td {
							border-left: 1px solid #f0f0f0;
							font-size: 1.5rem;
							color: inherit;

							&:first-child {
								font-weight: 500;
								color: var(--text);
							}

							.star_rating {
								position: relative;
								display: inline-block;
								line-height: 1;
								font-size: 2rem;
								vertical-align: middle;
							}

							.star_rating::before {
								content: "★★★★★";
								color: #bbbbbb;
							}

							.star_rating::after {
								content: "★★★★★";
								color: #f8b400;
								position: absolute;
								left: 0;
								top: 0;
								overflow: hidden;
								white-space: nowrap;
							}

							.stars-1::after {
								width: 20%;
							}

							.stars-2::after {
								width: 40%;
							}

							.stars-3::after {
								width: 60%;
							}

							.stars-4::after {
								width: 80%;
							}

							.stars-5::after {
								width: 100%;
							}

							.visually-hidden {
								position: absolute;
								width: 1px;
								height: 1px;
								padding: 0;
								margin: -1px;
								overflow: hidden;
								clip: rect(0, 0, 0, 0);
								white-space: nowrap;
								border: 0;
							}
						}
					}

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

						display: block;
						border: none;
						border-radius: 0;

						thead {
							display: none;
						}

						tbody {
							display: block;
						}

						tr {
							display: block;
							margin-bottom: 20px;
							background: #fff;
						}

						td {
							display: block;
							position: relative;
							width: 100%;
							border: none;
							border-bottom: 1px solid #eee;
							box-sizing: border-box;
							text-align: center;
							padding: 10px;
							padding-left: 45%;
							border-left: none !important;

							&::before {
								content: attr(data-label) !important;
								position: absolute;
								font-weight: bold;
								font-size: 100% !important;
								line-height: 1.5;
								background: var(--new-blue) !important;
								color: white;
								display: flex !important;
								align-items: center;
								width: 30%;
								height: 100%;
								padding: 0 15px !important;
								left: 0;
								top: 0;
								margin: 0 !important;
								-webkit-text-fill-color: white !important;

								color: white !important;
							}

							.star_rating {
								font-size: 15px;
							}
						}
					}

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

						th {
							.comparison_text {
								p {
									font-size: 1.2rem !important;
								}
							}
						}

						td {
							.comparison_text {
								p {
									font-size: 1.1rem !important;
									margin-left: 20px;
								}
							}
						}
					}
				}
			}

		}


	}



	&.campaign_summary {
		padding: 75px 0;
		background: #CFF4FC;
		border-radius: 12px;

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


		.paper {
			background: white;
			background: white;
			border-radius: 20px;
			padding: 4em 4.5em;

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

			@media screen and (max-width: 480px) {
				padding: 2em;
				border-radius: 10px;
			}

			.title {
				text-align: center;
				margin-bottom: 3em;

				h3 {
					font-size: 2.6rem;
					font-weight: 600;
					line-height: 4.2rem;

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

					@media screen and (max-width: 480px) {
						font-size: 5vw;
						line-height: 7vw;
					}

					>span {
						position: relative;
						display: inline-block;

						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 61px;
							aspect-ratio: 61 / 64;
							bottom: 0;
							margin: auto;
							transform-origin: bottom center;
						}

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

							&::before,
							&::after {
								width: 35px;
							}
						}

						&::before {
							background: url(../img/effect/effect_left3.svg) no-repeat;
							background-size: contain;
							right: calc(101%);
						}

						&::after {
							background: url(../img/effect/effect_right3.svg) no-repeat;
							background-size: contain;
							left: calc(101%);
						}

						.line {
							padding-bottom: 3px;
							background: linear-gradient(transparent 70%, #CBEEFF 0);
						}

						.blue {
							color: var(--new-blue);
						}
					}
				}

			}

			p {
				font-size: 1.6rem;
				line-height: 2.8rem;
				margin-bottom: 14px;
				text-align: center;

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

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

					br.pc {
						display: none;
					}
				}
			}
		}

		.campaign_summary_box {
			display: flex;
			justify-content: space-between;
			margin-top: 3.5em;
			margin-bottom: 2.5em;

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

			>div {
				border-radius: 15px;
				width: 49%;
				border: 3px solid var(--new-blue);
				position: relative;

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

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

				h4 {
					font-size: 2rem;
					color: var(--new-blue);
					text-align: center;
					position: absolute;
					left: 0;
					right: 0;
					top: -0.8em;
					margin: auto;

					span {
						padding: 0 0.5em;
						display: inline-block;
						background: white;
					}

					@media screen and (max-width: 480px) {
						font-size: 1.6rem;
						top: -o.95em;
					}
				}

				dl {
					margin-top: 1em;

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


					dt,
					dd {
						font-size: 1.5rem;

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

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

					dd {
						font-weight: 500;
						font-size: 1.4rem;

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

					&.effect_list {
						padding: 1.5em 2em 1em;

						dt {
							margin-bottom: 0.5em;
						}

						dd {
							margin-bottom: 1em;

						}

					}


					&.recommend_list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;
						padding: 1.5em 2em 1em;

						@media screen and (max-width: 820px) {
							display: block;
						}

						dt,
						dd {
							margin-bottom: 1.2em;

						}

						dt {
							width: auto;
							position: relative;
							z-index: 2;
							background: white;
							padding-right: 10px;

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

						dd {
							position: relative;
							width: 50%;
							z-index: 1;

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

							&::before {
								position: absolute;
								content: " ………………………………………………………… ";
								height: 100%;
								width: 50%;
								top: 0;
								bottom: 0;
								left: auto;
								right: calc(100% + 10px);
								margin: auto;
								overflow: hidden;
							}

							@media screen and (max-width: 820px) {
								&::before {
									display: none;
								}
							}
						}
					}
				}
			}

		}


		.matome {
			p {
				font-size: 2rem;
				font-weight: 700;
				color: var(--black);

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

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

				span {
					color: var(--new-blue);
					font-size: 110%;
					font-weight: 800;
				}
			}
		}





		@media (max-width: 768px) {

			.campaign_table,
			.campaign_table thead,
			.campaign_table tbody,
			.campaign_table th,
			.campaign_table td,
			.campaign_table tr {
				display: block;
				width: 100%;
			}

			.campaign_table {
				thead {
					display: none;
				}

				tr {
					margin-bottom: 15px;
					border: 1px solid #e6e6e6;
					border-radius: 8px;
					overflow: hidden;
					background: #fff;
				}

				td {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: none;
					border-bottom: 1px solid #eee;
					padding: 10px 12px;

					&::before {
						content: attr(data-label);
						font-weight: bold;
						color: #004ea2;
					}
				}
			}
		}
	}
}