@charset "utf-8";

/*------------------------------------------------------------
    pickout
------------------------------------------------------------*/
/* base */
#container {
	@media all and (max-width: 519px) {
		overflow: hidden;
	}
}

.static.static-md {
	.is-pc {
		display: block;

		@media all and (max-width: 519px) {
			display: none;
		}
	}

	.is-sp {
		display: none;

		@media all and (max-width: 519px) {
			display: block;
		}
	}

	.pageTitle.page02 {
		padding: 3.5rem 0 2.5rem;

		@media all and (max-width: 519px) {
			padding: 1.5rem 0 1.8rem;
		}
	}

	.headLine01 {
		font-size: 2.8rem;

		@media all and (max-width: 519px) {
			font-size: 1.6rem;
		}
	}

	.content_block .btn_area {
		margin-top: 0;
	}
}

.txt-bg {
	position: relative;
	isolation: isolate;

	&::after {
		content: "";
		display: block;
		position: absolute;
		top: 39%;
		left: 49%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 8rem;
		background: url(../images/txt_bg2.svg) no-repeat center center / 28rem;
		z-index: -1;

		@media all and (max-width: 519px) {
			height: 30rem;
			top: 47%;
			left: 50%;
			background: url(../images/txt_bg2.svg) no-repeat center center / 19rem;
		}
	}
}

.-txt {
	font-size: 1.6rem;
}

.static.static-md {

	/* kv */
	.kv_area {
		background: url(../images/bg01.png) repeat top left / 71rem;

		@media all and (max-width: 519px) {
			background: url(../images/bg01.png) repeat top left / 100%;
		}

		.kv_inner {
			display: flex;

			@media all and (max-width: 519px) {
				display: block;
			}

			.kv_img_wrap {
				width: 50%;
				flex-shrink: 0;
				display: flex;
				align-items: center;

				@media all and (max-width: 519px) {
					width: 100%;
				}

				.kv_img {
					min-width: 0;
					aspect-ratio: 6 / 5;
					object-fit: cover;
				}
			}



			.kv_lead {
				padding: 0 4.6rem;
				text-align: center;

				@media all and (max-width: 519px) {
					padding: 0 1.6rem 4rem;
				}

				.kv_lead-img {
					margin-top: 7rem;
					padding: 0 1.5rem 0 4.4rem;

					@media all and (max-width: 519px) {
						margin-top: 4px;
						padding: 0 0 0 1.4rem;
					}
				}

				.kv_lead-title {
					margin-top: 2rem;

					@media all and (max-width: 519px) {
						margin-top: 0;
						padding: 0 5rem;
					}
				}

				.-txt {
					margin-top: 5rem;
					line-height: 1.98;

					@media all and (max-width: 519px) {
						margin-top: 1.4rem;
					}
				}
			}
		}
	}

	/* アンカーリンク */
	.content_wrapper.-btnlist {
		background-color: #FFDF72;
		padding: 2.8rem 0 3rem;

		@media all and (max-width: 519px) {
			padding: 2.4rem 0 2.2rem;
		}

		.btn_area {
			.link_list {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 0.8rem 3.2rem;

				.btn {
					border: solid #fff 0.3rem;
					box-shadow: rgba(0, 0, 0, 0.16) 0 3px 0;
					background-color: #FF8001;
					width: 26.8rem;
					font-size: 2rem;
					font-weight: 900;
					height: 6.9rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 0.8rem;
					position: relative;
					padding: 0 2.5rem;

					&::before {
						content: "";
						display: block;
						width: 3.3rem;
						height: 3.3rem;
						background: url(../images/btn_item.png) no-repeat center center / contain;
						flex-shrink: 0;
					}

					&::after {
						content: "";
						display: block;
						width: 1.4rem;
						height: 1.4rem;
						border-right: 0.3rem solid #fff;
						border-bottom: 0.3rem solid #fff;
						transform: rotate(45deg) translateY(-25%);
						flex-shrink: 0;
						filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.16));
					}

					span {
						margin-right: auto;
					}
				}
			}
		}
	}

	/* main */
	.content_wrapper.-main {
		background: url(../images/bg04.png) repeat top left / 11.9rem;
		padding: 11.8rem 0;

		@media all and (max-width: 519px) {
			padding: 8rem 0;
		}

		.content_block.feature {
			@media all and (max-width: 519px) {
				margin-left: 0.8rem;
				margin-right: 0.8rem;
			}
		}

		.main-block {
			display: flex;
			flex-direction: column;
			gap: 8rem;

			@media all and (max-width: 519px) {
				gap: 10rem;
			}
		}

		.item_block {
			background: url(../images/bg03.png) repeat top left / 118.4rem;
			padding-bottom: 8rem;

			@media all and (max-width: 519px) {
				padding-bottom: 4rem;
			}

			.item_block-inner {
				display: flex;

				@media all and (max-width: 519px) {
					display: block;
				}

				.-img {
					width: 50%;
					flex-shrink: 0;

					@media all and (max-width: 519px) {
						width: 100%;
					}

					img {
						width: 98.7%;
						display: block;
						transform: translateY(-10px);

						@media all and (max-width: 519px) {
							width: 100%;
							transform: translateY(0px);
						}
					}
				}

				.-body {
					margin-top: 6.7rem;
					flex: 1;

					@media all and (max-width: 519px) {
						margin-top: 3.5rem;
					}

					.-head {
						display: flex;
						align-items: center;
						gap: 1.3rem;
						margin-bottom: 1.6rem;
						justify-content: center;
						position: relative;
						isolation: isolate;

						@media all and (max-width: 519px) {
							gap: 0.6rem;
						}

						&::after {
							content: "";
							display: block;
							position: absolute;
							top: 57%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 100%;
							height: 15rem;
							background: url(../images/txt_bg1.svg) no-repeat center center / 47rem;
							z-index: -1;

							@media all and (max-width: 519px) {
								background: url(../images/txt_bg2.svg) no-repeat center center / 28rem;
								top: 47%;
								left: 58%;
							}
						}

						.-icon {
							width: 5.6rem;
							flex-shrink: 0;

							@media all and (max-width: 519px) {
								width: 3.8rem;
							}
						}

						.-title {
							color: #FF8001;
							font-size: 2.4rem;
							font-weight: 700;
							letter-spacing: 0.1rem;

							@media all and (max-width: 519px) {
								font-size: 1.8rem;
								letter-spacing: -0.02rem;
							}
						}
					}

					.-txt {
						margin-bottom: 0.8rem;
						line-height: 2;
						text-align: center;
						margin-top: 3.3rem;
						position: relative;
						z-index: 2;

						@media all and (max-width: 519px) {
							margin-top: 2.2rem;
							padding: 0 1.6rem;
						}
					}
				}

				&.item_block-inner2 {
					.-img {
						img {
							transform: translateY(-15px);

							@media all and (max-width: 519px) {
								transform: translateY(-17px);
							}
						}
					}

					.-body {
						margin-top: 7.2rem;

						@media all and (max-width: 519px) {
							margin-top: 1.7rem;
						}

						.-head {
							gap: 1.3rem;

							@media all and (max-width: 519px) {
								gap: 0.3rem;
							}

							.-icon {
								width: 7.6rem;

								@media all and (max-width: 519px) {
									width: 6rem;
								}
							}

							&::after {
								top: 78%;
								left: 53%;

								@media all and (max-width: 519px) {
									top: 46%;
									left: 56%;
									background: url(../images/txt_bg2.svg) no-repeat center center / 29rem;
								}
							}
						}

						.-txt {
							margin-top: 3.1rem;

							@media all and (max-width: 519px) {
								margin-top: 2.1rem;
							}
						}
					}
				}

				&.item_block-inner3 {
					.-img {
						img {
							transform: translateY(-13px);

							@media all and (max-width: 519px) {
								transform: translateY(-18px);
							}
						}
					}

					.-body {
						margin-top: 7.7rem;

						@media all and (max-width: 519px) {
							margin-top: 2.2rem;
						}

						.-head {
							gap: 1.3rem;

							@media all and (max-width: 519px) {
								gap: 0.3rem;
							}

							.-icon {
								width: 10.6rem;

								@media all and (max-width: 519px) {
									width: 7.6rem;
								}
							}

							&::after {
								top: 103%;
								left: 54%;

								@media all and (max-width: 519px) {
									top: 52%;
									left: 56%;
									background: url(../images/txt_bg2.svg) no-repeat center center / 27rem;
								}
							}
						}

						.-txt {
							margin-top: 2.9rem;

							@media all and (max-width: 519px) {
								margin-top: 3rem;
							}
						}
					}
				}
			}

			.btn_area {
				.-label {
					font-size: 2rem;
					font-weight: 700;
					color: #39AE50;
					text-align: center;
					margin: 0.8rem 0 0;

					@media all and (max-width: 519px) {
						font-size: 1.8rem;
						margin: 5.4rem 0 0;
					}
				}

				.link_list {
					display: flex;
					justify-content: center;
					gap: 1.6rem;
					flex-wrap: wrap;
					margin-top: 2.8rem;

					@media all and (max-width: 519px) {
						margin-top: 1.8rem;
					}

					&.-col1 {
						margin-top: 4rem;

						.btn {
							max-width: 49.2rem;
							width: 49.2rem;
							height: 8.4rem;

							@media all and (max-width: 519px) {
								max-width: 34.5rem;
								width: 34.5rem;
								height: 9rem;
							}
						}
					}

					&.-col2 .btn {
						width: 26.8rem;
					}

					.btn {
						border: solid #fff 0.3rem;
						box-shadow: rgba(0, 0, 0, 0.16) 0 3px 0;
						background-color: #39AE50;
						font-size: 1.8rem;
						font-weight: 900;
						height: 6.9rem;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 3rem;
						border-radius: 10rem;
						color: #fff;
						text-decoration: none;

						span {
							margin-right: auto;
							text-align: left;
							letter-spacing: 0.35rem;
						}

						&::after {
							content: "";
							display: block;
							width: 1rem;
							height: 1rem;
							border-right: 0.25rem solid #fff;
							border-bottom: 0.25rem solid #fff;
							transform: rotate(-45deg) translateY(0%);
							flex-shrink: 0;
							filter: drop-shadow(-2px -2px 0 rgba(0, 0, 0, 0.16));
						}
					}
				}

				&.btn_area2 {
					.-label {
						margin: -0.5rem 0 0;

						@media all and (max-width: 519px) {
							margin: 3.5rem 0 0;
						}
					}
				}

				&.btn_area3 {
					.-label {
						margin: 4.5rem 0 0;

						@media all and (max-width: 519px) {
							margin: 8rem 0 0;
						}
					}

					.-col1 {
						@media all and (max-width: 519px) {
							margin-top: 5.5rem;
						}
					}
				}
			}
		}
	}

	.content_wrapper.-yellow {
		background: url(../images/bg02.png) repeat top left / 11.8rem;
		padding: 5.2rem 0 4rem;

		.block_title {
			color: #FF8001;
			font-size: 2.4rem;
			letter-spacing: 0.05rem;
			margin-bottom: 3rem;

			@media all and (max-width: 519px) {
				font-size: 1.8rem;
				margin: 0 -0.8rem 2.6rem;
			}
		}

		/* グッズの買い方 */
		.step_list {
			display: flex;
			gap: 4rem;
			justify-content: center;
			align-items: center;

			@media all and (max-width: 519px) {
				flex-direction: column;
				gap: 1.6rem;
			}

			.item {
				flex: 1;
				padding: 1.5rem 3.2rem;
				background-color: #fff;
				display: flex;
				align-items: center;
				gap: 2.4rem;
				height: 12rem;

				@media all and (max-width: 519px) {
					display: block;
					height: 100%;
					padding: 3.2rem 2.6rem;
				}

				h3 {
					flex-shrink: 0;
					text-align: center;

					@media all and (max-width: 519px) {
						margin-bottom: 2.6rem;
					}
				}

				.-txt {
					margin-bottom: 0.4rem;
				}

				.-notes {
					font-size: 1.2rem;
					color: rgba(0, 0, 0, 0.5);
					text-indent: -1em;
					padding-left: 1em;
					line-height: 1.5;
				}
			}
		}

		/* おすすめ特集 */
		&.-yellow2 {
			padding: 8.2rem 0 7rem;

			@media all and (max-width: 519px) {
				padding: 5.8rem 0 5rem;
			}

			.block_title {
				margin-bottom: 6.4rem;
			}

			.banner_list {
				gap: 2.4rem;

				@media all and (max-width: 519px) {
					gap: 2.5rem;
				}

				@media all and (max-width: 519px) {
					margin: 4.8rem 3.3rem 0;
				}

				.item {
					width: calc((100% - (4.0rem * 2)) / 4);

					@media all and (max-width: 519px) {
						width: 100%;
					}
				}
			}
		}
	}
}