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

section {
	padding-block: 2rem;
}

@media screen and (max-width: 599px) {
	/* 600px版と同じ3段階の横並びを維持 */
	.meal_info .meal_info_inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 5.333vw;
		max-width: none;
		width: 100%;
	}

	.meal_info .meal_info_inner .meal_info_box {
		min-width: 0;
		padding: 2.667vw 1.667vw;
	}

	.meal_info .meal_info_inner .meal_info_box::after {
		background: url("../images/about/arrow_sankaku.svg");
		right: -3.333vw;
		bottom: auto;
		transform: none;
	}

	.meal_info .meal_info_inner .meal_info_box p {
		font-size: clamp(10px, 2.33334vw, 14px);
	}

	.meal_info .meal_info_inner .meal_info_box p small {
		font-size: clamp(8px, 1.66667vw, 10px);
	}
}

.green_white_table {
    & tr {
        th {
            text-align: center;
			white-space: nowrap;
        }
    }
}

.management_inner {
	margin-block: 3rem;
	.management_inner_txt {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		margin-block: 10px;
	}
	.management_table_ttl {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		display: flex;
		align-items: center;
		column-gap: 5px;
		margin-block: 1rem 5px;
		&::before {
			content: '●';
			font-size: 12px;
		}
	}
	.management_inner_list {
		margin-block: 10px;
		li {
			font-size: clamp(15px, 3vw, 18px);
			font-family: '游ゴシックMedium';
			display: flex;
			align-items: center;
			column-gap: 5px;
			&::before {
				content: '●';
				font-size: 12px;
			}
		}
	}
}

.meal_info {
	.meal_info_inner {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 2rem;
		margin: 1rem auto;
		@media screen and (max-width: 574px) {
			grid-template-columns: repeat(1,1fr);
			max-width: 250px;
			width: 80%;
		}
		.meal_info_box {
			background: var(--main-green);
			border-radius: 10px;
			padding: 1rem 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&::after {
				content: '';
				background: url("../images/about/arrow_sankaku.svg");
				background-repeat: no-repeat !important;
				background-size: contain !important;
				display: inline-block;
				width: 6px;
				height: 8px;
				right: -20px;
				position: absolute;
				@media screen and (max-width: 574px) {
					background: url("../images/about/arrow_sankaku_bottom.svg");
					right: 50%;
					transform: translateX(-50%);
					bottom: -20px;
				}
			}
			&:last-of-type::after {
				display: none;
			}
			p {
				color: #FFF;
				text-align: center;
				line-height: 130%;
				font-size: 14px;
				small {
					font-size: 10px;
				}
			}
		}
	}
	.meal_memo {
		font-size: 14px;
		font-family: '游ゴシックMedium';
	}
}

.meal_caution {
	margin-block: 1rem;
	li {
		font-size: 14px;
		font-family: '游ゴシックMedium';
	}
}

.sec_inner {
	margin-block: 2rem;
	.sec_inner_ttl {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		margin-bottom: 10px;
		&::before {
			content: '■';
		}
	}
}

/* 最終優先：既存574px以下の1列化を打ち消す */
@media screen and (max-width: 599px) {
	.meal_info .meal_info_inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 5.333vw;
		max-width: none;
		width: 100%;
	}

	.meal_info .meal_info_inner .meal_info_box::after {
		background: url("../images/about/arrow_sankaku.svg");
		right: -3.333vw;
		bottom: auto;
		transform: none;
	}
}












/* 選ばれる理由の食事 photo_sub の既存表示値を再利用（食事ページ限定） */
body.about .sec_photo {
	margin-block: 32px;
	width: 100%;
}
body.about .sec_photo picture {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
body.about .sec_photo .photo_sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 16px;
	column-gap: 12px;
	margin-top: 16px;
}
body.about .sec_photo .photo_sub > li {
	position: relative;
	min-width: 0;
}
body.about .sec_photo .photo_sub > li > picture,
body.about .sec_photo .photo_sub > li > picture > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
body.about .sec_photo .photo_ttl {
	background: #FFF;
	border-radius: 30px;
	padding: 5px 1em;
	font-size: 16px;
	color: var(--brown);
	display: inline-flex;
	margin-top: 10px;
}
@media screen and (max-width: 599px) {
	body.about .sec_photo {
		margin-block: clamp(24px, 5.333vw, 32px);
	}
	body.about .sec_photo .photo_sub {
		row-gap: clamp(10px, 2.667vw, 16px);
		column-gap: clamp(8px, 2vw, 12px);
		margin-top: clamp(10px, 2.667vw, 16px);
	}
	body.about .sec_photo .photo_ttl {
		font-size: clamp(13px, 2.66667vw, 16px);
		padding: clamp(3px, 0.833vw, 5px) clamp(8px, 2.667vw, 16px);
		margin-top: clamp(6px, 1.667vw, 10px);
	}
}
