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

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

			}

		}

		&.type {
			position: inherit;
			/* background: white !important; */
			background: url(../img/about_bg.jpg) no-repeat;
			background-size: 100% 100%;

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

			.type_box {

				li {
					&:last-child {

						position: relative;

						&::after {
							position: absolute;
							content: "";
							background: url(../img/comingsoon.png) no-repeat;
							width: 55%;
							aspect-ratio: 587/280;
							background-size: contain;
							background-position: center center;
							transform: rotate(-10deg);
							border-radius: 5px;
							top: 0;
							left: 0;
							bottom: 40%;
							right: 0;
							z-index: 2;
							margin: auto;
						}

					}
				}

				.type_title {
					text-align: center;
					margin-bottom: 60px;

					h3 {
						font-size: 2.8rem;
						letter-spacing: 0.07em;
						display: inline-block;
						position: relative;

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

						img {
							width: 56px;
							aspect-ratio: 56/58;
							margin-right: -5px;

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

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

						&::after,
						&::before {
							position: absolute;
							content: "";
							top: 0;
							bottom: 0;
							margin: auto;
						}

						&::before {
							background: url(../img/type_left.png) no-repeat;
							right: calc(100% + 13px);
							width: 49px;
							aspect-ratio: 49/54;
							background-size: 100% 100%;

						}

						&::after {
							background: url(../img/type_right.png) no-repeat;
							left: calc(100% + 7px);
							width: 84px;
							aspect-ratio: 84/61;
							background-size: 100% 100%;

						}

						@media screen and (max-width: 600px) {
							&::before {
								width: 40px;
								background-size: contain;
							}

							&::after {
								left: calc(100% + 2px);
								width: 65px;
								background-size: contain;

							}

						}
					}

					p {
						margin-top: 48px;
						text-align: center;
						font-size: 1.8rem;
						font-weight: 600;
						line-height: 4.2rem;
						letter-spacing: 0.1em;

						@media screen and (max-width: 600px) {
							margin-top: 35px;
							font-size: 1.6rem;
							font-weight: 600;
							line-height: 3.2rem;
							letter-spacing: 0.06em;
						}

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

				ul {

					&.card_type {
						display: flex;
						justify-content: space-between;

						li {
							width: 100%;
							max-width: 47%;
							position: relative;
							filter: drop-shadow(0 15px 22px rgba(190, 228, 237, 1));
							transform: translateZ(0);


							&::before {
								position: absolute;
								content: "";
								width: calc(100% - 22px);
								height: calc(100% - 22px);
								border: 1px solid #9FD9EA;
								border-radius: 11px;
								top: 0;
								left: 0;
								bottom: 0;
								right: 0;
								margin: auto;
								z-index: 1;

							}

							@media screen and (max-width: 600px) {
								max-width: 100%;
								margin-bottom: 30px;
							}

							h4 {
								display: block;
								text-align: left;
								position: absolute;
								top: -19px;
								left: -16px;
								background: #0DABDD;
								color: white;
								z-index: 3;

								span {
									padding: 7px 45px 12px;
									padding-right: 25px;
									display: inline-block;
									position: relative;
									font-size: 2.4rem;

									@media screen and (max-width: 600px) {
										padding: 5px 30px 10px;
										padding-right: 10px;
										font-size: 1.6rem;

									}

									strong {
										font-size: 3.2rem;

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

									&::before {
										position: absolute;
										content: "";
										top: 99.9%;
										left: 0;
										width: 16px;
										aspect-ratio: 16/12;
										background: #0087B2;
										margin: auto;
										clip-path: polygon(0 0, 100% 100%, 100% 0);
									}

									&::after {
										position: absolute;
										content: "";
										height: 100%;
										width: 20px;
										aspect-ratio: 20/65px;
										left: 99.9%;
										top: 0;
										bottom: 0;
										background: url(../img/type_name1.svg) no-repeat;
										margin: auto;
									}

									@media screen and (max-width: 600px) {
										&::after {
											background-position: center left;
										}
									}
								}
							}

							.type_content {
								position: relative;
								border-radius: 10px;
								/* overflow: hidden; */
								width: 100%;
								height: 100%;
								display: flex;
								flex-direction: column;

								.img {
									width: 100%;
									background: #EDFBFF;
									aspect-ratio: 527/194;
									border-radius: 10px 10px 0 0;

									picture {
										position: relative;
										width: 100%;
										height: 100%;
										display: block;
										z-index: 2;

										img {
											aspect-ratio: 527/208;
											object-fit: contain;
											object-position: center top;
										}

									}

								}

								.text {
									background: white;
									padding: 23px 49px 40px;
									border-radius: 0 0 10px 10px;
									flex-grow: 1;

									@media screen and (max-width: 600px) {
										padding: 20px 35px 30px;
									}

									h5 {
										font-size: 2rem;
										padding-bottom: 5px;
										border-bottom: 1px dashed #0DABDD;
										color: #0DABDD;
										display: flex;
										align-items: center;
										width: fit-content;
										justify-content: center;
										margin: 0 auto;

										@media screen and (max-width: 600px) {
											font-size: 1.6rem;
											letter-spacing: 0;
										}

										span {
											background: #0DABDD;
											color: white;
											display: inline-block;
											margin-right: 5px;
											font-size: 1.3rem;
											padding: 3px 6px;
											border-radius: 2px;

											@media screen and (max-width: 600px) {
												font-size: 1.1rem;
												margin-right: 3px;
												padding: 1px 4px 2px;
											}
										}

									}

									p {
										margin-top: 28px;
										font-size: 1.5rem;
										line-height: 3rem;
										text-align: left;
										font-weight: 500;

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

										span {
											color: #0DABDD;
											font-weight: 600;
										}
									}
								}

							}


							&:nth-child(2) {
								filter: drop-shadow(0 15px 22px rgba(200, 240, 234, 1));

								&::before {
									border: 1px solid #88E6D8;
								}

								h4 {
									background: #04BA9F;

									span {
										&::before {
											background: #008672;
										}

										&::after {
											background: url(../img/type_name2.svg) no-repeat;

										}

										@media screen and (max-width: 600px) {
											&::after {
												background-position: center left;
											}
										}

									}
								}

								.type_content {
									.img {
										background: #E4FAF7;
									}

									.text {
										h5 {
											border-bottom: 1px dashed #04BA9F;
											color: #04BA9F;

											span {
												background: #04BA9F;
											}
										}

										p {
											span {
												color: #04BA9F;
											}
										}
									}
								}

							}

						}
					}

				}

				.type_message {
					margin-top: 70px;
					width: 100%;
					background: url(../img/type_message_pc.png) no-repeat;
					aspect-ratio: 1128/250;
					background-size: contain;
					display: flex;
					align-items: center;
					text-align: center;

					@media screen and (max-width: 600px) {
						margin-top: 15px;
						background: url(../img/type_message_sp.png) no-repeat;
						aspect-ratio: 940/500;
						background-size: contain;
						margin-bottom: 75px;
					}

					h3 {
						width: 100%;
						text-align: center;
						font-size: 3rem;
						font-weight: 700;
						margin-top: -10px;
						line-height: 5rem;

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

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

						small {
							font-size: 2.6rem;

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

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

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

						strong {
							font-weight: 700;
							color: #04BA9F;

							d {
								background: linear-gradient(transparent 70%, #E3FFF3 0);
							}
						}

					}

				}
			}





			.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);
						}
					}
				}
			}



		}
	}
}