:root {
	--color-white: #fff;
	--color-black: #000;
	--color-red: #ff1d25;
	--color-yellow: #ff0;
	--color-purple: #662d91;
	--color-primary: #fad33b;
	--color-secondary: #f2f2f2;
	--linear-gradient-start: rgba(0, 118, 255, 1);
	--linear-gradient-end: rgba(0, 255, 150, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	box-sizing: border-box;
	background-image: url("./../img/bg-block.png");
	background-repeat: repeat;
	font-family: YakuHanJPs, Inter, "Noto Sans JP", sans-serif;
	background-size: 80%;

	a {
		transition: opacity .3s ease;
	}

	a:hover {
		opacity: .8;
		text-decoration: none;
	}

	h2,
	.h2 {
		background: linear-gradient(45deg, var(--linear-gradient-start) 0%, var(--linear-gradient-end) 100%);
		margin-bottom: 20px;
		padding: 12px 0;
		text-align: center;
		color: var(--color-white);
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: .1em;

		@media screen and (min-width: 1024px) {
			margin-bottom: 0;
			padding: 30px 0;
			font-size: 25px;

			br {
				display: none;
			}
		}

		small {
			font-size: 13px;
		}

		strong {
			color: var(--color-yellow);
		}
	}

	.btn {
		display: block;
		background: linear-gradient(45deg, var(--linear-gradient-start) 0%, var(--linear-gradient-end) 100%);
		max-width: 350px;
		margin-inline: auto;
		color: var(--color-white);
		text-align: center;
		padding: 25px 0;
		border-radius: 100vmax;
		text-decoration: none;
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: .1em;
		font-weight: bold;

		@media screen and (min-width: 1024px) {
			font-size: 20px;
		}
	}

	.img-fluid {
		max-width: 100%;
		height: auto;
	}

	header#header.header {
		position: fixed;
		background-color: var(--color-white);
		width: 100%;

		div.container {
			width: 100%;
			margin-inline: auto;
			padding: 20px 0 10px;
			text-align: center;

			@media screen and (min-width: 1024px) {
				padding: 20px 60px 10px;
				text-align: left;
			}

			img {
				width: 184px;
				height: auto;
			}
		}
	}

	article {
		padding-top: 70px;

		section#hero.hero {
			div.container {
				width: 100%;
				/* max-width: 1366px; */
				margin-inline: auto;

				h1 {
					width: 100%;

					img {
						width: 100%;
					}
				}
			}
		}

		section#about.about {
			background-color: var(--color-primary);

			div.container {
				max-width: 1185px;
				margin-inline: auto;
				padding: 35px 0;

				@media screen and (min-width: 1024px) {
					padding: 100px 0 95px;
				}

				div.card {
					display: block;
					padding: 0 20px;

					@media screen and (min-width: 1024px) {
						display: flex;
						gap: 30px;
						justify-content: flex-start;
						align-items: flex-start;
						padding: 0;
					}

					div.card-header {
						max-width: 576px;
						margin: auto;

						picture {}
					}

					div.card-body {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-template-rows: repeat(2, auto);

						max-width: 527px;
						padding: 30px 10px 0 10px;
						margin: auto;

						@media screen and (min-width: 1024px) {
							padding: 0;
						}

						p {
							grid-area: 2 / 1 / 3 / 3;

							margin-top: 25px;
							font-size: 18px;
							line-height: 1.7;

							@media screen and (min-width: 1024px) {
								margin-top: 35px;
							}
						}

						p.lead {
							grid-area: 1 / 1 / 2 / 2;

							margin-top: 0;
							width: 260px;
							font-size: 20px;
							line-height: 1.5;
							font-weight: bold;

							@media screen and (min-width: 1024px) {
								width: 420px;
								font-size: 27px;
								line-height: 1.7;
							}
						}

						picture {
							grid-area: 1 / 2 / 2 / 3;

							width: 74px;

							@media screen and (min-width: 1024px) {
								width: 133px;
							}
						}
					}
				}
			}
		}

		section#results.results {
			background-image: url(./../img/bg-mesh.png);
			background-repeat: repeat;

			div.container {
				max-width: 960px;
				margin-inline: auto;
				padding: 45px 20px 50px;

				@media screen and (min-width: 1024px) {
					padding: 100px 0 110px;
				}

				div.data {
					padding: 0 10px;
					text-align: center;

					@media screen and (min-width: 1024px) {
						padding: 0;
						width: 960px;
						margin-inline: auto;
					}
				}

				div.card {
					background-color: var(--color-white);
					margin-top: 50px;
					padding: 15px;
					border: 1px solid #e6e6e6;
					border-radius: 20px;

					@media screen and (min-width: 1024px) {
						margin-top: 20px;
						padding: 20px;
					}

					div.card-header {
						background: linear-gradient(45deg, var(--linear-gradient-start) 0%, var(--linear-gradient-end) 100%);
						margin-bottom: 20px;
						padding: 10px 0;

						text-align: center;
						color: var(--color-white);
						font-size: 16px;
						line-height: 1;

						small {
							font-size: 13px;
						}

						@media screen and (min-width: 1024px) {
							padding: 20px 0;
							font-size: 20px;

							small {
								font-size: 20px;
							}

							br {
								display: none;
							}
						}
					}

					div.card-body {
						overflow: auto;
						max-height: 240px;

						@media screen and (min-width: 1024px) {
							max-height: 600px;
						}

						table {
							width: 100%;
							min-width: 390px;
							border-collapse: collapse;

							thead {
								th {
									padding: 4px 8px;
									font-size: 16px;
									text-align: left;
									border-bottom: 1px solid #e6e6e6;
									white-space: nowrap;

									@media screen and (min-width: 1024px) {
										padding: 8px 16px;
										font-size: 18px;
									}

									div {
										margin-bottom: 10px;

										padding: 4px 8px;

										@media screen and (min-width: 1024px) {
											padding: 8px 16px;
										}

									}
								}

								th+th {
									div {
										border-left: 1px solid #e6e6e6;
									}
								}
							}

							tbody {
								tr {
									td {
										padding: 4px 8px;
										font-size: 14px;
										text-align: left;
										border-bottom: 1px solid #e6e6e6;
										white-space: nowrap;

										@media screen and (min-width: 1024px) {
											padding: 16px 16px;
											font-size: 16px;
										}

										div {
											padding: 4px 8px;

											@media screen and (min-width: 1024px) {
												padding: 8px 16px;
											}
										}

										div+div {
											margin-top: 10px;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		section#research.research {
			div.container {
				max-width: 960px;
				margin-inline: auto;
				padding: 20px;

				@media screen and (min-width: 1024px) {
					padding: 80px 20px;
				}

				h2 {
					font-weight: bold;
				}

				div.card {
					background-color: var(--color-white);
					margin-bottom: 50px;
					padding: 20px;

					@media screen and (min-width: 1024px) {
						display: flex;
						gap: 38px;
						padding: 45px;
					}

					div.card-header {
						@media screen and (min-width: 1024px) {
							width: 290px;
							flex-shrink: 0;
						}

						picture {}
					}

					div.card-body {
						p {
							font-size: 16px;
							line-height: 1.5;

							@media screen and (min-width: 1024px) {
								font-size: 18px;
								line-height: 2;
							}
						}

						ul {
							margin-top: 20px;

							@media screen and (min-width: 1024px) {
								margin-top: 35px;
							}

							li {
								display: block;
								background-image: url(./../img/icon-arrow-right.svg);
								background-repeat: no-repeat;
								background-position: left center;
								background-size: 6px;
								background-position: 22px center;
								background-color: var(--color-secondary);
								padding: 15px 0 15px 40px;

								@media screen and (min-width: 1024px) {}

								a {
									color: var(--color-purple);
									font-size: 16px;
									line-height: 1;
								}
							}

							li+li {
								margin-top: 5px;
							}
						}

						ul+p {
							margin-top: 30px;

							@media screen and (min-width: 1024px) {
								margin-top: 35px;
							}
						}

						p+ul {
							margin-top: 20px;

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

		section#step.step {
			div.container {
				max-width: 960px;
				margin-inline: auto;
				padding-inline: 20px;

				h2 {
					font-weight: bold;
				}

				div.card {
					background-color: var(--color-white);
					margin-bottom: 10px;

					@media screen and (min-width: 1024px) {
						display: flex;
						margin-top: 30px;
					}

					div.card-header {
						background-color: var(--color-primary);
						padding: 40px 0;

						@media screen and (min-width: 1024px) {
							width: 330px;
							flex-shrink: 0;
						}

						div.number {
							background: linear-gradient(45deg, var(--linear-gradient-start) 0%, var(--linear-gradient-end) 100%);
							width: 175px;
							margin-inline: auto;
							margin-bottom: 20px;
							padding: 12px 0;
							border-radius: 100vmax;
							text-align: center;
							color: var(--color-white);
							font-size: 16px;
							line-height: 1;
						}

						h3 {
							text-align: center;
							font-size: 20px;
							line-height: 1.5;
							font-weight: bold;
						}
					}

					div.card-body {
						padding: 36px 20px;

						@media screen and (min-width: 1024px) {
							padding: 45px 45px;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						p {
							font-size: 16px;
							line-height: 2;

							@media screen and (min-width: 1024px) {
								font-size: 18px;
							}

							strong {
								color: var(--color-red);
							}
						}
					}
				}

				div.example {
					background-color: var(--color-white);
					margin-bottom: 10px;
					padding: 40px 20px;
					text-align: center;

					@media screen and (min-width: 1024px) {
						padding: 40px;
					}

					h4 {
						margin-bottom: 25px;
						font-size: 18px;
						line-height: 1.5;
						text-align: center;

						@media screen and (min-width: 1024px) {
							font-size: 20px;

							br {
								display: none;
							}
						}
					}

					picture {
						margin-bottom: 20px;
					}

					div.youtube {
						background-color: var(--color-secondary);
						/* width: 310px; */
						/* height: 182px; */
						margin-inline: auto;
						margin-bottom: 20px;
						width: 100%;
						/* 親要素に対して横幅いっぱいに広げる */
						aspect-ratio: 16 / 9;
						/* YouTube動画の縦横比（16:9）を維持する */

						@media screen and (min-width: 1024px) {
							width: 556px;
							height: 328px;
						}

						iframe {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
				}
			}
		}

		section#license.license,
		section#application.application {
			div.container {
				max-width: 960px;
				margin-inline: auto;
				padding: 20px;

				@media screen and (min-width: 1024px) {
					padding: 20px 0 70px;
				}

				h2 {
					font-weight: bold;
				}

				div.card {
					background-color: var(--color-white);
					padding: 30px 15px 40px;

					div.card-body {
						p {
							font-size: 16px;
							line-height: 1.5;
							text-align: center;

							@media screen and (min-width: 1024px) {
								font-size: 20px;
							}
						}

						a {
							margin-top: 25px;

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

	footer#footer.footer {
		background-color: var(--color-white);

		div.container {
			max-width: 960px;
			margin-inline: auto;
			padding-top: 55px;
			padding-bottom: 55px;

			div.card {
				div.card-header {
					text-align: center;

					img {
						width: 199px;

						@media screen and (min-width: 1024px) {
							width: 199px;
						}
					}
				}

				div.card-body {
					div.outbound {
						margin-top: 35px;

						a {
							display: flex;
							background-color: var(--color-primary);
							width: 250px;
							margin-inline: auto;
							justify-content: center;
							align-items: center;
							padding: 20px 0;
							border: 2px solid var(--color-black);
							border-radius: 100vmax;
							color: var(--color-black);
							font-size: 16px;
							line-height: 1;
							text-decoration: none;
						}
					}

					div.social {
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 35px;
						margin-top: 35px;

						a {
							display: inline-block;
							width: 58px;

							img {
								width: 100%;
								height: auto;
							}
						}
					}
				}

				div.card-footer {
					margin-top: 55px;

					p {
						text-align: center;
						font-size: 11px;
						line-height: 1;
					}
				}
			}
		}
	}

	div#notice.notice {
		background-color: var(--color-white);

		div.container {
			max-width: 1366px;
			margin-inline: auto;
			padding: 0 20px 20px;
			font-size: 11px;
			line-height: 1.5;

			@media screen and (min-width: 1024px) {
				text-align: center;
			}

		}
	}
}