@charset "utf-8";
/* CSS Document */

/* PC area */
	h3::before,
	.h3::before,
	*.stit-common02::before {
		background: none;
		background-color: none;
	}
	
	input[name="categorykey"][value="40"] ~ .pane-main h3::before,
	input[name="categorykey"][value="40"]~.pane-contents h3::before,
	input[name="categorykey"][value="40"]~.pane-contents .h3::before,
	input[name="categorykey"][value="40"]~.pane-contents .stit-common02::before {
		background-color: transparent;
	}

	.image-pc {
		display: block;
	}

	.image-sp {
		display: none;
	}

	.br-pc {
		display: block;
	}

	.br-sp {
		display: none;
	}

	#item-wrapper {
		width: 1000px;
		margin: 0 auto;
		font-size: 16px;
	}

	#item-wrapper .text-pink {
		color: #FA6478;
		font-weight: bold;
	}

	#item-wrapper .text-bold {
		font-weight: bold;
	}

	#item-wrapper .mv-image {
		margin-bottom: 50px;
	}

	h2.point-title {
		font-size: 20px;
		font-weight: bold;
		background-color: #eef2f4;
		padding: 15px 30px;
		margin-bottom: 30px;
	}

	h2.point-title span {
		color: #EA5550;
	}

	h3.sub-title {
        border-left: 5px solid #FA6478;
        padding-left: 10px;
		margin: 0 0 20px 0;
        color: #FA6478;
        font-weight: bold;
        font-size: 18px;
    }

	.flex-box {
		display: flex;
		align-items: flex-start;
		gap: 24px;
		line-height: 28px;
		margin-bottom: 50px;
	}

	.flex-box .text,
	.flex-box .image {
		flex: 1;
	}
	
	.flex-box .image img {
		width: 100%;
		height: auto;
		display: block;
	}

	.flex-box.reverse {
		flex-direction: row-reverse;
	}

	.recipe-title {
		font-size: 20px;
		font-weight: bold;
		background-color: #eef2f4;
		padding: 15px 30px;
		color: #EA5550;
		text-align: center;
		margin-bottom: 30px;
	}

	.sp-image-top {
		flex-direction: row-reverse;
	}

	.recipe-round {
		border: 3px solid #F4F4F4;
		background-color: #FBFBFB;
		border-radius: 10px;
		padding: 45px;
		margin-bottom: 50px;
	}

	.recipe-round ol {
		padding-inline-start: 20px;
		margin-block-start: 8px;
		margin-block-end: 0;
	}

	.recipe-round li {
		list-style: decimal;
		margin-bottom: 10px;
	}
	
	.recipe-round .item {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		margin: 5px 0;
	}
	
	.recipe-round .name,
	.amount {
		white-space: nowrap;
	}

	.recipe-round .dots {
		flex: 1;
		margin: 0 20px;
		height: 2px;
		background-image: repeating-linear-gradient(
			to right,
			black 0,
			black 2px,
			transparent 2px,
			transparent 10px
			);
			background-position: center;
			background-size: auto 1px;
		}
/* PC area */


/* SP area */
	@media screen and (max-width: 768px) {

		.image-pc {
			display: none;
		}

		.image-sp {
			display: block;
		}

		.br-pc {
			display: none;
		}

		.br-sp {
			display: block;
		}

		#item-wrapper {
			width: 100%;
			margin: 0 auto;
			font-size: 14px;
		}

		#item-wrapper .mv-image {
			margin-bottom: 30px;
		}
		
		h2.point-title {
			font-size: 16px;
			padding: 15px;
			margin-bottom: 15px;
		}

		h3.sub-title {
			font-size: 14px;
			margin: 0 0 15px 0;
		}

		.flex-box {
			gap: 15px;
			flex-direction: column;
			margin-bottom: 30px;
		}

		.flex-box,
		.flex-box.reverse {
			flex-direction: column;
			padding: 0px 15px;
		}

		.recipe-title {
			font-size: 18px;
			padding: 15px;
			margin-bottom: 15px;
		}

		.sp-image-top .text {
			order: 2;
		}

		.recipe-round {
			padding: 25px 15px;
		}

		.sp-image-top {
			flex-direction: column;
			padding: 0;
		}
		
		.sp-image-top .image {
			order: 1;
		}
		
		.recipe-round .item {
			display: grid;
			grid-template-columns: auto minmax(100px, 1fr) auto;
			align-items: center;
			margin: 0;
		}
		
		.recipe-round .name,
		.recipe-round .amount {
			white-space: nowrap;
		}
		
		.recipe-round .dots {
			margin: 0 8px;
			height: 2px;
			background-image: repeating-linear-gradient(
				to right,
				#000 0,
				#000 2px,
				transparent 2px,
				transparent 10px
				);
				background-position: center;
			}
		}
/* SP area */