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


/*------------------------------------------------------------*/
/* よくある質問
/*------------------------------------------------------------*/
.planning_page {
	/* margin-bottom: 16rem; */

	/* .planning_content_box{
		opacity: 0;
		display: none;
		&.active{
			display: block;
			opacity: 1;
		}

	} */

	section.searchs {
		background: var(--light2);
		padding: 0 0 40px;

	}

	.planning_search {
		padding-top: 30px;

		ul {
			display: flex;
			justify-content: space-around !important;

			li {
				width: calc(100% / 3 - 1%);
				border-radius: 100px;
				background: white;
				color: #b9b9b9;
				border: 1px solid #b9b9b9;
				cursor: pointer;

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

					margin-bottom: 5px;

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

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

				&.active_search {
					border: 2px solid var(--text-orange);
					cursor: auto;

					p {
						position: relative;
						color: var(--text-orange);
						transform: scale(1.05);
						display: inline-block;

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

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

				p {
					font-size: 1.5rem;
					font-weight: bold;
					padding: 2rem 1em;
					/* font-weight: 500; */
					color: #b9b9b9;
					transition: all .1s;

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

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

				}
			}

		}

	}


	.planning_menu {
		display: flex;
		justify-content: center;
		margin: 4.5rem 0;
		margin-top: 0;

		&.new {
			margin-bottom: 0;
			padding-top: 15px;

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



			ul {
				justify-content: flex-start;
				width: 90%;
				max-width: 1100px;
				display: none;

				&.scene {

					/* background: #000; */
					li {
						a {
							i {
								margin-left: 10px;
							}
						}

					}
				}


				&.active_menu {
					display: flex;
				}

				li {
					margin-right: 5px;
					background: white;
					/* border: none!important; */
					border-radius: 5px;
					border: 1px solid var(--red-orange);

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


					&.hide_tb {
						display: none;
						border-color: #6A6A6A;

						a {
							pointer-events: none;
							color: #6A6A6A;
						}
					}



					a {
						padding: 1.5rem 2.2rem;

						i {
							transform: scale(1);
							transition: all .1s;
						}

						&:hover {
							color: var(--red-orange);

							i {
								transform: scale(1.5);
							}

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

					&:last-child {
						margin-right: 0;
						border: 1px solid var(--red-orange);

					}
				}

			}

		}

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


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

		ul {
			width: 96%;
			max-width: 1100px;
			justify-content: center;
			/* gap: 1px; */
			align-items: stretch;
			flex-wrap: nowrap;


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



			@media screen and (max-width: 480px) {
				border: none;
				width: 100%;
				margin-top: 0;
				gap: 0;
				justify-content: space-between;
				position: relative;
				padding: 0;
				flex-direction: column;

			}

			li {
				display: block;
				/* width: auto; */
				flex-basis: content;
				border-left: 1px solid #e6e6e6;


				@media screen and (max-width: 1300px) {
					/* width: calc(100% / 5 - 1px); */
				}

				/* flexアイテムの幅を自動で調整 */
				@media screen and (max-width: 820px) {
					/* width: calc(100% / 4 - 1px); */
					margin-bottom: 10px;

					&:nth-child(5) {
						a {
							border-left: 1px solid #e6e6e6;

						}

					}
				}

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

					width: 100%;
					margin: 0 0;
					border-bottom: 1px solid #e6e6e6;

					&:last-child {
						border: none;
					}
				}


				&:last-child {
					border-right: 1px solid #e6e6e6;

				}

				a {
					white-space: nowrap;
					color: var(--base);
					/* background: var(--red-orange); */
					width: 100%;
					height: 100%;
					padding: 1.5rem 2.5rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 3px;
					font-size: 1.5rem;
					flex-basis: content;
					/* border-right: 1px solid #e6e6e6; */
					font-weight: 500;
					transition: all .2s;
					position: relative;
					text-decoration: none;

					@media screen and (max-width: 1300px) {
						padding: 1em 1.5em;
						font-size: 1.4rem;
					}

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


					img {
						height: 20px;
						width: auto;
						margin-right: 15px;

						@media screen and (max-width: 1300px) {
							height: 14px;
							margin-right: 5px;
						}
					}

					i {
						color: var(--red-orange);
						font-size: 90%;
						margin-left: 20px;

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

					}

					&::after {
						position: absolute;
						content: "";
						background: url(../img/common/sub_top_bg_load.png) no-repeat;
						background-size: cover;
						height: 2px;
						width: 0;
						bottom: 0;
						left: 20px;
						margin: 0;
						transition: all .2s;
						border-radius: 2px;
					}

					@media screen and (max-width: 480px) {
						width: 100%;
						text-align: center;
						font-weight: bold;

						i {
							display: none;
						}
					}

					&:hover {
						text-decoration: none;
						box-shadow: none;

						&::after {
							width: calc(100% - 40px);
						}
					}

					@media screen and (max-width: 480px) {
						font-size: 1.4rem;
						padding: 20px 0;
						letter-spacing: -0.02rem;
						border: none !important;

						&:hover {
							&::after {
								display: none;
							}
						}
					}

					&:nth-child(5) {
						a {
							border: none !important;
						}
					}
				}
			}

		}
	}

	.planning_tab {
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: center;

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

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

		ol {
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			position: relative;
			max-width: 100%;
			/* padding: 1em 0; */
			justify-content: space-between;

			@media screen and (max-width: 480px) {
				width: 100%;
				margin: 0;
				justify-content: space-between;
				border-radius: 0;
				border-top: 1px solid #dbdbdb;
			}

			>li {
				background: white;
				width: calc(100% / 2);
				/* border-radius: 6px; */
				cursor: pointer;
				color: var(--red-orange);
				display: inline-block;
				transition: all .05s;
				position: relative;
				z-index: 1;

				&:first-child {
					border-radius: 10px 0 0 10px;

					p {
						border: none;
					}
				}

				&:last-child {
					border-radius: 0 10px 10px 0;
				}

				@media screen and (max-width: 480px) {
					border-radius: 0 !important;
				}

				&.active {
					background: none;
					text-decoration: none;
					font-weight: bold;
					background: var(--text-orange);
					background-size: cover;
					background-position: bottom center;
					z-index: 2;
					position: relative;

					p {
						border-color: var(--text-orange);
						color: white;
						font-weight: 600;
					}

					&:hover {
						p {
							color: white;
						}

					}


					&::after {
						position: absolute;
						content: "";
						top: calc(100% - 1px);
						left: 0;
						right: 0;
						margin: auto;
						width: 25px;
						height: 15px;
						z-index: 2;
						background-color: var(--text-orange);
						clip-path: polygon(0 0, 100% 0, 50% 100%);
					}
				}

				p {
					margin: 1em 0;
					font-size: 1.8rem;
					font-weight: 500;
					transition: all .1s;
					width: 100%;
					padding: 10px;
					transition: all .05;
					/* border-left: 1px solid #dbdbdb; */

					@media screen and (max-width: 820px) {
						height: 100%;
						font-size: 1.4rem;
						margin: 0;
						display: grid;
						place-content: center;
						padding: 2em 10px;


					}

					@media screen and (max-width: 480px) {
						height: 100%;
						font-size: 1.2rem;
						margin: 0em;
						display: grid;
						place-content: center;

					}
				}

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

	}

	.planning_content_box {
		padding-bottom: 65px;
		background: var(--light);

		&.new {
			position: relative;
			z-index: 1;
			display: none;

			&.active_content {
				display: block;
				z-index: 2;
			}

			&.scene {
				li {
					display: none;
				}

				#government {
					li {
						display: none;

						&.government {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}

				}

				#mall {
					li {
						display: none;

						&.mall {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}
				}

				#event {
					li {
						display: none;


						&.event {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}
				}

				#manufacturer {
					li {
						display: none;


						&.manufacturer {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}
				}

				#shop {
					li {
						display: none;

						&.shop {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}
				}

				/* #transportation {
					li {
						display: none;

						&.transportation {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}
				} */

				#etc {
					li {
						display: none;

						&.etc {
							display: flex !important;

							&.off {
								display: none !important;
							}

							&.on {
								display: flex !important;
							}
						}
					}
				}


			}

		}

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

	}

	.planning_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto;
		padding-top: 35px;

		/* padding-bottom: 65px; */

		@media screen and (max-width:820px) {
			padding-top: 55px;
			padding-bottom: 45px;

		}

		p.planning_box_title {
			margin-bottom: 25px;
			font-size: 2.2rem;
			font-weight: 600;
			color: var(--black);
			width: 100%;

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

		ul {
			width: 100%;
			display: flex;
			margin: 0 -12px;

			li {

				width: calc(100% / 2 - 24px);
				margin: 0 12px;
				background: white;
				margin-bottom: 3%;
				border-radius: 12px;
				/* filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.1)); */
				position: relative;
				transform: translateY(0);
				transition: all .1s;

				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;

				&.off {
					display: none;
				}

				&.on {
					display: felx;
				}


				@media screen and (max-width:820px) {
					width: calc(100%);
					margin-right: 0 !important;
					margin-bottom: 20px;
				}


				/* &:hover {
					filter: none;
					transform: translateY(0);

					a {
						opacity: 0.8;
					}
				} */

				a,
				.new_plan_example {
					transition: all .2s;
					padding: 2em 3em;
					width: 100%;
					/* height: 100%; */
					color: #6A6A6A;
					text-decoration: none;
					position: relative;




					.plan_box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						min-height: 170px;

						@media screen and (max-width:820px) {
							min-height: 0;
						}

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

					.plan_img {
						width: 35%;

						@media screen and (max-width:480px) {
							width: 100%;
							margin-bottom: 30px;
							order: 2;

							img {
								max-width: 200px;
								margin: 0 auto;
							}
						}
					}

					.plan_text {
						width: 60%;
						text-align: left;

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

						.categorie {
							display: inline-block;
							color: var(--red-orange);
							font-weight: 600;
							font-size: 1.6rem;
							margin-bottom: 15px;
							width: auto;
							background: linear-gradient(180deg, #039DFC 0%, #00B7FF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;

							img {
								height: 23px;
								width: auto;
								margin-right: 5px;
							}

							.cocodepit {
								img {
									height: 30px;
								}
							}
						}

						.scene {
							color: var(--red-orange);
							font-weight: 600;
							font-size: 1.4rem;
							margin-bottom: 10px;

							span {
								display: inline-block;
								margin-right: 5px;
								margin-bottom: 5px;

								&:last-child {
									display: none;
								}
							}
						}


						h3 {
							font-size: 1.6rem;
							color: var(--black);

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

						h4 {
							margin-top: 10px;
							font-size: 1.6rem;
							display: none;
						}

						p {
							margin-top: 15px;
							font-size: 1.3rem;
							line-height: 2rem;
							color: #6A6A6A;
						}

					}

					.tag_box {
						width: 100%;
						margin-top: 10px;
						padding-bottom: 30px;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						align-items: flex-start;

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

						}


						span {
							display: inline-block;
							font-size: 1.2rem;
							padding: 4px 10px 4px;
							border-radius: 20px;
							font-weight: 500;
							border: 1px solid #6A6A6A;
							margin-right: 7px;
							margin-bottom: 8px;



							/* &.prize_trade_type {
								color: white;
								background: var(--red-orange);
							} */

							&.categorie {
								border-color: var(--text-orange);
								color: var(--text-orange);
								background: white;

								&:last-child {
									display: none;
									border: none;

								}
							}

							&:empty {
								display: none;
								border: none;

							}
						}
					}

					.btn {
						position: absolute;
						color: var(--red-orange);
						font-weight: 500;
						text-align: right;
						right: 3em;
						bottom: 2em;

						small {
							font-size: 1.4rem;
							font-weight: 500;
						}

					}


				}

				.new_plan_example {
					height: 100%;
					display: flex;
					flex-direction: column;

					.tag_box {
						padding-bottom: 10px;

						span {
							border-radius: 3px !important;
						}
					}

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



						a {
							width: 49%;
							height: auto !important;
							padding: 10px 15px 10px;
							margin: 0;
							transition: all .1s;
							filter: none !important;

							p::after {
								display: none;
							}

							&:hover {
								transform: none;
							}

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

							&.button {
								p {
									color: white;
									font-weight: 500;
								}
							}

							&.button_1 {
								background: var(--text-orange) !important;
								border-color: var(--text-orange) !important;

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

							&.button_2 {
								background: var(--green) !important;
								border-color: var(--green) !important;

								&::before {
									background: white;
								}

								&:hover {

									p {
										color: var(--green);
									}

								}
							}

							small {
								position: relative;
								display: block;
								width: 100%;
								height: 100%;
								font-size: 1.6rem;
								font-weight: 500;
								letter-spacing: 0.03em;

								i {
									position: absolute;
									right: 0;
									top: 0;
									bottom: 0;
									margin-left: auto;
									display: flex;
									align-items: center;
								}
							}
						}
					}

				}
			}
		}


		@media screen and (max-width: 820px) {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		@media screen and (max-width: 480px) {
			padding-top: 55px;
			padding-bottom: 15px;
		}

	}
}

.lb-data {
	.lb-number {
		display: none !important;
		opacity: 0 !important;

		&:hover {
			display: none !important;
			opacity: 0 !important;

		}
	}
}

.lb-nav {

	.lb-next,
	.lb-prev {
		display: none !important;
		opacity: 0 !important;

		&:hover {
			display: none !important;
			opacity: 0 !important;

		}
	}
}

.opa {
	opacity: 0.5;
	transition: all .1s;
	position: relative;

	&::before {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
}