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

.page_ttl_wrap {
	background: url("../images/flower/page_ttl_bg.jpg");	
}

.inner_wrap {
	max-width: 800px;
}

.flower_list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
	gap: 2rem 5px;
	li {
		display: grid;
		row-gap: 5px;
		picture {
			display: flex;
			justify-content: center;
			img {
				width: 100%;
				height: auto;
				object-fit: contain;
			}
		}
		.flower_name {
			text-align: center;
			font-size: clamp(16px,1.8vw,18px);
			font-weight: 500;
		}
		.flower_price {
			display: grid;
			justify-content: center;
			span {
				color: var(--red);
				font-size: clamp(16px,1.8vw,18px);
				font-weight: bold;
			}
			small {
				color: var(--red);
				font-size: clamp(12px,1.4vw,14px);
				font-weight: 500;
			}
		}
	}
}

.flower_memo {
	text-align: right;
	margin-top: 3vh;
}

.form_table tr > td {
	row-gap: 10px;
}

.form_table tr > td > dl {
	display: grid;
	grid-template-columns: 34% 63%;
	align-items: stretch;
	gap: 5px 10px;
	@media screen and (max-width: 599px) {
		grid-template-columns: 1fr;
	}
	dt {
		background: var(--primary-pale);
		padding: 2px 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-feature-settings: 'palt';
		span {
			color: var(--red);
		}
	}
}

.name_plate > p {
	display: grid;
	row-gap: 5px;
}

.date > p > label {
	display: flex;
	align-items: center;
	gap: 5px;
}

.date_input {
	width: 4em !important;
}


.order_list {
	display: grid;
	row-gap: 2rem;
	margin-bottom: 10vh;
}