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

/*------------------------------------------------------------
 企画例
------------------------------------------------------------*/
main {
	/* *{outline:1px solid #0000FF} */
	overflow: hidden;
	width: 100%;

	&.price_page {

		section {


			&.price {
				background: #FAFDFF;

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

				.price_box {
					padding: 0;
					width: 96%;
					max-width: 1200px;
					margin: 0 auto;
					margin-bottom: 75px;

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

					.plan {
						margin-bottom: 75px;

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

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

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

							thead {
								th {
									text-align: center;
									padding: 16px;
									width: 32%;

									font-size: 2rem;
									color: white;

									&:nth-child(2) {
										border-radius: 13px 0 0 0;
										background: #40C18A;

									}

									&:nth-child(3) {
										border-radius: 0 13px 0 0;
										background: var(--blue);
									}


									&.plan {
										background: none;
										width: auto;
										padding: 0;
										text-align: left;

										h3 {
											font-size: 2.2rem;
											letter-spacing: 0.06em;
											padding-left: 18px;
											line-height: 2.2rem;
											position: relative;
											margin-bottom: 33px;
											color: var(--black);

											&::before,
											&::after {
												position: absolute;
												content: "";
												width: 3px;
												height: 100%;
												background: var(--blue);
												left: 0;
												top: 0;
												bottom: 0;
												margin: auto;

											}

											&::after {
												height: 50%;
												background: #40C18A;
												top: 50%;
												bottom: auto;

											}

										}
									}
								}
							}

							tbody {
								background: white;
								filter: drop-shadow(0 12px 30px rgba(149, 198, 226, 0.3));
								transform: translateZ(0);
								border-radius: 0 0 13px 13px;

								tr {
									&:first-child {
										th {
											&:first-child {
												border-top-left-radius: 13px;
											}
										}
									}

									&:last-child {
										th {
											&:first-child {

												border-bottom-left-radius: 13px;
											}


										}

										td {
											&:last-child {
												border-bottom-right-radius: 13px;
											}

										}
									}
								}

								th {
									background: #FAFAFA;

									h4 {
										padding: 10px;
										font-size: 1.8rem;
										font-weight: 500;
										text-align: center;
									}

								}

								td {
									padding: 20px 42px;
									text-align: center;
									border-right: 1px solid #D1D1D1;

									&:nth-child(3n) {
										border-right: none;
									}


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

										span {
											color: #40C18A;
										}
									}

									&.cost {
										position: relative;
										letter-spacing: 0.06em;

										strong {
											font-family: var(--montserrat);
											font-size: 4.2rem;
											color: var(--blue);
											font-weight: bold;
										}

										font-size: 2.4rem;
										font-weight: 500;

										small {
											font-size: 1.rem;
										}

										sup {
											font-weight: 400;
											color: #797979;
											font-size: 1.5rem;
											position: absolute;
											top: calc(50% - 10px);
										}
									}
								}
							}

							&.stanllyplus {
								thead {
									th {
										&:nth-child(2) {
											background: #63D4C6;

										}

										&:nth-child(3) {
											background: #FF6652;
										}


										&.plan {

											h3 {

												&::before,
												&::after {
													background: #63D4C6;

												}

												&::after {
													background: #FF6652;

												}

											}
										}
									}


								}

								tbody {
									th {
										border-bottom: 1px solid #D1D1D1;

										h4 {
											small {
												font-size: 1.2rem;

												&.gray {
													color: #797979
												}
											}
										}
									}

									td {
										padding: 20px 42px;
										text-align: center;
										border-right: 1px solid #D1D1D1;
										border-bottom: 1px solid #D1D1D1;

										&:nth-child(3n) {
											border-right: none;
										}

										&.cost {
											strong {
												color: #63D4C6;
											}

											&:last-child {
												strong {
													color: #FF6652;

												}

											}
										}
									}

									tr {
										p {
											text-align: center;

											small {
												font-size: 1.2rem;
												line-height: 1.2rem;
												font-weight: 500;
												display: inline-block;
												color: #797979;
											}
										}

										&:last-child {

											th,
											td {
												border-bottom: none;
											}
										}
									}

								}
							}



						}

						@media screen and (max-width: 480px) {
							.plan-card-wrapper {
								&.stanlly_plus {
									h3 {

										&::before,
										&::after {
											position: absolute;
											content: "";
											width: 4px;
											height: 100%;
											background: #63D4C6;
											left: 0;
											top: 0;
											bottom: 0;
											margin: auto;

										}

										&::after {
											height: 50%;
											background: #FF6652;
											top: 50%;
											bottom: auto;

										}


									}
								}

							}

							h3 {
								padding: 0;
								margin: 0;
								font-size: 2rem;
								letter-spacing: 0.06em;
								padding-left: 15px;
								line-height: 2rem;
								position: relative;
								color: var(--black);
								margin-bottom: 20px;

								&::before,
								&::after {
									position: absolute;
									content: "";
									width: 4px;
									height: 100%;
									background: var(--blue);
									left: 0;
									top: 0;
									bottom: 0;
									margin: auto;

								}

								&::after {
									height: 50%;
									background: #40C18A;
									top: 50%;
									bottom: auto;

								}

							}

							.plan-card-wrapper {
								display: flex;
								flex-direction: column;
							}

							.plan-card {
								flex: 1;
								/* border: 1px solid #D1D1D1; */
								border-radius: 8px;
								background: #fff;
								margin-bottom: 15px;
								overflow: hidden;
								filter: drop-shadow(0 6px 10px rgba(149, 198, 226, 0.3));
								transform: translateZ(0);


								&:nth-child(2) {
									h4 {
										background: #40C18A;

									}
								}

								&:nth-child(3) {
									h4 {
										background: var(--blue);
									}
								}

								&:last-child {
									margin: 0;
								}

								h4 {
									font-size: 1.6rem;
									color: white;
									padding: 15px;
									text-align: center;
								}

								.text {

									.price {
										font-size: 1.8rem;
										font-weight: bold;
										text-align: center;
										letter-spacing: 0.06em;
										padding: 15px 25px;
										sup{
											font-size: 1.2rem;
											color: #797979;
										}

										strong {
											font-size: 3rem;
											font-weight: bold;
											font-family: var(--montserrat);
										}

										small {
											font-size: 1.1rem;
										}
									}

									dl {
										display: flex;
										flex-wrap: wrap;

										dt,
										dd {
											padding: 15px 15px;
											border-bottom: 1px solid #D1D1D1;
											font-size: 1.3rem;
											line-height: 2.2rem;
											font-weight: 500;

											&:last-child,
											&:nth-last-child(2) {
												border: none;
											}

										}

										dt {
											font-size: 1.4rem;
											width: 30%;
											background: #FAFAFA;
											display: flex;
											align-items: center;
											text-align: center;
										}

										dd {
											width: 70%;
											text-align: center;

											small {
												color: #797979;
											}
										}
									}

									p {
										font-weight: 500;
										text-align: left;
										font-size: 1.3rem;
										border-bottom: 1px solid #D1D1D1;

										span {
											color: #40C18A;
										}


										&:last-child {
											border: none;
										}

									}
								}

								&.blue {
									h4 {
										background: var(--blue);
									}

									.price {
										strong {
											color: var(--blue);
										}
									}
								}

								&.green {
									h4 {
										background: #40C18A;
									}

									.price {
										strong {
											color: #40C18A;
										}
									}

								}

								&.blue_green {
									h4 {
										background: #63D4C6;
									}

									.price {
										strong {
											color: #63D4C6;
										}
									}

								}

								&.red {
									h4 {
										background: #FF6652;
									}

									.price {
										strong {
											color: #FF6652;
										}
									}


								}


							}

							.plan-card .plan-card-wrapper {
								flex-direction: column;
							}
						}


						p.caution {
							text-align: center;
							margin-top: 34px;
							font-weight: 500;

							small {
								font-size: 1.2rem;
								color: #797979;
							}

							@media screen and (max-width: 480px) {
								margin-top: 20px;
								text-align: left;

								small {
									font-size: 1.1rem;
								}
							}
						}

						.banners {
							margin-top: 35px;
							width: 100%;
							text-align: center;

							a {
								margin: 0 auto;
								display: block;
								max-width: 685px;
								transition: all .2s;
								filter: drop-shadow(0 23px 46px rgba(149, 198, 226, 0.6));
								transform: translateZ(0);

								img {
									width: 100%;
								}

								&:hover {
									opacity: .8;
									filter: none;
									transform: translateY(5px);
								}
							}
						}
					}


					.native_app {
						margin-top: 114px;
						border-radius: 13px;
						text-align: center;
						background: #EFF7FF;
						padding: 35px 75px 43px;

						@media screen and (max-width: 480px) {
							margin-top: 55px;
							border-radius: 8px;
							padding: 30px 25px;
						}

						h3 {
							font-size: 2.2rem;
							letter-spacing: 0.06em;
							margin-bottom: 25px;

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

								span {
									font-size: 1.6rem;
								}
							}
						}

						.app_box {
							border-radius: 13px;
							background: white;
							display: flex;
							align-items: center;
							padding: 18px 0;
							@media screen and (max-width: 480px) {
								border-radius: 8px;
								flex-direction: column;
							}
							.estimate {
								border-right: 1px solid #9BCBEB;
								@media screen and (max-width: 480px) {
									width: 100%;
									border: none;
									padding: 0 20px;

								}
								h4 {
									padding: 45px 40px;
									font-size: 2rem;
									color: var(--blue);
									text-align: center;
									@media screen and (max-width: 480px) {
										font-size: 1.8rem;
										width: 100%;
										padding: 10px 15px 20px;
										border-bottom: 1px solid #9BCBEB;

									}
								}

							}

						}

						.text {
							flex-grow: 1;
							justify-content: flex-start;
							align-items: center;
							display: flex;
							margin-left: 50px;
							@media screen and (max-width: 480px) {
								margin: 0;
								margin-top: 0;
								padding: 20px 25px;
								flex-direction: column;
							}
							p {
								font-size: 1.6rem;
								line-height: 2.9rem;
								letter-spacing: 0.08em;
								color: var(--black);
								margin-right: 50px;
								text-align: left;
								@media screen and (max-width: 480px) {
									font-size: 1.2rem;
									font-weight: 500;
									line-height: 2rem;
									margin: 0;
									width: 100%;
								}
							}

							.icon {
								flex-grow: 1;
								display: flex;
								justify-content: flex-start;
								@media screen and (max-width: 480px) {
									width: 100%;
									margin-top: 25px;
									justify-content: center;
								}
								img {
									max-width: 60px;
									margin-right: 34px;
									@media screen and (max-width: 480px) {
										max-width: 25%;
										margin: 0 10px;
									}

								}
							}
						}
					}


					.buttons {
						margin-top: 55px;
						text-align: center;
						@media screen and (max-width: 480px) {
							margin-top: 25px;
							a{
								padding: 20px;
							}
						}
					}
				}

			}


		}

	}
}