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

/*root*/
/*------------------------------------------------------------*/
/* demoページ                                         */
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/* 共通                                       */
/*------------------------------------------------------------*/

.demo_page h2 {
	position: relative;
	z-index: 10;
	height: 100px;
	display: grid;
	place-content: center;
}

.demo_page h2 strong {
	font-size: 2.6rem;
	z-index: 10;
	line-height: 2.6rem;
	position: relative;

}

.demo_page h2 strong span {
	color: var(--deep-blue);
}

.demo_page h2::before {
	position: absolute;
	z-index: 5;
	content: "DEMO";
	font-size: 10rem;
	line-height: 10rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #f5f5f5;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
}

.demo_page .demo_box {
	padding: 25px 0;
	text-align: center;
}

.demo_page .demo_box h3 {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 60px;
	line-height: 6.1rem;
	font-size: 3.5rem;
	font-weight: 900;
}

.demo_page .demo_box h3 span {
	color: var(--orange);
}

.demo_page {
	/* #demo {
		background: white;
	} */

	ul.demo_list {
		display: block;


		>li {
			text-align: left;
			width: 100%;
			display: flex;
			margin-bottom: 2em;

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

			/* 偶数だけ左右反転 */
			&:nth-child(even) {

				.demo_box {
					flex-direction: row-reverse;
				}

			}

			/* ===== demo_box ===== */
			.demo_box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30px;

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

				@media screen and (max-width: 820px) {
					flex-direction: column-reverse !important;
				}

				/* ===== テキスト ===== */
				.demo_text {
					width: 65%;
					background: #fff;
					padding: 2.5em 3em;
					border-radius: 16px;
					position: relative;
					/* margin-right: 5%; */
					box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
					text-align: left;

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

					@media screen and (max-width: 480px) {
						padding: 2em 2em;
					}


					h3 {
						font-size: 2.2rem;
						line-height: 3rem;
						margin-bottom: 20px;
						font-weight: 700;
						color: var(--new-blue);
						text-align: left;

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

					>p {
						font-size: 1.6rem;
						line-height: 2.8rem;
						color: #6A6A6A;

						@media screen and (max-width: 480px) {
							font-size: 1.3rem;
							line-height: 2.3rem;
						}
					}

					.tag_box {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;

						margin-top: 1em;

						span {
							display: inline-block;
							color: var(--navy);
							border: 1px solid var(--navy);
							font-size: 1.4rem;
							padding: 2px 6px 3px;
							font-weight: 500;
							margin-right: 2px;
							margin-bottom: 3px;
							border-radius: 2px;

							@media screen and (max-width: 480px) {
								font-size: 1.2rem;
								padding: 1px 5px 2px;
								margin-right: 1px;
								margin-bottom: 1px;
							}
						}
					}

					.buttons {
						margin-top: 1em;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						a {
							width: 48.5%;
							border: 1px solid var(--new-blue);

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

							span {
								display: inline-block;
								width: 100%;
								text-align: center;

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

					}
				}

				/* ===== 画像 ===== */
				.demo_img {
					width: 32%;
					text-align: center;
					aspect-ratio: 1/1;


					padding: 0;
					border-radius: 0;

					transition: all .1s;

					img {
						margin: 0;
					}

					&:hover {
						background: none;
						opacity: .7;
					}

					a {
						position: relative;
						display: block;
						width: 100%;
						height: 100%;

						span {
							position: absolute;
							background: red;
							width: 65px;
							text-align: center;
							height: 65px;
							display: flex;
							align-content: center;
							align-items: center;
							justify-content: center;
							color: white;
							font-size: 150%;
							border-radius: 50%;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							padding: 0;
							margin: auto;

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


					}

					@media screen and (max-width: 820px) {
						width: 100%;
						max-width: 400px;
						margin: 0 auto 40px;
					}

					img {
						filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.1));

						@media screen and (max-width: 480px) {
							filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.06));
						}
					}

					padding: 0;
					border-radius: 0;

					transition: all .1s;

					img {
						margin: 0;
					}

					&:hover {
						background: none;
						opacity: .7;
					}

					position: relative;

					span {
						position: absolute;
						background: red;
						width: 50px;
						text-align: center;
						height: 50px;
						display: flex;
						align-content: center;
						align-items: center;
						justify-content: center;
						color: white;
						border-radius: 50%;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						padding: 0;
						margin: auto;

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

				}
			}

			/* ===== SP調整 ===== */
			@media screen and (max-width: 820px) {
				margin-bottom: 80px;
			}
		}
	}


	.demo_case {
		padding: 4em 0;
		background: white;

		@media screen and (max-width: 820px) {
			padding: 2.5em 0;
		}

		h4 {
			font-size: 2.4rem;
			text-align: center;
			font-weight: 700;

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

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

			span {
				font-size: 110%;
				color: var(--deep-blue);
			}
		}

		ul {
			justify-content: space-between;
			align-items: stretch;
			margin-top: 20px;

			li {
				width: 49%;
				margin: 15px 0;
				display: block;
				padding: 35px 40px;
				border: 2px solid var(--blue);
				border-radius: 21px;
				display: block;
				color: var(--black);
				text-align: center;
				font-weight: 500;
				transition: all.1s;
				position: relative;
				background: white;

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

				h5 {
					position: relative;
					width: auto;
					font-size: 1.6rem;
					font-weight: 700;
					color: white;
					margin-bottom: 10px;
					padding: 10px 15px;
					border-radius: 6px;
					display: inline-block;
					background: var(--blue);
					transition: all .1s;

					&::after {
						content: "";
						position: absolute;
						right: 0;
						bottom: -10px;
						left: 0;
						width: 0px;
						height: 0px;
						margin: auto;
						border-style: solid;
						border-color: var(--blue) transparent transparent transparent;
						border-width: 10px 10px 0 10px;

					}
				}

				p {
					margin-top: 20px;
					font-size: 1.8rem;
					font-weight: 700;
					margin-bottom: 25px;
					line-height: 3rem;
					position: relative;
					/* padding-bottom: 25px; */
					transition: all .1s;

					@media screen and (max-width:480px) {
						font-size: 1.6rem;
						margin-bottom: 20px;
						line-height: 2.6rem;
					}
				}

				small {
					font-size: 1.5rem;
					display: inline-block;
					text-align: left;
					line-height: 2.5rem;
					color: #6A6A6A;

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

		}





	}
}