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


.sub_page {
	section {
		h3 {
			@media screen and (max-width: 820px) {
				padding: 0;

			}

		}

		.sub_page_title {

			max-width: 55% !important;

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


		}

		&.terms {
			position: inherit;
			padding-top: 6em;
			background: white !important;

			&::before,
			&::after {
				display: none;
			}

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

			/* @media screen and (max-width: 600px) {
				padding-top: 30px;
			} */

			.terms_box {
				position: relative;

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

				.terms_title {
					position: relative;
					max-width: 900px;
					margin: 0 auto;

					&::before,
					&::after {
						content: "";
						position: absolute;
						width: 25px;
						height: 25px;
						background: url(../img/terms_left.svg) no-repeat;
						background-size: contain;
						left: 0;
						right: auto;
						bottom: 90%;
						margin: auto;

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

					&::after {
						background: url(../img/terms_right.svg) no-repeat;
						background-size: contain;
						right: 0;
						left: auto;
						top: calc(120%);
					}


					h3 {
						margin: 0 auto;
						width: auto;
						display: flex;
						text-align: center;
						align-items: center;
						justify-content: center;
						margin-bottom: 68px;
						font-size: 2.8rem;
						letter-spacing: 0.07em;
						font-weight: 600;

						@media screen and (max-width: 600px) {
							display: block;
							font-size: 1.8rem;
							margin-bottom: 60px;
						}

						strong {
							display: flex;
							align-items: center;
							position: relative;
							margin-left: 5px;

							@media screen and (max-width: 600px) {
								width: auto;
								font-size: 1.8rem;
								display: inline-block;
							}



							img {
								max-width: 47px;

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

							}

							span {
								color: var(--blue);
								position: relative;

								&::after {
									position: absolute;
									content: "";
									background: url(../img/terms_terms.png) no-repeat;
									width: 31px;
									height: 30px;
									background-size: contain;
									left: 102%;
									bottom: 75%;
									margin: auto;

									@media screen and (max-width: 600px) {
										width: 15px;
										height: auto;
										aspect-ratio: 31 / 30;
									}
								}
							}

							&::before,
							&::after {
								position: absolute;
								content: "";
								width: 110%;
								height: 1px;
								background: var(--blue);
								bottom: -3px;
								left: -5%;
								margin: 0;
							}

							&::after {
								bottom: -7px;
							}
						}
					}
				}

			}

			.terms_content {
				p {
					line-height: 1.8;
					font-size: 1.5rem;
				}
			}


		}
	}
}