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

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

	&.example_page {

		section {
			&.planning {
				padding-top: 0;
				padding-bottom: 0;

				.cat_select,
				.planning_select {
					background: var(--bg);

				}

				.cat_select {
					padding-top: 4em;
					padding-bottom: 2em;

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

					.cat_select_box {
						width: auto;
						justify-content: space-between;
						/* background: white; */
						border-radius: 100px;
						/* padding: 4px; */
						position: relative;

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

						li {
							text-align: center;
							/* background: #edecec; */
							background: white;
							border-radius: 100px;
							overflow: hidden;
							width: 33%;
							cursor: pointer;
							transition: all .1s;
							border: 1px solid #bfbfbf;

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

							&.on {
								cursor: auto;
								background: var(--orange);
								border: 1px solid var(--orange);

								p {
									color: white;
								}

								&:hover {
									p {
										color: white;

									}
								}

							}

							p {
								padding: 20px 45px;
								color: #333;
								font-weight: bold;
								font-size: 18px;
								transition: all .1s;

								@media screen and (max-width:820px) {
									font-size: 1.5rem;
									padding: 15px;

								}
							}

							&:hover {
								p {
									color: var(--orange)
								}
							}
						}
					}
				}

				.planning_cat {
					display: none;

					/* background: #f0f0f0; */

					&.active {
						display: block;
					}

					.planning_select {
						padding-bottom: 4em;

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

						.planning_select_box {
							.planning_select_link {
								width: auto;
								margin: 0 auto;

								@media screen and (max-width:480px) {
									justify-content: flex-start;
								}

								li {
									margin: 2px 4px;
									width: auto;
									display: none;
									border-radius: 5px;

									&.show {
										display: block;
									}

									&.hide {
										display: none;
									}

									a {
										color: #333;
										padding: 12px 20px;
										font-weight: 600;
										display: block;
										overflow: hidden;
										border-radius: 3px;
										background: white;
										box-shadow: 0 2px 0 #bfbfbf;
										transform: translateY(0px);
										text-decoration: none;
										transition: all .1s;

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

										i {
											margin-left: 15px;

											@media screen and (max-width:480px) {
												margin-left: 6px;
												font-size: 12px;
											}
										}

										&:hover {
											background: var(--orange);
											color: white;
											transform: translateY(2px);
											box-shadow: none;
											opacity: 1;

										}
									}
								}
							}
						}
					}

					.planning_box {
						padding: 55px 0;

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

						h3 {
							text-align: left;
							margin-bottom: 25px;
							/* padding-left: 20px; */
							position: relative;
							font-size: 2.6rem;
							line-height: 3rem;
							letter-spacing: 0.1em;

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

						.plan_box {
							width: 100%;
							margin-bottom: 45px;

							display: flex;
							justify-content: space-between;

							li {
								width: 49%;
								background: white;
								margin-right: 2%;
								margin-bottom: 20px;
								border-radius: 10px;
								padding: 20px 25px;
								display: flex;
								flex-direction: column;
								/* box-shadow: 0px 3px 7px rgba(0, 0, 0, .06); */
								border: 1px solid #87b4bd;

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


								&:nth-child(2n) {
									margin-right: 0;
								}

								.example_box {
									display: flex;
									/* flex-wrap: wrap; */
									justify-content: space-between;
									align-items: flex-start;

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

									.example_img {
										width: 30%;
										aspect-ratio: 1 / 1;

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

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

									.example_text {
										width: calc(70% - 15px);

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

										h4 {
											font-size: 1.8rem;
											line-height: 2.8rem;

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

										p {
											margin-top: 15px;
											font-size: 1.4rem;
											line-height: 2.2rem;

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

								.tag_box {
									width: 100%;
									margin-top: 20px;

									span {
										display: inline-block;
										font-size: 1.2rem;
										padding: 3px 6px;
										margin-right: 3px;
										margin-bottom: 4px;
										color: #666;
										font-weight: 500;
										border: 1px solid #666;
										border-radius: 3px;
									}
								}

								.buttons {
									width: 100%;
									padding-top: 20px;
									margin-top: auto;
									display: flex;
									justify-content: space-between;

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

									a {
										width: 49%;

										@media screen and (max-width:1200px) {
											width: 100%;
											margin-bottom: 10px;

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

										background: var(--orange);

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

						}
					}
				}

			}
		}

	}
}