@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;
		}


		}

		&.effect {
			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;
			} */

			.effect_box {
				position: relative;

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

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

					&::before,
					&::after {
						content: "";
						position: absolute;
						width: 25px;
						height: 25px;
						background: url(../img/effect_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/effect_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/effect_effect.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;
							}
						}
					}
				}

				ul {
					display: flex;
					justify-content: space-between;
					filter: drop-shadow(0 23px 54px rgba(211, 236, 242, 1));
					transform: translateZ(0);

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

					li {
						width: 100%;
						max-width: 47%;
						margin-bottom: 53px;
						border-radius: 21px;
						overflow: hidden;
						background: white;

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

						@media screen and (max-width: 600px) {
							max-width: 100%;
							border-radius: 12px;
						}

						.effect_text {
							padding: 33px 43px 45px 48px;

							@media screen and (max-width: 1200px) {
								padding: 25px 35px 40px;
							}

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

								span {
									max-width: 47px;

									@media screen and (max-width: 1200px) {
										max-width: 32px;
									}
								}

								h4 {
									font-size: 2.4rem;
									/* color: var(--blue); */
									color: #0DABDD;
									font-weight: 700;
									margin-left: 24px;
									letter-spacing: 0.1em;

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

									@media screen and (max-width: 600px) {
										font-size: 1.6rem;
										margin-left: 13px;
									}
								}
							}

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

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

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

							small {
								margin-top: 10px;
								display: block;
								text-align: left;
								font-size: 1.3rem;
								font-weight: 500;
								letter-spacing: 0.1em;
								line-height: 2.3rem;
								color: #606060;
							}

						}

						&:nth-child(1) {
							.effect_text .effect_subtitle {
								span {
									width: 47px;
								}
							}
						}

						&:nth-child(2) {
							.effect_text .effect_subtitle {
								span {
									width: 49px;
								}
							}
						}

						&:nth-child(3) {
							.effect_text .effect_subtitle {
								span {
									width: 53px;
								}
							}
						}

						&:nth-child(4) {
							.effect_text .effect_subtitle {
								span {
									width: 51px;
								}
							}
						}


					}
				}

			}





			.buttons {
				margin-top: 55px;
				display: flex;
				justify-content: center;

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

				a {
					display: flex;
					padding: 5px 30px;
					font-weight: 500;
					color: var(--blue);
					text-decoration: none;
					align-items: center;
					transition: all .1s;
					border-right: 1px solid #A9DDED;
					font: 1.6rem;

					@media screen and (max-width: 600px) {
						width: 49%;
						font-size: 1.2rem;
						padding: 5px 10px;
						justify-content: center;
					}

					&:hover {
						opacity: .7;
					}

					&:last-child {
						border: none;
					}

					img {

						&.to,
						&.back {
							width: 5px;
							height: auto;
							margin: 0 10px;
						}

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



		}
	}
}