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


:root {
	--web: #11C6CE;
	--native: #02ACFD;
	--line: #184183;
}


/*root*/
/*------------------------------------------------------------*/
/* 子供向けデジタルスタンプラリーはどんなものがいい？                                        */
/*------------------------------------------------------------*/

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

	.sub_page_top {
		.container {
			padding-bottom: 95px;

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

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

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

			br.pc {
				display: none;
			}
		}

		&::before {
			position: absolute;
			z-index: 5;
			content: "APP 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 {
	&.app_comparison_about {
		background: white;
		padding: 63px 0;
		position: relative;
		z-index: 3;

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

		&::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;
			}
		}

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

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

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

			}

			span {
				padding: 5px 20px 7px;
				background: #000;
				color: white;
				font-weight: 600;
				font-size: 2.3rem;
				display: inline-block;
				margin-right: 9px;
				border-radius: 6px;

				@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: 2rem;
					padding: 0px 8px 1px;
					border-radius: 2px;
					margin-right: 4px;
					margin-bottom: 3px;

				}

				&.web {
					background: var(--web);
				}

				&.native {
					background: var(--native);
				}

				&.line {
					background: var(--line);
				}
			}

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


	&.app_comparison_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 45px;
		}

		ul {
			display: flex;
			justify-content: space-between;
			filter: drop-shadow(0 0 38px rgba(2, 172, 253, 0.15));
			transform: translateZ(0);

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

			li {
				width: 32%;
				border-radius: 15px;
				background: white;
				text-align: center;
				padding: 32px 40px;

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

					padding: 27px 30px 20px;
				}

				@media screen and (max-width:480px) {
					padding: 25px 30px 25px;
					width: 100%;
					margin-bottom: 10px;
					border-radius: 8px;

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

				figure {
					img {
						max-width: 76px;
					}

					figcaption {
						margin-top: 20px;

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

						h3 {
							font-size: 2.2rem;
							line-height: 3.6rem;
							letter-spacing: 0.034em;

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

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

				&.web {
					h3 {
						color: var(--web);
					}
				}

				&.native {
					h3 {
						color: var(--native);
					}
				}

				&.line {
					h3 {
						color: var(--line);
					}
				}

				p {
					margin-top: 25px;
					text-align: left;
					font-size: 1.6rem;
					font-weight: 500;
					line-height: 2.8rem;
					letter-spacing: 0.06em;

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

					@media screen and (max-width:480px) {
						margin-top: 10px;
						line-height: 2.4rem;
					}
				}

			}
		}

	}

	&.app_comparison_tables {
		padding: 90px 0;
		background: #EFFBFF;

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

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

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

			>div {
				@media screen and (max-width: 820px) {
					width: 100% !important;
					margin-bottom: 5px;

				}

			}

			.web_table {
				width: 48.5%;

				thead tr th.null {
					width: auto;
					opacity: 0;
				}

				tbody {
					tr {
						&:first-child {
							th {
								border-radius: 15px 0 0 0;

							}
						}

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

							td {
								@media screen and (max-width: 820px) {
									border-radius: 0 0 15px 0;

								}
							}

						}

					}

				}
			}

			.native_table,
			.line_table {
				width: 25%;

				thead tr th.null,
				tbody tr th {
					display: none;

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

				}


				tbody {
					tr {
						&:last-child {

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

									border-radius: 0 0 0 15px;
								}
							}


							td {
								border-radius: 0 0 15px 15px;

								@media screen and (max-width: 820px) {
									border-radius: 0 0 15px 0;

								}
							}

						}

					}
				}
			}

			table {
				width: 100%;
				border-collapse: collapse;

				&.main_table {
					thead {
						tr {
							th {
								width: 300px;
								max-width: 300px;
								padding: 12px 5px;
								border-radius: 5px 5px 0 0;

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

								@media screen and (max-width:480px) {
									width: 50% !important;
									padding: 10px 4px;

									&.null {
										width: auto !important;

									}
								}

								h3 {
									width: 100%;
									display: block;
									color: white;
									text-align: center;
									letter-spacing: 0.04em;

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

								&.web {
									background: var(--web);
								}

								&.native {
									background: var(--native);
								}

								&.line {
									background: var(--line);
								}
							}
						}
					}

					tbody {
						tr {

							th,
							td {
								border-bottom: 1px solid #E4E9EB;
							}

							&:last-child {

								th,
								td {
									border-bottom: none;

								}

							}

							th {
								background: #FFF8F8;

								h4 {
									display: flex;
									padding: 20px 0 20px 40px;
									align-items: flex-start;

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

									strong {
										font-size: 1.6rem;
										font-weight: 600;

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

									span {
										width: 26px;
										aspect-ratio: 1/1;
										border-radius: 100px;
										font-size: 1.7rem;
										display: flex;
										align-items: center;
										justify-content: center;
										color: white;
										background: var(--new-blue);
										margin-right: 16px;
										font-weight: 500;
										font-family: var(--montserrat);

										@media screen and (max-width:480px) {
											width: 18px;
											height: 18px;
											font-size: 1.2rem;
											margin-right: 5px;
										}
									}
								}
							}

							td {
								background: white;
								text-align: center;
								height: 70px;

								span {
									display: inline-block;
									width: 40px;
									aspect-ratio: 1/1;

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

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

						}
					}
				}
			}

		}



		.part_table_box {
			margin-top: 90px;

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

			ol {
				padding: 0;
				list-style-type: none;
				filter: drop-shadow(0 13px 36px rgba(2, 172, 253, 0.15));
				transform: translateZ(0);

				li {
					margin-bottom: 45px;

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

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

					table {
						border-collapse: collapse;
						width: 100%;

						thead {
							th {
								background: #FFF8F8;
								padding: 18px 10px;

								border-radius: 15px 15px 0 0;

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

								@media screen and (max-width:480px) {
									width: auto;
									border-radius: 5px 5px 0 0;
									padding: 20px;

								}

								&.null {
									width: auto !important;
									opacity: 0;

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

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

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

									span {
										width: 31px;
										aspect-ratio: 1 / 1;
										border-radius: 100px;
										font-size: 1.8rem;
										display: flex;
										align-items: center;
										justify-content: center;
										color: white;
										background: var(--new-blue);
										margin-right: 11px;
										font-weight: 500;
										font-family: var(--montserrat);

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

									strong {
										font-size: 2rem;
										font-weight: 600;

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

						tbody {
							tr {



								th,
								td {
									background: white;
								}

								th {
									padding: 30px 5px;
									width: 25%;

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

									&.web {
										background: var(--web);
									}

									&.native {
										background: var(--native);
									}

									&.line {
										background: var(--line);
									}

									h5 {
										color: white;
										font-size: 2rem;
										letter-spacing: 0.03em;

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

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

								td {
									border-bottom: 1px solid #E4E9EB;
									;

									padding: 5px 30px;

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

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

									p {
										text-align: left;
										font-size: 1.6rem;
										line-height: 2.6rem;
										letter-spacing: 0.03em;
										font-weight: 500;

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

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

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

									td {
										border: none;
										border-radius: 0 0 15px 0;
									}

									@media screen and (max-width: 480px) {
										th {
											border-radius: 0 0 0 5px;
										}

										td {
											border: none;
											border-radius: 0 0 5px 0;
										}

									}
								}

							}
						}
					}

				}
			}
		}


	}

	&.consider {
		padding: 57px 0 85px;
		background: #E6F9FF;

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

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

		h3 {
			font-size: 2.4rem;
			text-align: center;

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

		.consider_box {
			margin-top: 45px;
			background: white;
			padding: 49px 100px 55px;
			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;
						max-width: calc(100% - 36px);
						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;
							max-width: calc(100% - 40px);

						}

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


						strong {
							color: #025AAD;
						}
					}

				}
			}
		}
	}

}