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

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

			}

		}

		&.scene {
			position: inherit;
			padding-top: 0;
			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;
			}

			.scene_box {
				margin-top: 8em;
						@media screen and (max-width: 600px) {
							margin-top: 4em;
						}
				.section_title {
					display: flex;
					justify-content: center;
					align-items: center;

					h3 {
						font-size: 2.8rem;

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

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

					img {
						width: 44px;
						aspect-ratio: 44 / 37;
						margin-left: 5px;

						@media screen and (max-width: 600px) {
							width: 25px;
							margin-bottom: 3px;
						}
					}

				}

				.scenes_box {
					margin-top: 82px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 122px;

					@media screen and (max-width: 600px) {
						margin-top: 0;
						margin-bottom: 65px;

						max-width: 100vw;

					}

					ul {
						&.scene_tub {
							width: 100%;
							max-width: 38%;
							height: auto;
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;

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

							.slick-list {
								padding-top: 1px;
								overflow: visible !important;
							}

							.slick-track {
								max-width: 100% !important;
								transform: unset !important;

							}

							li {
								display: block;
								width: calc(100%) !important;
								cursor: pointer;
								height: 90px;
								max-height: 85px;

								&.slick-slide {
									/* border-bottom: 1px solid #ACE9FF !important; */
									background: none !important;
									position: relative;

									&::after {
										transition: all .3s;
										position: absolute;
										content: "";
										height: 1px;
										width: 100%;
										background: #EBEBEB;
										bottom: 0;
										left: 0;
										margin: auto;
									}
								}



								&.slick-current {
									transform-origin: left center;
									margin-top: -1px;
									max-height: 90px;
									z-index: 100;

									&::after {
										display: none;
									}

									h4 {
										font-size: 1.8rem;
										letter-spacing: 0.02em;
										background: white !important;
										width: 110%;
										margin-left: -5%;

										/* border: 1px solid rgba(14, 157, 203, 1) !important; */
										filter: drop-shadow(6px 10px 16px rgba(160, 222, 245, 0.7));
										transform: translateZ(0);

										padding-left: 25px;
										border-radius: 16px;

										&::after {
											display: none !important;
										}

									}
								}

								&.slick-slide:has(+ .slick-current) {
									border: none !important;

									&::after {
										display: none;
									}
								}


								h4 {
									height: 100%;
									display: flex;
									align-items: center;
									width: 100%;
									text-align: left;
									font-size: 1.7rem;
									font-weight: 700;
									position: relative;
									padding-right: 15px;
									border: 1px solid rgba(14, 157, 203, 0) !important;
									transition: all .5s !important;

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

									&::after {
										position: absolute;
										content: "";
										width: 7px;
										aspect-ratio: 7 / 13;
										background: url(../img/scene_arrow.svg) no-repeat;

										background-size: contain;
										background-position: center center;
										top: 0;
										bottom: 0;
										right: 0;
										margin: auto;
										display: grid;
										place-content: center;
										transition: all .5s;
									}
								}

								&:last-child,
								&:nth-child(8) {
									border: 1px solid rgba(14, 157, 203, 0) !important;

									&::after {
										display: none;
									}

									&.slick-current {
										background: white !important;
									}
								}
							}
						}

						&.scene_content {
							width: 54.7%;
							border-radius: 16px;
							filter: drop-shadow(0 10px 27px rgba(160, 222, 245, 0.7));
							transform: translateZ(0);
							display: none;
							background: white;

							@media screen and (max-width: 820px) {
								width: 100%;
								margin-top: 35px;
							}


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



							.slick-list {
								padding-top: 1px;
								overflow: visible !important;
							}

							&.slick-initialized {
								display: block;
								/*slick-initializedが付与されたら表示*/
							}

							@media screen and (max-width: 820px) {
								.slick-track {
									display: flex !important;
									align-items: flex-start !important;
								}

								.slick-slide {
									height: auto !important;
								}
							}


							li {
								display: flex;
								flex-direction: column;
								justify-content: flex-start;
								/* aspect-ratio: 615 / 640; */

								@media screen and (max-width: 820px) {
									aspect-ratio: auto;
								}

							}

							.scene_img {
								display: flex;
								align-items: flex-start;
								/* overflow: hidden; */
								flex-grow: 1;
								position: relative;
								top: -1px;

								picture {
									display: inline-block;
									position: relative;


									&.photo {
										width: 80%;
										border-radius: 16px 0 0 0;
										overflow: hidden;

										img {
											width: 100%;
											height: 100%;
											object-position: center center;
											object-fit: cover;
											position: absolute;
											top: 0;
											right: 0;
											left: 0;
											margin: auto;
										}

										&::before {
											content: "";
											display: block;
											padding-top: 65%;
										}

									}

									&.card {
										width: 40.5%;
										border-radius: 20px 0 0 0;
										transform: translateZ(0);
										filter: drop-shadow(0 6px 10px rgba(144, 176, 183, .6));
										z-index: 2;

										img {
											width: 100%;
											height: auto;
											aspect-ratio: 171 /240;
											object-fit: cover;
											position: absolute;
											top: -25px;

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

									}

								}

							}

							.scene_text {
								padding: 32px 55px 50px;
								background: white;
								border-radius: 0 0 16px 16px;

								text-align: left;
								display: block;
								flex-grow: 1;


								@media screen and (max-width: 600px) {
									padding: 25px 21px 25px;

								}

								h5 {
									position: relative;

									font-size: 2.2rem;
									font-weight: 700;
									padding-left: 25px;

									@media screen and (max-width: 600px) {
										font-size: 1.8rem;
										line-height: 3rem;
										margin-top: 0;
										padding-left: 0;
									}

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

									&::before {
										content: "";
										position: absolute;
										width: 12px;
										height: 12px;
										background: var(--blue);
										border-radius: 100px;
										top: 0;
										bottom: 0;
										left: 0;
										margin: auto;
									}

									@media screen and (max-width: 600px) {

										&::before {
											display: none;


										}

									}

									&::after {
										content: "";
										position: absolute;
										width: 100%;
										height: 3px;
										border-bottom: 3px dotted var(--blue);
										bottom: -12px;
										left: 0;
										margin: auto;
									}
								}

								p {
									margin-top: 30px;
									font-size: 1.6rem;
									line-height: 3rem;
									letter-spacing: 0.06em;
									font-weight: 500;
									font-family: var(--zen);

									@media screen and (max-width: 600px) {
										font-size: 1.4rem;
										line-height: 2.6rem;
										margin-top: 30px;
										font-weight: 500;

									}

								}

								.scene_tag {
									margin-top: 30px;
									background: #EBFAFF;
									border-radius: 7px;
									padding: 10px 20px 7px;
									display: flex;
									justify-content: flex-start;
									flex-wrap: wrap;

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

									span {
										display: inline-block;
										color: var(--blue);
										font-size: 1.4rem;
										font-weight: 700;
										margin-right: 15px;
										margin-bottom: 3px;

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

									}
								}
							}

							@media screen and (max-width: 600px) {

								.slick-dots {
									/* background: #000; */
									margin: 0 auto;


									position: absolute;
									bottom: -35px;
									display: flex;
									justify-content: center;
									width: 100%;
									padding: 0;
									margin: 0;
									list-style: none;
									text-align: center;

									li {
										background: none;
										aspect-ratio: 1/1;
										width: 8px;
										margin: 0 6px;
										height: auto;
										overflow: hidden;

										&.slick-active {
											button {

												&::before {
													background: var(--blue);

												}
											}

										}

										button {
											&::before {
												width: 100%;
												height: 100%;
												background: #333;
												border-radius: 100px;
												font-size: 0.01vw;

											}
										}
									}

								}
							}


							@media screen and (max-width: 600px) {


								.slide-arrow {
									width: 30px;
									height: auto;
									aspect-ratio: 1/1;
									border-radius: 50%;
									top: auto;
									bottom: calc(50% - 15px);
									cursor: pointer;
									transform: scale(1);
									transition: all .2s;
									background: url(../img/scene_arrows.png) no-repeat;
									background-size: 100% 100%;
									background-position: center center;

									&.prev-arrow {
										transform: rotate(180deg);
										margin: 0;
										left: -5%;
									}

									&.next-arrow {
										margin: 0;
										right: -5%;

									}
								}

							}

						}
					}

				}
			}

			.difference {
				position: relative;
				z-index: 2;
				padding-bottom: 110px;

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

				.difference_box {
					text-align: center;



					.difference_box_title {
						display: flex;
						justify-content: center;
						align-items: center;

						@media screen and (max-width: 600px) {

							align-items: flex-end;

						}

						h3 {
							font-size: 3rem;
							line-height: 5.8rem;
							margin: 0 20px;

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

							@media screen and (max-width: 600px) {
								font-size: 1.8rem;
								line-height: 3rem;
								letter-spacing: 0.05em;
								padding: 0;
								margin: 0 10px;
							}

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

						img {
							width: 79px;

							@media screen and (max-width: 820px) {
								width: 55px;
							}

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

					.difference_feature {
						margin: 0;
						padding: 0;
						margin-top: 30px;
						border-radius: 16px;
						/* background: white; */

						filter: drop-shadow(0 33px 26px rgba(54, 170, 206, 0.3));
						transform: translateZ(0);
						overflow: hidden;
						align-items: stretch;

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

						.difference_img {
							display: flex;
							width: 47%;
							padding: 30px 66px 27px;
							align-items: flex-end;
							justify-content: space-between;
							background: #D1ECF5;

							@media screen and (max-width: 600px) {
								width: 100%;
								padding: 26px 15px 18px;
							}

							figure {
								max-width: 110px;
								height: auto;

								/* img {
								filter: drop-shadow(0 0px 5px rgba(183, 183, 183, 1));
								transform: translateZ(0);
							} */

								@media screen and (max-width: 600px) {
									max-width: 100px;

									img {
										width: 75%;
										margin: 0 auto;
									}
								}


								figcaption {
									font-size: 1.4rem;
									text-align: center;
									font-weight: 600;
									line-height: 1.7rem;
									margin-top: 15px;
									height: 40px;
									display: grid;
									place-content: center;

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

						.difference_text {
							background: white;
							width: 53%;
							padding: 32px 60px 20px;

							@media screen and (max-width: 600px) {
								width: 100%;
								padding: 21px 18px 20px;
							}


							h5 {
								display: inline-block;
								width: auto;
								background: #0EABDD;
								color: white;
								font-weight: 700;
								padding: 8px 15px;
								border-radius: 3px;
								font-size: 2rem;

								@media screen and (max-width: 600px) {
									font-size: 1.6rem;
									padding: 6px 15px;
								}
							}

							dl {
								margin-top: 19px;
								display: flex;
								flex-wrap: wrap;
								text-align: left;

								dt,
								dd {
									margin-bottom: 22px;

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

								dt {
									margin-right: 10px;
									flex-grow: 0;
									line-height: 3.2rem;
									padding-top: 4px;

									span {
										line-height: 3.2rem;

										display: grid;
										place-content: center;
										width: 26px;
										aspect-ratio: 1/1;
										border-radius: 50%;
										background: #0EABDD;
										color: white;
										font-weight: 600;
										font-family: var(--montserrat);

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

								dd {
									width: calc(100% - 36px);
									flex-grow: 1;
									font-size: 1.8rem;
									letter-spacing: 0.08em;
									font-weight: 600;
									line-height: 3.2rem;

									@media screen and (max-width: 600px) {
										line-height: 2.7rem;
										font-size: 1.6rem;
									}

									span {
										color: #0EABDD;
									}
								}
							}

						}
					}
				}

			}






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



		}
	}
}