@charset "UTF-8";

.edit-area.recipe {
	padding: 10rem 0;

	@media screen and (max-width: 767px) {
		padding: 4rem 0 6rem;
	}

	.recipe-title {
		&.type01 {
			margin-bottom: 4rem;

			@media screen and (max-width: 767px) {
				margin-bottom: 2rem;
			}

			.title-main {
				margin-bottom: 4rem;
				padding-bottom: 3rem;
				font-weight: 700;
				font-size: 3.8rem;
				line-height: 1.21;
				letter-spacing: 0.09em;
				border-bottom: 1px solid #bcbcbc;

				@media screen and (max-width: 767px) {
					margin-bottom: 1rem;
					padding-bottom: 1.5rem;
					font-size: 2rem;
				}
			}

			.title-sub {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.sub-date {
					margin-right: 1.8rem;
					font-weight: 400;
					letter-spacing: 0.02em;
					color: #707070;

					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
						width: 100%;
						font-size: 1.2rem;
					}
				}

				.sub-category {
					display: flex;
					flex-wrap: wrap;
					gap: 1rem;
					margin-right: 1rem;

					@media screen and (max-width: 767px) {
						margin-right: 0.5rem;
						gap: 0.5rem;
					}

					& li {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 1.4rem;
						letter-spacing: 0.02em;
						padding: 0 1rem;
						height: 3rem;
						background: #ebebeb;
						border-radius: 0.4rem;

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

					&.type01 {
						& li {
							font-weight: 600;
							color: #ffffff;
							background: #e50012;
						}
					}
				}
			}
		}

		&.type02 {
			margin-bottom: 2.2rem;
			padding-bottom: 1.2rem;
			font-weight: 600;
			font-size: 2.2rem;
			line-height: 1.6;
			letter-spacing: 0.08em;
			border-bottom: 0.2rem solid #E50012;

			@media screen and (max-width: 767px) {
				margin-bottom: 1.8rem;
				padding-bottom: 0.8rem;
				font-size: 1.6rem;
			}
		}
	}

	.recipe-column {
		display: flex;
		justify-content: space-between;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			gap: 3rem;
		}

		.column-main {
			width: 83.8rem;

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

			.recipe-thumbnail {
				margin-bottom: 3.8rem;

				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
				}

				& img {
					object-fit: scale-down;
					object-position: center center;
					width: 100%;
					height: 51.2rem;
					border-radius: 2rem;
					border: 1px solid #DDD;

					@media screen and (max-width: 767px) {
						height: 20rem;
					}
				}
			}

			.recipe-description {
				margin-bottom: 4.3rem;

				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
				}
			}

			.recipe-step {
				display: flex;
				flex-direction: column;
				margin-bottom: 5.4rem;
				gap: 2.6rem;
				counter-reset: number;

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

				& li {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					counter-increment: number;

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

				.list-photo {
					width: 26rem;
					border: 1px solid #DDD;

					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
						width: 100%;
					}

					& img{
						object-fit: scale-down;
						object-position: center center;
						width: 100%;
						height: 16rem;
					}
				}

				.list-text {
					width: calc(100% - 26rem - 4.4rem);

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

					&:before {
						content: "STEP" counter(number, decimal-leading-zero);
						display: block;
						margin-bottom: 2rem;
						font-weight: 700;
						font-size: 1.8rem;
						letter-spacing: 0.02em;
						color: #E50012;
					}

					@media screen and (max-width: 767px) {
						&:before {
							margin-bottom: 0;
							font-size: 1.4rem;
						}
					}
				}
			}

			.recipe-share {
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 3.8rem;
				margin-bottom: 4.3rem;
				padding: 3.4rem;
				border: 1px solid #BCBCBC;
				border-radius: 0.6rem;

				@media screen and (max-width: 767px) {
					flex-direction: column;
					margin-bottom: 3rem;
					gap: 1.5rem;
					padding: 2rem 2rem 3rem;
				}

				.share-title {
					font-weight: 700;
					font-size: 1.8rem;

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

				.share-list {
					display: flex;
					flex-wrap: wrap;
					width: calc(100% - 6rem - 20rem);

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

					& li {
						width: calc(100% / 4);

						& a {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							height: 3.8rem;
							color: #FFF;
							font-size: 1.4rem;
							font-weight: bold;
							letter-spacing: 0.02em;
							text-decoration: none;

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

						&.fb {
							& a {
								background-color: #3b5998;
							}
						}

						&.x {
							& a {
								background-color: #000000;
							}
						}

						&.hatena {
							& a {
								background-color: #008fde;
							}
						}

						&.line {
							& a {
								background-color: #06c755;
							}
						}
					}
				}
			}

			.recipe-title {
				&.recommend {
					@media screen and (max-width: 767px) {
						margin-bottom: 0;
					}
				}
			}

			.recipe-recommend {
				display: flex;
				flex-wrap: wrap;
				gap: 3rem;

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

				>li {
					width: calc(100% / 3 - 3rem * 2 / 3);

					@media screen and (max-width: 767px) {
						width: 100%;
						border-bottom: 1px dashed #DDD;
					}
				}

				& a {
					display: flex;
					flex-direction: column-reverse;
					text-decoration: none;

					@media screen and (max-width: 767px) {
						flex-direction: row;
						align-items: flex-start;
						justify-content: space-between;
						padding: 1rem 0;
					}

					@media (hover: hover) and (pointer: fine) {
						.list-photo {
							& img {
								transition: ease 0.25s transform;
							}
						}

						&:hover {
							.list-photo {
								& img {
									transition: ease 0.25s transform;
									transform: scale(1.2);
								}
							}
						}
					}
				}

				.list-photo {
					margin-bottom: 1.1rem;
					border-radius: 1.6rem;
					overflow: hidden;
					border: 1px solid #DDD;

					@media screen and (max-width: 767px) {
						width: 10.4rem;
						border-width: 0.2rem;
						border-radius: 0.5rem;
					}

					& img {
						object-fit: scale-down;
						object-position: center center;
						width: 100%;
						height: 16.5rem;

						@media screen and (max-width: 767px) {
							height: 6.5rem;
						}
					}
				}

				.list-text {
					@media screen and (max-width: 767px) {
						width: calc(100% - 10.4rem - 2rem);
					}

					.text-date {
						display: block;
						margin-bottom: 0.6rem;
						font-weight: 400;
						font-size: 1.4rem;
						line-height: 1.6;
						letter-spacing: 0.02em;
						color: #707070;

						@media screen and (max-width: 767px) {
							margin-bottom: 0.3rem;
							font-size: 1rem;
						}
					}

					.text-title {
						font-weight: 700;
						line-height: 1.4;
						letter-spacing: 0.09em;
						color: #000000;
					}

					.text-category {
						margin-top: 1.4rem;
						display: flex;
						flex-wrap: wrap;
						gap: 1rem;

						@media screen and (max-width: 767px) {
							margin-top: 0.6rem;
							gap: 0.5rem;
						}

						& li {
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 1.2rem;
							letter-spacing: 0.02em;
							padding: 0 1rem;
							height: 2.5rem;
							white-space: nowrap;
							background: #ebebeb;
							border-radius: 0.4rem;

							@media screen and (max-width: 767px) {
								padding: 0 0.5rem;
								font-size: 1rem;
								height: 2rem;
							}

							&.type01 {
								font-weight: 600;
								color: #ffffff;
								background: #e50012;
							}
						}
					}
				}
			}

			.youtube-area{
				margin-bottom: 4rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
				}
				& iframe{
					display: block;
					width: 100%;
					height: 46rem;
					@media screen and (max-width: 767px) {
						height: 18rem;
					}
				}
			}
		}

		.column-sub {
			width: 37rem;

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

			.recipe-title {
				&.type02 {
					margin-bottom: 0;
				}
			}

			.sub-notes {
				margin: 2rem 0;
				font-size: 1.4rem;
				line-height: 1.4;

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

			.sub-list {
				display: flex;
				flex-direction: column;
				margin-bottom: 4rem;

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

				>li {
					border-bottom: 1px dashed #BCBCBC;
				}

				& a {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: flex-start;
					padding: 2rem 0;
					text-decoration: none;

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

					@media (hover: hover) and (pointer: fine) {
						transition: ease 0.25s background-color;

						&:hover {
							background-color: #FAFAFA;
						}
					}
				}

				.list-photo {
					width: 10.4rem;
					border: 0.2rem solid #DDD;
					border-radius: 0.5rem;
					background: #FFF;
					overflow: hidden;

					& img {
						object-fit: scale-down;
						object-position: center center;
						width: 100%;
						height: 6.5rem;
					}
				}

				.list-text {
					width: calc(100% - 10.4rem - 1.2rem);

					.text-date {
						display: block;
						margin-bottom: 0.6rem;
						font-weight: 400;
						font-size: 1.4rem;
						line-height: 140%;
						letter-spacing: 0.02em;
						color: #707070;

						@media screen and (max-width: 767px) {
							margin-bottom: 0.3rem;
							font-size: 1rem;
						}
					}

					.text-title {
						font-weight: 600;
						line-height: 140%;
						letter-spacing: 0.02em;
						color: #E50012;
					}

					.text-category {
						margin-top: 1.2rem;
						display: flex;
						flex-wrap: wrap;
						gap: 0.5rem;

						@media screen and (max-width: 767px) {
							margin-top: 0.6rem;
						}

						& li {
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 1.2rem;
							letter-spacing: 0.02em;
							padding: 0 1rem;
							height: 2.5rem;
							white-space: nowrap;
							background: #ebebeb;
							border-radius: 0.4rem;

							@media screen and (max-width: 767px) {
								padding: 0 0.5rem;
								font-size: 1rem;
								height: 2rem;
							}

							&.type01 {
								font-weight: 600;
								color: #ffffff;
								background: #e50012;
							}
						}
					}
				}
			}
		}
	}
}