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

/*------------------------------------------------------------
 企画例
------------------------------------------------------------*/
main {
	/* *{outline:1px solid #0000FF} */

	&.demo_page {

		section {
			&.demo {
				padding-top: 0;
				padding-bottom: 0;
				padding-bottom: 55px;



				.demo_box {
					padding: 0;

					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%; */
									border: 1px solid var(--blue-green);
									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(--blue-green);
										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(--blue-green);
											border: 1px solid var(--blue-green);
											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%;

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

											span {
												display: inline-block;
												width: 100%;
												text-align: center;
												font-size: 1.6rem;

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

											&.button1 {
												background: var(--blue-green);

											}

											&.button2 {
												background: var(--orange);
											}
										}

									}
								}

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


									padding: 0;
									border-radius: 0;

									transition: all .1s;

									img {
										margin: 0;
										width: 100%;
										height: 100%;
										object-fit: contain;
									}

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

						}





					}

				}

			}


		}

	}
}