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

/*------------------------------------------------------------
 企画例
------------------------------------------------------------*/
main {
	/* *{outline:1px solid #0000FF} */

	&.outline_page {
		overflow: hidden;

		section {
			h3 {
				text-align: center;
				font-size: 2.4rem;
				letter-spacing: 0.06em;

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

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

					padding: 0;
					margin: 0;
					font-size: 2rem;
				}
			}

			.container {
				>p {
					margin-top: 30px;
					font-size: 1.6rem;
					line-height: 2.6rem;
					left: 0.06em;
					text-align: center;
					font-weight: 500;

					small {
						font-size: 1.2rem;
						color: #797979;
						display: inline-block;
						margin-top: 20px;
					}

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

			&.outline {
				padding-top: 0;
				padding-bottom: 0;

				.merit_box {
					padding: 55px 0 45px;
					position: relative;
					text-align: center;
					background: #FAFDFF;

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

					/* &::before {
						position: absolute;
						content: "";
						width: calc(50% + 370px);
						height: 100%;
						background: #F2FAFF;
						top: 0;
						bottom: 0;
						right: 0;
						margin: auto;
					} */

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

					.merit_list {
						margin-top: 45px;

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

						ul {
							justify-content: space-between;

							li {
								width: 31%;
								display: flex;
								flex-direction: column;
								filter: drop-shadow(0 13px 16px rgba(213, 238, 255, .3));
								transform: translateZ(0);
								margin-bottom: 27px;

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

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

								.image {
									width: 100%;
									position: relative;
									z-index: 1;

									&::after {
										position: absolute;
										content: "";
										width: 100%;
										height: 73%;
										border-radius: 15px 15px 0 0;
										bottom: 0;
										left: 0;
										margin: auto;
										background: #E8F4FF;
										z-index: 1;
									}

									span {
										z-index: 2;

										font-family: var(--montserrat);
										position: absolute;
										top: 0;
										left: 9%;
										font-size: 6.5rem;
										font-weight: 700;
										letter-spacing: 0.05em;
										line-height: 9rem;
										color: #B9DAF2;
									}

									img {
										z-index: 2;
										vertical-align: bottom;

										position: relative;
										left: 47%;
										width: 100%;
										max-width: 34%;
										filter: drop-shadow(10px 3px 16px rgba(158, 188, 216, 0.5));
										transform: translateZ(0);

									}
								}

								.text {
									flex-grow: 1;
									border-radius: 0 0 15px 15px;
									position: relative;
									z-index: 2;
									background: white;
									padding: 24px 38px 35px;

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

									h4 {
										color: var(--blue);
										font-weight: 600;
										font-size: 1.8rem;
										letter-spacing: 0.06em;
									}

									p {
										margin-top: 18px;
										font-size: 1.5rem;
										font-weight: 500;
										line-height: 2.6rem;
										letter-spacing: 0.03em;

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

								}
							}
						}
					}
				}

				.screen_box {
					padding: 60px 0;
					overflow: hidden;
					background: #E5F5FF;

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


					.screen_list {
						margin-top: 75px;

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

						.screen_slider {
							/* padding: 0 50px; */
							overflow: visible;

							/* @media screen and (max-width: 480px) {
								margin-top: 35px;
							} */
							.slick-list {
								padding-top: 45px;
								overflow: visible;

							}


							.slide-arrow {
								position: absolute;
								top: calc(50% - 25px);
								display: inline-block;
								background: var(--blue);
								border: 1px solid var(--blue);
								width: 50px;
								height: 50px;
								border-radius: 100px;
								cursor: pointer;
								z-index: 2;

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

								}

								.arrow {
									display: inline-block;
									width: 100%;
									height: 100%;
									position: relative;

									&::before,
									&::after {
										display: grid;
										place-content: center;
										position: absolute;
										width: 100%;
										height: 100%;
										font-family: FontAwesome;
										content: "\f105";
										font-size: 2rem;
										font-weight: 600;
										color: white;
									}

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

										&::before,
										&::after {
											font-size: 1.6rem;
										}
									}

									&::before {
										content: "\f104";
									}

								}

								&:hover {
									opacity: .7;

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

								@media screen and (max-width: 480px) {
									&:hover {
										opacity: 1;
									}

									&:active {
										opacity: 1;
									}
								}
							}

							.prev-arrow {
								left: 0;

								@media screen and (max-width: 1200px) {
									right: auto;
									left: 1%;
								}

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

								.arrow {
									&::after {
										display: none;
									}
								}
							}

							.next-arrow {
								right: 0;

								@media screen and (max-width: 1200px) {
									left: auto;
									right: 1%;
								}

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

								.arrow {
									&::before {
										display: none;
									}
								}

							}

							.slick-current {

								img {
									transform: scale(1.1);
									transform-origin: center bottom;

									@media screen and (max-width:480px) {
										transform: scale(1);
									}
								}

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

								}
							}

							li {
								margin: 0 5px;
								transition: all .1s;

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

								figure {
									margin: 0;
									text-align: center;

									img {
										max-width: 160px;
										margin: 0 auto;
										width: 100%;
										filter: drop-shadow(0 15px 16px rgba(213, 238, 255, 1));
										transform: translateZ(0);
										transition: all .3s;

										@media screen and (max-width: 480px) {
											filter: drop-shadow(0 3px 10px rgba(213, 238, 255, 1));
											padding: 0 6px;
										}
									}

									figcaption {
										text-align: center;
										margin-top: 35px;

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

										h4 {
											font-size: 1.5rem;
											line-height: 2rem;
											text-align: center;

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

			}


			&.plan {
				padding: 60px 0 100px;
				background: var(--blue);

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

				h3 {
					color: white;
				}

				.plan_list {
					margin-top: 90px;

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

					ul {
						display: block;
						width: 100%;

						>li {
							background: white;
							border-radius: 17px;
							margin-bottom: 105px;

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

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

							.text {
								background: #F0F9FF;
								border-radius: 17px 17px 0 0;
								padding: 32px 120px 40px;
								position: relative;

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

								&::before,
								&::after {
									position: absolute;
									content: "";
									width: 10%;
									top: 0;
									left: 0;
									right: 0;
									margin: auto;
									transform: translateY(-42%);
									aspect-ratio: 1/1;
									z-index: 1;

								}

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

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

								&::before {
									background: #F0F9FF;
									border-radius: 50%;

								}

								&::after {
									background: url(../img/outline_renew/plan_icon1.png) no-repeat;
									background-size: 27% auto;
									background-position: center 27px;
									z-index: 2;
								}

								@media screen and (max-width:480px) {
									&::after {
										background-size: 40% auto;
										background-position: center 20px;
									}
								}

								h4 {
									position: relative;
									color: var(--blue);
									font-size: 2rem;
									text-align: center;
									letter-spacing: 0.06em;
									z-index: 3;

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

								p {
									margin-top: 23px;
									text-align: center;
									font-size: 1.5rem;
									line-height: 2.6rem;
									letter-spacing: 0.06em;

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

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


							.img {
								padding: 53px;
								text-align: center;

								.flow {
									margin-bottom: 25px;

									ol {
										list-style-type: none;
										display: flex;
										justify-content: space-between;
										padding: 0;

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

										>li {
											width: 100%;
											max-width: 23%;
											text-align: center;

											@media screen and (max-width:480px) {
												max-width: 100%;
												position: relative;
												margin-bottom: 30px;

											}

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

												figure {
													picture {
														&::after {
															display: none;
														}
													}
												}
											}

											>span {
												background: var(--blue);
												width: 40px;
												aspect-ratio: 1/1;
												border-radius: 50%;
												display: grid;
												place-content: center;
												font-size: 1.6rem;
												font-weight: 700;
												color: white;
												margin: 0 auto;
												font-family: var(--montserrat);
												letter-spacing: 0.1em;
											}

											figure {
												margin: 0;
												margin-top: 15px;
												padding: 0;

												picture {
													display: block;
													width: 100%;
													position: relative;

													&::after {
														position: absolute;
														content: "";
														width: 15px;
														height: 100%;
														background: url(../img/common_renew/arrow_blue.svg) no-repeat;
														background-position: center center;
														background-size: contain;
														left: calc(100% + 20%);

													}

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

													&.img {
														padding: 0;
														width: 75%;
														margin: 0 auto;

														img {
															width: 100%;
														}

													}
												}

												figcaption {
													margin-top: 15px;

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

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

															br {
																display: none;
															}
														}

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

											}

										}
									}


								}

								.buttons {
									display: flex;
									justify-content: center;

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

									a {

										margin: 0 5px;
										max-width: 400px;
										width: 100%;

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

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

										&.button2 {
											background: var(--blue-green);

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


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

							}



							&:nth-child(2) {
								.text {
									&::after {
										background: url(../img/outline_renew/plan_icon2.png) no-repeat;
										background-size: 30% auto;
										background-position: center 27px;
										z-index: 2;
									}

								}
							}

							&:nth-child(3) {
								.text {
									&::after {
										background: url(../img/outline_renew/plan_icon3.png) no-repeat;
										background-size: 30% auto;
										background-position: center 27px;
										z-index: 2;
									}

								}
							}

						}
					}
				}
			}

			&.function {
				padding: 0;

				.offer_type,
				.stamp_type {
					padding: 60px 0 80px;
					background: #EFF9FF;

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

					.offer_type_box,
					.stamp_type_box {
						margin-top: 40px;

						ul {
							justify-content: space-between;
							filter: drop-shadow(0 13px 16px rgba(213, 238, 255, 0.35));
							transform: translateZ(0);

							@media screen and (max-width:820px) {
								justify-content: center;
							}

							li {
								width: 19%;
								background: white;
								display: flex;
								flex-direction: column;
								border-radius: 14px;
								/* padding-bottom: 35px;
								overflow: hidden;
								position: relative;
								cursor: pointer; */

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

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

								figure {
									display: flex;
									flex-direction: column;
									padding: 29px 25px 13px;
									margin: 0;

									picture {
										display: block;
										width: 100%;
										aspect-ratio: 5/2;

										img {
											width: 100%;
											height: 100%;
											object-fit: contain;
											transition: all .1s;

										}

									}

									figcaption {
										flex-grow: 1;
										display: flex;
										align-items: center;
										justify-content: center;
										width: 100%;
										aspect-ratio: 4/1;
										margin-top: 15px;

										h4 {
											width: 100%;
											height: 100%;
											text-align: center;
											color: var(--blue);
											font-size: 1.8rem;
											line-height: 2.4rem;
											display: flex;
											align-items: center;
											justify-content: center;
											transition: all .1s;

										}
									}
								}

								.text {
									padding: 0px 20px 20px;
									/* display: none; */
									flex-grow: 1;

									p {
										font-size: 1.4rem;
										line-height: 2.3rem;
									}

									.button {
										margin-top: 15px;
										width: 100%;
										padding: 10px 20px;

										span {
											display: block;
											width: 100%;
											font-size: 1.3rem;

											&::after {
												left: auto;
												right: 0;
												width: 6px;
											}
										}
									}
								}
							}
						}
					}
				}

				.offer_type {
					background: white;

				}


				.various_functions {
					padding: 65px 0 40px;
					background: #E8F7FF;

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

					.various_functions_box {
						margin-top: 60px;

						ul {
							justify-content: space-between;
							align-items: flex-start;
							filter: drop-shadow(0 13px 16px rgba(185, 232, 255, 1));
							transform: translateZ(0);

							li {
								width: 18%;
								background: white;
								display: flex;
								flex-direction: column;
								border-radius: 15px;
								padding-bottom: 35px;
								overflow: hidden;
								position: relative;
								cursor: pointer;
								margin-bottom: 40px;

								@media screen and (max-width:820px) {
									width: 32%;
									border-radius: 10px;
								}

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

								&:hover {
									img {
										opacity: .7;
									}

									h4 {
										color: var(--blue);
									}
								}

								&::before,
								&::after {
									position: absolute;
									content: "";
									width: 100%;
									height: 35px;
									bottom: 0;
									left: 0;
									transition: all .1s;
									margin: auto;

								}

								&::before {
									background: url(../img/common_renew/toggle.svg) no-repeat;
									background-size: 20px auto;
									background-position: center center;
									z-index: 2;

								}

								&::after {
									background: var(--blue);
									z-index: 1;
								}

								&.open {
									&::before {
										transform: rotate(180deg);
									}
								}

								figure {
									display: flex;
									flex-direction: column;
									padding: 15px 25px 12px;
									margin: 0;

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

									picture {
										display: block;
										width: 100%;
										max-width: 142px;
										margin: 0 auto;
										aspect-ratio: 142/80;

										img {
											object-position: center center;
											width: 100%;
											height: 100%;
											object-fit: contain;
											transition: all .1s;

										}

									}

									figcaption {
										flex-grow: 1;
										display: flex;
										align-items: center;
										justify-content: center;
										width: 100%;
										aspect-ratio: 12/4;

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

										h4 {
											width: 100%;
											height: 100%;
											text-align: center;
											color: var(--blue);
											font-size: 1.6rem;
											line-height: 2.2rem;
											display: flex;
											align-items: center;
											justify-content: center;
											transition: all .1s;

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

											small {
												display: inline-block;
												font-size: 1.2rem;
												line-height: 1.5rem;

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

										}
									}
								}

								.text {
									padding: 0 15px 18px;
									display: none;
									flex-grow: 1;

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

									p {
										font-size: 1.4rem;
										line-height: 2.3rem;

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

									.button {
										margin-top: 15px;
										width: 100%;
										padding: 10px 20px;

										span {
											display: block;
											width: 100%;
											font-size: 1.3rem;

											&::after {
												left: auto;
												right: 0;
												width: 6px;
											}
										}
									}
								}
							}
						}
					}
				}



				.language {
					background: white;

					padding: 60px 0 80px;

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

					.language_box {
						margin-top: 40px;

						ul {
							display: flex;
							justify-content: space-between;
							filter: drop-shadow(0 13px 16px rgba(213, 238, 255, 0.4));
							transform: translateZ(0);


							li {
								width: 32%;
								background: white;
								border-radius: 15px;
								overflow: hidden;

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

								figure {
									display: block;
									width: 100%;
									height: 100%;
									margin: 0;

									picture {
										background: #EBF9FF;
										;
										width: 100%;
										aspect-ratio: 363/126;
										display: block;
										text-align: center;

										img {
											width: 100%;
											height: 100%;
											object-fit: contain;
											margin: 0 auto;
											object-position: center bottom;
										}
									}

									figcaption {
										padding: 15px 42px 35px;

										h4 {
											text-align: center;
											color: var(--blue);
											font-size: 1.8rem;
											line-height: 2.3rem;
										}

										p {
											margin-top: 12px;
											font-size: 1.4rem;
											line-height: 2.4rem;
											font-weight: 500;
										}
									}
								}
							}
						}

					}
				}

			}





			&.data {
				padding-bottom: 0;
				background: #F4FBFF;

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

				.data_box {
					padding-bottom: 85px;

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

					.data_img {
						margin-top: 55px;

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

						picture {
							display: block;
							width: 100%;
							margin: 0 auto;

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

						img {
							width: 100%;
						}
					}

					.acquired_data {
						margin-top: 60px;

						h3 {
							color: var(--blue);
							font-size: 2.2rem;

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

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

						ul {
							margin-top: 40px;
							display: flex;
							justify-content: space-between;
							background: #E2F4FF;
							padding: 40px 50px;
							border-radius: 30px;

							@media screen and (max-width:820px) {
								justify-content: flex-start;
							}

							@media screen and (max-width:480px) {
								justify-content: space-between;
								margin-top: 20px;
								border-radius: 21px;
								padding: 30px 20px 10px;
							}

							li {
								/* padding: 20px 10px 35px; */
								text-align: center;
								border-radius: 50%;
								width: 18%;
								display: flex;
								flex-direction: column;
								align-items: center;
								text-align: center;

								@media screen and (max-width:820px) {
									width: 31%;
									margin-bottom: 20px;
									margin-right: 3.5%;

									&:nth-child(3n) {
										margin-right: 0;
									}
								}

								@media screen and (max-width:480px) {
									width: 47.5%;
									margin: 0 !important;
									margin-bottom: 20px !important;
									padding: 0;
									display: flex;
									flex-direction: column;
								}

								h4 {
									font-size: 1.6rem;
									font-weight: 600;
									line-height: 2.6rem;
									flex-grow: 1;
									display: flex;
									align-items: center;

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

								.img {
									width: 100%;
									max-width: 160px;
									aspect-ratio: 1/1;
									background: white;
									border-radius: 50%;
									margin-bottom: 10px;

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

							}
						}

					}
				}

				.about_data {
					padding: 60px 0;
					background: #EFF9FF;

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

					.about_data_box {
						margin-top: 40px;

						ul {
							justify-content: space-between;

							>li {
								width: 31.5%;
								display: flex;
								flex-direction: column;

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

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

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

								h4 {
									background: var(--blue);
									color: white;
									padding: 15px;
									border-radius: 7px;
									text-align: center;
									position: relative;

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

									span {
										font-size: 1.8rem;
									}

									&::after {
										position: absolute;
										content: "";
										background: var(--blue);
										width: 4.6%;
										aspect-ratio: 14 / 12;
										clip-path: polygon(50% 100%, 0 0, 100% 0);
										top: calc(100% - 1px);
										left: 0;
										right: 0;
										margin: auto;
										max-width: 12px;
									}

								}

								.about_data_content {
									border-radius: 15px;
									margin-top: 30px;
									background: white;
									padding: 40px 35px;
									flex-grow: 1;

									filter: drop-shadow(0 13px 16px rgba(185, 232, 255, 0.4));
									transform: translateZ(0);

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

									.img {
										width: 100%;
										aspect-ratio: 2/1;

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

									.text {
										margin-top: 20px;

										h5 {
											font-size: 2rem;
											line-height: 3.1rem;
											letter-spacing: 0.06em;
											margin-bottom: 20px;

											text-align: center;

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

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

										p {
											font-size: 1.6rem;
											line-height: 2.6rem;
											margin-bottom: 10px;
											font-weight: 500;

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

										ol {
											list-style-type: none;
											padding: 0;


											>li {
												font-size: 1.4rem;
												line-height: 2.4rem;
												font-weight: 500;
											}
										}
									}
								}

							}

						}

						.caution {
							margin-top: 20px;
						}
					}
				}

				.cross_data {
					padding: 65px 0;
					background: #F4FBFF;
				}

				.data_utilization {
					padding: 180px 0 70px;
					background: #E5F5FF;
					position: relative;

					.container {
						text-align: center;

					}

					&::before {
						position: absolute;
						content: "";
						height: 115px;
						width: 100%;
						top: -1px;
						left: 0;
						right: 0;
						background: #EFF9FF;
						clip-path: polygon(50% 100%, 0 0, 100% 0);
					}

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

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

					h3 {
						display: inline-block;
						margin: 0 auto;
						position: relative;

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

						&::before,
						&::after {
							position: absolute;
							content: "";
							height: 100%;
							width: 4px;
							background: var(--black);
							border-radius: 2px;
							margin: auto;
							transform-origin: center center;
							top: 2px;
						}


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

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

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

							&::before,
							&::after {
								height: 30px;
								top: auto;
								bottom: 0;
								width: 3px;
							}

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

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

						}

					}


					.data_utilization_box {
						margin-top: 45px;

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

						ul {
							display: flex;
							justify-content: space-between;

							li {
								width: 23%;
								border-radius: 15px;
								background: white;
								display: flex;
								flex-direction: column;
								align-items: center;
								overflow: hidden;

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

								}

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

								.img {
									background: var(--blue);
									width: 100%;
									aspect-ratio: 261/134;

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

								h4 {
									position: relative;
									z-index: 2;
									text-align: center;
									color: var(--blue);
									font-size: 1.8rem;
									line-height: 2.6rem;
									letter-spacing: 0.06em;
									padding: 24px 24px 30px;
									width: 100%;

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

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



			&.send {
				padding: 75px 0 80px;
				background: #F4FBFF;

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

				.send_content {
					/* margin-top: 60px; */
					background: #E2F4FF;
					border-radius: 30px;
					padding: 40px 50px 60px;

					@media screen and (max-width:480px) {
						padding: 35px 15px 30px;
						border-radius: 21px;
						margin-top: 20px;

					}

					>p {
						margin-top: 30px;
						font-size: 1.5rem;
						line-height: 2.6rem;
						letter-spacing: 0.06em;
						text-align: center;
						font-weight: 500;

						small {
							font-size: 1.2rem;
							color: #797979;
							display: inline-block;
							margin-top: 25px;
						}

						@media screen and (max-width:480px) {
							margin-top: 20px;
							font-size: 1.4rem;
							text-align: left;

							br {
								display: none !important;
							}
						}
					}

					.send_box {
						margin-top: 30px;
						background: white;
						padding: 28px 45px 10px;
						border-radius: 21px;

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

						@media screen and (max-width:480px) {
							padding: 30px 15px 25px;
							margin-top: 20px;
							border-radius: 14px;
						}

						.plize_agency {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							li {
								width: calc(100% / 3 - 48px);
								position: relative;
								margin-bottom: 40px;

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

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

								&::after {
									position: absolute;
									content: "";
									height: 100%;
									width: 1px;
									background: #D5D5D5;
									top: 0;
									right: -33px;
									margin: auto;
								}

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

								@media screen and (max-width:480px) {
									&::after {
										height: 1px;
										width: 100%;
										right: 0;
										top: auto;
										bottom: 0;
									}
								}

								&:nth-child(4),
								&:nth-child(3n),
								&:last-child {
									&::after {
										display: none;
									}
								}

								@media screen and (max-width:480px) {
									&:nth-child(3n) {
										&::after {
											display: block;
										}
									}

									&:nth-child(4) {
										padding-bottom: 0;
										margin-bottom: 0;
									}
								}

								&:last-child {
									flex-grow: 1;
									padding-left: 30px;
									display: flex;

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

									.not_handle {
										flex-grow: 1;
										margin-left: 15px;
										border-radius: 11px;
										overflow: hidden;
										background: #E5F5FF;
										border: #E5F5FF 2px solid;
										display: flex;
										flex-direction: row;
										justify-content: space-between;
										align-items: center;

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

										@media screen and (max-width:480px) {
											margin-top: 30px;
											border-radius: 10px;
											flex-direction: column-reverse;
										}

										picture {
											width: calc(24% - 50px);
											background: white;
											height: 100%;
											aspect-ratio: 9/10;
											padding: 25px;

											@media screen and (max-width:480px) {
												width: 100%;
												height: auto;
												aspect-ratio: auto;
												display: block;
												padding: 0;
												text-align: center;
											}

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

												@media screen and (max-width:480px) {
													width: 90%;
													height: auto;
													object-fit: contain;
													margin: 0 auto;
													margin-top: 10px;
												}
											}
										}

										.text {
											flex-grow: 1;
											padding: 18px 25px;

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

												padding: 20px;
												padding-left: 0;
											}

											@media screen and (max-width:480px) {
												padding: 25px 20px;
												flex-grow: initial;
											}

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

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

												img {
													width: 34px;
													height: auto;
													margin-right: 10px;

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

												span {
													font-size: 1.8rem;

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

											p {
												margin-top: px;
												font-size: 1.4rem;
												margin-top: 15px;
												line-height: 2.3rem;
												font-weight: 500;

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

										}
									}

								}

								h4 {
									text-align: center;
									color: var(--blue);

									img {
										width: 34px;
										height: auto;
										margin-right: 10px;

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

									span {
										font-size: 1.8rem;

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

									}
								}

								p {
									margin-top: 20px;
									font-size: 1.4rem;
									line-height: 2.3rem;
									font-weight: 500;

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


					}

				}

			}

			&.promotion {
				padding: 60px 0 85px;
				background: white;

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

				.promotion_box {
					margin-top: 45px;

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

					ul {
						display: flex;
						justify-content: space-between;
						filter: drop-shadow(0 2px 23px rgba(213, 238, 255, 0.5));
						transform: translateZ(0);

						li {
							width: 23.5%;
							background: white;
							border-radius: 15px;
							padding: 20px 23px 30px;
							display: flex;
							flex-direction: column;
							align-items: center;

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

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

							picture {
								display: inline-block;
								width: 100%;
								margin: 0 auto;
								text-align: center;
								max-width: 88px;
								aspect-ratio: 88/72;

								img {
									width: 100%;
									height: 100%;
									object-fit: contain;
									margin: 0 auto;
								}
							}

							h4 {
								font-size: 1.8rem;
								color: var(--blue);
								text-align: center;
								line-height: 2.6rem;
								margin-top: 25px;
							}

							p {
								margin-top: 25px;
								font-size: 1.4rem;
								line-height: 2.3rem;

							}
						}
					}

				}
			}

			&.security {
				padding: 65px 0 75px;
				/* background: #FAFDFF; */
				background: #EFF7FF;

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

					.container {
						margin: 0;
						padding: 0;
						width: 100%;
					}
				}

				.security_box {
					/* margin-top: 65px; */
					/* border-radius: 15px; */
					/* padding: 45px 55px 50px; */

					/* @media screen and (max-width:820px) {
						padding: 35px 15px 25px;
					} */

					@media screen and (max-width:480px) {
						padding: 35px 25px 45px;
						border-radius: 0;

					}

					>p {

						margin-top: 30px;
						font-size: 1.6rem;
						line-height: 2.6rem;
						left: 0.06em;
						text-align: center;
						font-weight: 500;

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

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

					ul {
						&.security_list {
							margin-top: 35px;
							display: flex;
							justify-content: space-between;

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

							li {
								background: white;
								width: 18%;
								border-radius: 12px;
								padding: 25px 18px;

								@media screen and (max-width:820px) {
									width: 19%;
									padding: 20px 10px;

								}

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

									&:last-child {
										margin-bottom: 5px;
									}
								}

								figure {
									margin: 0;
									display: block;
									width: 100%;
									height: 100%;
									display: flex;
									flex-direction: column;
									align-items: center;

									picture {
										display: inline-block;
										text-align: center;
										width: 100%;
										max-width: 110px;
										text-align: center;
										aspect-ratio: 1/1;

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

									figcaption {
										margin-top: 15px;
										font-weight: 600;
										color: var(--blue);
										font-size: 1.5rem;
										line-height: 2.4rem;
										text-align: center;

										@media screen and (max-width:820px) {
											font-size: 1.2rem;
											line-height: 2rem;
											letter-spacing: -0.01em;
										}

										@media screen and (max-width:480px) {
											font-size: 1.5rem;
											line-height: 2.4rem;
											letter-spacing: 0.03em;
										}
									}
								}
							}
						}
					}

					.mark_box {
						margin-top: 25px;
						background: white;
						border-radius: 12px;
						padding: 45px 55px;
						display: flex;
						align-items: center;

						@media screen and (max-width:820px) {
							margin-top: 15px;
							padding: 25px 30px;
							flex-direction: column;
						}

						.text {
							width: 60%;

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

							h4 {
								font-size: 2.4rem;
								color: var(--blue);
								font-weight: 600;
								line-height: 3.6rem;

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

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

							p {
								margin-top: 20px;
								font-size: 1.5rem;
								line-height: 2.6rem;
								font-weight: 500;

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

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

						.img {
							width: 33%;
							margin-left: 7%;

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

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

							picture {
								display: inline-block;
								width: 100%;

								img {

									width: 100%;

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

	}
}