@charset "UTF-8";

/*デリバリーメニュー*/
.p-delivery-menu {
	--color_white: #fff;
	--color_black: #000;
	--color_gray_light: #F2F2F2;
	--color_gray: #C5C5C5;
	--color_gray_dark: #707070;
	--color_yellow_light: #fffed0;
	--color_yellow: #fffb24;
	--color_yellow_dark: #FFAF00;
	--color_red: #971B30;
	--color_blue_light: #ECFAFB;
	--color_blue_dark: #121659;

	.g-pagetop {

		@media (width <= 767px) {
			margin-bottom: 60px;
		}
	}

	.c-shop_info_catch {}

	.u-color_red { color: var(--color_red); }
	.u-color_black { color: var(--color_black); }

	.u-font_14 { font-size: 1.4rem; }
	.u-font_18 { font-size: 1.8rem; }

	.u-align_right { text-align: right; }

	.u-title {
		line-height: 1.25;

		&.-mid {
			margin-top: 120px;
			padding: 40px 0 0;
			border-top: 2px solid var(--color_gray);
			position: relative;

			&:after {
				content: '';
				width: calc(100% / 5);
				height: 2px;
				display: block;
				background-color: var(--color_black);
				position: absolute;
				top: 0;
				left: 0;
				translate: 0 -100%;
				z-index: 10;
			}

			.name {
				font-size: 2.4rem;
				font-weight: 500;
				font-style: normal;

				@media (width <= 767px) {
					font-size: 2.2rem;
				}
			}

			& + * {
				margin-top: 40px;
			}

			&.-invert {
				margin-top: 60px;
				padding: 0 0 20px;
				border-top: 0;
				border-bottom: 2px solid var(--color_gray);

				&:after {
					top: auto;
					bottom: 0;
					translate: 0 100%;
				}
			}
		}

		&.-low {
			padding: 0 0 20px;
			position: relative;
			
			&:after {
				content: '';
				width: 100px;
				height: 2px;
				display: block;
				background-color: var(--color_black);
				position: absolute;
				bottom: 0;
				left: 0;
			}

			.name {
				font-size: 1.8rem;
				font-weight: 700;
				font-style: normal;
			}

			& + * {
				margin-top: 20px;
			}
		}

		&.-small {

			.name {
				font-weight: 400;

				.note_small {
					font-size: 1.3rem;
					letter-spacing: 0;
					opacity: .75;
				}
			}

			& + input,
			& + select {
				width: 100%;
				margin-top: 10px;
			}

			& + .u-flex {
				width: 100%;
				margin-top: 20px;
			}
		}
	}

	.u-flex {
		display: flex;
	}

	.u-table {

		th {
			font-weight: 700;
			text-align: left;
			width: calc(310px - 30px);
			padding: 30px 0 20px;
		}

		td {
			width: calc(100% - 310px);
			padding: 15px 0;

			@media (width <= 767px) {
				padding-bottom: 25px
			}

			&.padding-large {
				padding-top: 25px

				@media (width <= 767px) {
					padding-top: 15px
				}
			}
		}
	}


	.c-order-floating {
		width: 260px;
		margin: 0 20px 0 0;
		position: fixed;
		bottom: 180px;
		right: 0;
		z-index: 50;
		opacity: 0;
		translate: 30px 0;
		transition:
			opacity .6s,
			translate .6s;
		;

		@media (width <= 1023px) {
			bottom: 120px;

			@media (width <= 767px) {
				width: 100%;
				margin: 0;
				right: 50%;
				bottom: 0;
				translate: 50% 20px;
			}
		}

		&.active {
			opacity: 1;
			translate: 0 0;

			@media (width <= 767px) {
				translate: 50% 0;
				transition: .6s;
			}
		}

		&.is-stopped {
			position: absolute;
			bottom: 80px;

			@media (width <= 767px) {
				width: calc(100% - (20px * 2));
			}
		}

		.button {
			width: 100%;
			height: 90px;
			padding: 0 0 .2em;
			display: block;
			border-radius: 10px;
			background: linear-gradient(to right,  #711717 0%,#a43838 50%,#711717 100%);
			border: 1px solid var(--color_white);

			@media (width <= 767px) {
				height: 80px;
				border-radius: 0;
				border: 0;
			}

			&:hover {
				filter: brightness(125%);
			}
		}

		.name {
			color: var(--color_white);
			font-size: 2rem;
			font-weight: 700;
			text-align: left;
			padding: 0 0 0 50px;
			display: inline-block;
			position: relative;

			@media (width <= 767px) {
				font-size: 2.2rem;
			}

			small {
				font-size: 1.4rem;
				font-weight: 700;
			}

			&:before {
				content: '';
				vertical-align: top;
				width: 2em;
				height: 2em;
				display: inline-block;
				background: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_cart_01.svg) no-repeat center / 100% auto;
				position: absolute;
				top: 50%;
				left: 0;
				translate: 0 calc(-50% + .15em);
			}
		}
	}
	
	.g-content {
		
		&:after {
			content: '';
			width: 100%;
			height: 800px;
			display: block;
			background: var(--color_blue_light);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
	}
	
	.g-main {
		background: var(--color_white);
		position: relative;

		img {
			width: 100%;
			max-width: none;
		}
	}
	
	.g-pageTitle {
		padding: 120px 0 60px;
		background-image: url("/assets/img/business/delivery-caterrings/delivery-menu/title_en.svg");
		background-size: 390px auto;

		@media (width <= 767px) {
			background-size: 300px auto;
			background-position: bottom 25% left 50%;
		}
	}	
	
	.c-shop_info_catch {
		color: var(--color_black);
		font-size: 2.6rem;

		@media (width <= 767px) {
			font-size: 2.2rem;
		}
	
		& + .c-section_lead {
			display: flex;
			justify-content: center;

			.text {
				display: inline-block;

				@media (width <= 767px) {
					line-height: 1.75;
				}
			}
		}
	}

	label {
		color: var(--color_blue_dark);
		font-weight: 700;
		cursor: pointer;
		position: relative;
		user-select: none;

		@media (width <= 767px) {
			font-size: 1.8rem;
		}

		&:hover {
			opacity: .8;
		}

		small {
			font-size: .85em;
			font-weight: 700;
			display: inline-block;
			margin-inline: .1em;
		}
	}

	input {

		&[type="checkbox"] {
			position: absolute;
			width: 0px;
			height: 0px;
			z-index: -1;

			& + label {
				font-size: 1.8rem;
				margin: 0 0 1.5em;
				display: inline-block;

				&:before {
					content: '';
					width: 1.35em;
					height: 1.35em;
					vertical-align: sub;
					margin: 0 .5em 0 0;
					display: inline-block;
					border-radius: 3px;
					background-color: var(--color_white);
					border: 2px solid var(--color_gray_dark);
				}
			}

			&:checked + label {
				color: var(--color_red);

				&:before {
					background-color: var(--color_red);
					background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_check_01.svg);
					background-position: center;
					background-size: 95% auto;
					background-repeat: no-repeat;
					border: 2px solid var(--color_red);
				}
			}
		}

		&[type="radio"] {
			position: absolute;
			width: 0px;
			height: 0px;
			z-index: -1;

			& + label {
				font-size: 1.8rem;
				margin: 0 0 1.25em;
				display: inline-block;

				&:before {
					content: '';
					width: 1.35em;
					height: 1.35em;
					vertical-align: sub;
					margin: 0 .5em 0 0;
					display: inline-block;
					border-radius: 100vmax;
					background-color: var(--color_white);
					border: 2px solid var(--color_gray_dark);
				}
			}

			&:checked + label {
				color: var(--color_red);

				&:before {
					background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_circle_01_red.svg);
					background-position: center;
					background-repeat: no-repeat;
					background-size: 65% auto;
					border: 2px solid var(--color_red);
				}
			}
		}
	}
	
	.c-filter {
		padding: 70px 0 0;

		@media (width <= 767px) {
			padding-top: 30px;
			padding-bottom: 40px;
			background-color: var(--color_blue_light);
		}

		.u-inner {
			max-width: 1360px;
		}

		.c-filter__inner {
			padding: 0 20px 65px;
			display: flex;
			background-color: var(--color_white);
			border-radius: 6px;
			border: 1px solid #B7B8CD;

			@media (width <= 767px) {
				padding: 0;
				flex-direction: column;
				border: 0;
				background-color: transparent;
			}
		}

		.c-filter__container {
			width: calc(100% / 3);
			margin: 30px 0 40px;
			padding: 0 20px;
			position: relative;

			@media (width <= 767px) {
				width: calc(100% / 1);
				margin: 10px 0 0;
				padding: 0;
				background-color: var(--color_white);
				border-radius: 6px;
				border: 1px solid #B7B8CD;
			}

			& + & {
				border-left: 1px solid #E1E2EA;
			}

			.note {
				font-size: 1.2rem;
				line-height: 1.5;
				letter-spacing: 0;
				text-indent: -1em;
				padding: .5em 0 0 1em;
			}
		}

		.c-filter_title {
			color: var(--color_white);
			font-size: 1.8rem;
			font-weight: 700;
			text-align: center;
			line-height: 1;
			width: calc(100% - (20px * 2));
			padding: 13px 0 17px;
			background-color: var(--color_blue_dark);
			border-radius: 6px 6px 0 0;
			position: absolute;
			translate: 0 calc(-100% - 30px);

			@media (width <= 767px) {
				width: calc(100% + (1px * 2));
				margin: -1px -1px 0;
				padding: 19px 0 22px;
				border-radius: 6px;
				translate: 0 0;
				position: relative;

				&:after {
					content: '';
					width: 12px;
					height: 12px;
					margin: 0 20px 0 0;
					border-top: 4px solid var(--color_white);
					border-right: 4px solid var(--color_white);
					rotate: 135deg;
					position: absolute;
					top: calc(50% - 2px);
					right: 0;
					translate: 0 -50%;
				}

				&.is-open {
					border-radius: 6px 6px 0 0;

					&:after {
						top: calc(50% + 2px);
						rotate: calc(135deg + 180deg);
					}
				}
			}
		}

		.c-filter__items {
			max-height: none;
			display: block;

			@media (width <= 767px) {
				max-height: 0;
				padding: 0 20px;
				overflow: hidden;

				& > *:first-of-type {
					margin-top: 20px;
				}
			}
		}

		.-data {

			.c-filter__items {

				@media (width <= 767px) {
					display: flex;
					flex-wrap: wrap;
				}
			}
			
			.c-filter__item {

				@media (width <= 767px) {
					width: calc(100% / 2);
					margin-top: 0;

					&:nth-child(1) {
						margin-top: 20px;
					}

					&:nth-child(2) {
						margin-top: 20px;
					}
				}
			}
		}

		.-allergen {

			.c-filter__items {
				margin-inline: -5px;
				display: flex;
				flex-wrap: wrap;

				& > *:not(.note) {
					width: calc(100% / 8);
					padding: 5px;

					@media (width <= 767px) {
						width: calc(100% / 10);

						&:nth-child(-n + 7) {
							margin-top: 20px;
						}

						&:last-of-type {
							margin-bottom: 20px;
						}
					}

					@media (width <= 1023px) {
						width: calc(100% / 6);

						@media (width <= 767px) {
							width: calc(100% / 7);
						}
					}
				}

				.note {
					width: 100%;
					margin-inline: auto;
					display: block;

					@media (width <= 767px) {
						margin-top: -10px;
						margin-bottom: 20px
					}
				}
			}


			input {
			
				& + label {
					width: 100%;
					margin-bottom: 0;

					&:before {
						display: none;
					}
				}

				&:checked + label img {
				}
			}
		}
		
		.c-filter__button {
			margin: 0 0 30px;
			padding: 0 0 .15em;
			position: absolute;
			bottom: 0;
			left: 50%;
			translate: -50% 0;

			@media (width <= 767px) {
				text-align: center;
				margin: 20px 0 0;
				position: relative;
				left: auto;
				bottom: auto;
				translate: 0 0;
			}

			.button {
				color: var(--color_white);
				width: 500px;
				height: 50px;
				background-color: var(--color_red);
				border-radius: 5px;

				@media (width <= 767px) {
					width: calc(100% - (40px * 2));
					height: 65px;
				}

				&:hover {
					filter: brightness(125%);
				}
			}

			.name {
				font-size: 2rem;
				font-weight: 700;

				@media (width <= 767px) {
					font-size: 2rem;
				}

				&:before {
					content: '';
					vertical-align: middle;
					width: 1.1em;
					height: 1.1em;
					margin: 0 .25em 0 0;
					display: inline-block;
					background: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_sort_01.svg) no-repeat center / 100% auto;
				}
			}
		}
	}

	.c-deli-card {

		.u-inner {
			max-width: calc(1290px + (35px * 2));
		}

		.c-deli-card__items {
			margin-inline: -20px;
			display: flex;
			flex-wrap: wrap;

			@media (width <= 767px) {
				flex-direction: column;
			}

		}

		.c-deli-card__item {
			width: calc(100% / 3);
			padding: 100px 20px 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			@media (width <= 767px) {
				width: calc(100% / 1);
				padding-top: 60px;
			}
		}

		.image {
			background-color: var(--color_gray_light);

			@media (width <= 767px) {
				padding-inline: 30px;
			}

			& + * {
				margin: 35px 0 0;
			}
			
			img {
				width: 100%;
				height: 100%;
				max-height: 200px;
				max-width: none;
				object-fit: contain;
				object-position: center;
				transition: scale .6s;
			}

			a {

				&:hover {

					img {
						scale: 1.05;
					}
				} 
			}
		}

		.title {
			line-height: 1.35;
			position: relative;

			.sub {
				color: var(--color_gray_dark);
				width: 100%;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				translate: 0 -100%;
			}

			.main {
				font-size: 2.2rem;
				font-weight: 700;
				font-style: normal;
				margin: 5px 0 0;
				display: block;

				@media (width <= 767px) {
					font-size: 2rem;
				}
			}
		}

		.price {
			color: var(--color_red);
			font-size: 2rem;
			font-weight: 700;
			margin: 10px 0 0;
			display: block;

			small {
				font-size: 1.4rem;
				font-weight: 700;
			}
		}

		.read {
			color: var(--color_gray_dark);
			line-height: 1.75;
			letter-spacing: 0;
			margin: 10px 0 0;
			flex-grow: 1;

			@media (width <= 767px) {
				margin-top: 15px;
			}
		}

		.allergen-list {
			margin: 15px -2px 0;
			display: flex;
			flex-wrap: wrap;

			& > * {
				width: calc(100% / 12);
				list-style: none;
				padding: 2px;

				@media (width <= 1022px) {
					width: calc(100% / 10);
				}
			}
		}

		.c-deli-card__input {
			margin: 30px 0 0;
			padding: 35px 0 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			flex-shrink: 0;
			border-top: 1px solid var(--color_gray);
			flex-shrink: 0;

			input {
				font-size: 1.8rem;
				font-weight: 700;
				text-align: right;
				width: 4em;
				margin: -.45em 0 0 10px;
				padding: 5px;
				border: 1px solid var(--color_gray_dark);
				border-radius: 5px;
				transition: .3s;
				cursor: pointer;

				&:hover {
					border-color: var(--color_red);
				}

				&:focus {
					background-color: var(--color_yellow_light);
					border-color: var(--color_red);
					box-shadow: 0 0 5px 0 color-mix(in srgb, var(--color_red), var(--color_white) 50%);
				}
			}

			.limit {
				color: var(--color_red);
				text-align: right;
				width: 100%;
				margin: 15px 0 0;
				display: block;
			}
		}

		&.-drink {
			margin: 120px 0 0;

			.c-deli-card__items {

				@media (width <= 767px) {
					margin-inline: -5px;
					flex-direction: row;
				}
			}
			
			.c-deli-card__item {
				width: calc(100% / 6);
				padding-top: 0;

				@media (width <= 767px) {
					width: calc(100% / 2);
					margin-bottom: 40px;
					padding-inline: 5px;
				}
			}
			
			.image {
				
				& + * {
					margin-top: 20px;
				}
			}

			.title {
				flex-grow: 1;

				.main {
					font-size: 1.8rem;
				}
			}

			input {
				margin-top: -8px !important;
			}
		}
	}

	.c-order-button {
		margin: 100px 0 0;
		position: relative;
		z-index: 4;
		translate: 0 50%;

		@media (width <= 767px) {
			margin-top: 0;
		}

		.u-inner {
			max-width: calc(1080px + (35px * 2));
		}

		.button {
			width: 100%;
			height: 90px;
			padding: 0 0 .2em;
			display: block;
			border-radius: 10px;
			background: linear-gradient(to right,  #711717 0%,#a43838 50%,#711717 100%);

			@media (width <= 767px) {
				border-radius: 8px;
			}

			&:hover {
				filter: brightness(125%);
			}

			.name {
				color: var(--color_white);
				font-size: 3rem;
				font-weight: 700;
				letter-spacing: .1em;

				@media (width <= 767px) {
					font-size: 2.4rem;
				}

				&:before {
					content: '';
					vertical-align: top;
					width: 1.5em;
					height: 1.5em;
					margin: 0 .25em 0 0;
					display: inline-block;
					background: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_cart_01.svg) no-repeat center / 100% auto;
				}
			}
		}
		
		&.-sub {
			translate: 0 0;
			
				.button {
					max-width: 600px;
					margin-inline: auto;
					height: 70px;
					background: linear-gradient(to right, #ccc 0%, #ddd 50%, #ccc 100%);
					
					&:hover {
						filter: brightness(90%);
					}
					
					.name {
						color: var(--color_gray_dark);
						font-size: 2.4rem;
						
						@media (width <= 767px) {
							font-size: 2rem;
						}
					}
				}
		}
		
		&.-return {
			margin-top: -60px;
			margin-bottom: 90px;

			& .button {
				& .name {
					&:before {
						background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_return_01.svg);
					}
				}
			}
		}
	}

	
	.c-guide {
		padding: 20px 0 120px;
		background-color: #F5FCFD;

		@media (width <= 767px) {
			font-size: 1.5rem;
			padding-bottom: 60px;
		}

		ul {

			li {
				font-size: 1.8rem;
				line-height: 1.5;
				list-style: none;
				padding: 0 0 0 1em;
				position: relative;

				@media (width <= 767px) {
					line-height: 1.5;
				}

				&:before {
					content: '';
					width: .35em;
					height: .35em;
					margin: .65em 0 0 .25em;
					background-color: var(--color_black);
					border-radius: 100vmax;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

		.u-inner {
			max-width: calc(1080px + (35px * 2));
		}

		.c-guide__items {
			counter-reset: number 0;
		}

		.c-guide__item {
			font-size: 1.8rem;
			line-height: 1.5;
			margin: 1em 0 0;
			padding: 0 0 0 1.75em;
			position: relative;

			@media (width <= 767px) {
				line-height: 1.5;
			}

			&:before {
				counter-increment: number 1;
				content: counter(number);
				color: var(--color_white);
				font-size: 1.4rem;
				font-weight: 700;
				width: 1.5em;
				height: 1.5em;
				margin: .35em 0 0 0;
				padding: 0 0 .1em;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--color_black);
				border-radius: 100vmax;
				position: absolute;
				top: 0;
				left: 0;

				@media (width <= 767px) {
					margin-top: .15em;
				}
			}
		}

		.c-guide-place__container {
			padding: 0 0 60px;
			display: flex;

			@media (width <= 767px) {
				padding-bottom: 30px;
				flex-direction: column;
			}

			& > * {
				width: calc(100% / 2);
				border-left: 1px solid var(--color_gray);
				padding: 0 40px;

				@media (width <= 767px) {
					width: calc(100% / 1);
					border-left: 0;
					padding: 0 0 20px;
				}
			}
		}
	}

	.c-inquiry {
		padding: 80px 0 100px;
		background-color: var(--color_blue_light);

		@media (width <= 1023px) {
			padding-bottom: 160px;

			@media (width <= 767px) {
				padding-top: 60px;
				padding-bottom: 180px;
			}
		}

		.u-inner {
			max-width: calc(1080px + (35px * 2));
		}
		
		.c-inquiry__title {
			font-size: 2.4rem;
			font-weight: 500;
			text-align: center;

			& + * {
				margin-top: 20px;
			}
		}

		.c-inquiry__cotainer {
			max-width: calc(100% / 6 * 4);
			margin-inline: auto;
			display: flex;
			border: 1px solid var(--color_gray_dark);
			background-color: var(--color_white);

			@media (width <= 1023px) {
				flex-direction: column;
			}

			@media (width <= 767px) {
				max-width: none;
			}

			& > * {
				width: calc(100%);
				padding: 20px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				@media (width <= 1023px) {
					width: calc(100% / 1);
				}

				& + & {
					border-left: 1px solid var(--color_gray_dark);

					@media (width <= 1023px) {
						border-left: 0;
						border-top: 1px solid var(--color_gray_dark);
					}
				}
			}
		}

		.c-inquiry__item {
			padding: 15px 0 15px 60px;
			position: relative;

			@media (width <= 767px) {
				padding-left: 45px;
			}

			.main {
				font-size: 3.2rem;
				font-weight: 700;
				font-style: normal;
				display: block;

				@media (width <= 767px) {
					font-size: 2.8rem;
				}

				& + * {
					margin-top: 10px;
				}
			}

			small {
				font-size: 1.6rem;
				font-weight: 700;
				display: block;

				@media (width <= 767px) {
					font-size: 1.4rem;
					font-weight: 500;
					letter-spacing: 0;
				}
			}

			&:after {
				content: '';
				width: 46px;
				height: 46px;
				display: block;
				background-color: var(--color_black);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 90% auto;
				border-radius: 100vmax;
				position: absolute;
				top: 50%;
				left: 0;
				translate: 0 -50%;

				@media (width <= 767px) {
					width: 36px;
					height: 36px;
				}
			}

			&.-tel {

				&:after {
					background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_tel_01.svg);
				}
			}

			&.-fax {

				&:after {
					background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_fax_01.svg);
				}
			}

			&.-mail {

				@media (width <= 1023px) {
					padding-block: 30px;

					@media (width <= 767px) {
						width: calc(100% - 50px);
						padding-block: 10px;
					}
				}

				.main {
					font-size: 1.8rem;

					@media (width <= 767px) {
						font-size: 1.4rem;
						line-height: 1.5;
					}
				}

				&:after {
					background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_mail_01.svg);
				}
			}
		}
	}
}

.p-order {

	.u-inner {
		max-width: calc(1290px + (35px * 2));
	}
	
	&.p-delivery-menu {
		& .g-content {
			&:after {
				height: 295px;

				@media (width <= 767px) {
					height: 240px;
				}
			}
		}

		.g-pageTitle {
			padding: 120px 0 60px;
			background-size: 390px auto;

			@media (width <= 767px) {
				padding: 100px 0 60px;
				background-size: 300px auto;
				background-position: bottom 25% left 50%;
			}
		}
	}

	.c-form-intro {
		color: #707070;
		text-align: center;
		padding: 20px 0 0;

		@media (width <= 1022px) {
			padding-top: 30px;
		}

		.u-text {
			font-size: 2rem;
			line-height: 1.75;

			@media (width <= 767px) {
				font-size: 1.4rem;
			}

			& + & {
				margin-top: 30px;
			}
		}

		.attention {
			color: var(--color_red);
			background-color: #FFFAC9;
			border: 1px solid var(--color_red);
			border-radius: 3px;
			padding: .5em 1em .6em;

			em {
				font-style: normal;
				font-weight: 700;
				display: inline-block;
				margin: 0 .25em;

				@media (width <= 767px) {
					display: block;
				}
			}

			small {
				font-size: 1.4rem;
				font-weight: 400;

				@media (width <= 767px) {
					font-size: 1.2rem;
					display: block;
				}
			}
		}
	}

	.c-order-list {

		& + * {
			margin-top: 60px;
		}

		.items {
			margin-top: 0;
		}

		.item {
			font-size: 1.8rem;
			padding: 20px 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #C5C5C5;
			position: relative;

			@media (width <= 767px) {
				padding: 15px 0 20px;
			}
		}

		.image {
			text-align: center;
			width: 200px;
			background-color: #f6f6f6;
			padding: 10px 20px;

			@media (width <= 1022px) {
				width: 40%;

				@media (width <= 767px) {
					width: 30%;
				}
			}
			
			img {
				object-fit: contain;
				max-height: 126px;
				
				@media (width <= 767px) {
					max-height: 60px;
				}
			}
		}

		.data {
			width: calc(100% - 200px);
			padding: 0 0 0 40px;
			display: flex;
			align-items: center;

			@media (width <= 1022px) {
				width: calc(100% - 40%);
				padding: 0 0 0 40px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				@media (width <= 767px) {
					width: calc(100% - 30%);
					padding: 0 0 0 20px;
				}
			}

			.name {
				width: 260px;
				flex-grow: 1;

				@media (width <= 1022px) {
					width: 100%
				}

				.title {

					.main {
						font-size: 2.2rem;
						font-weight: 700;
						font-style: normal;
						line-height: 1.25;
						margin: 15px 0 0;
						display: block;

						@media (width <= 1022px) {
							font-size: 1.8rem;
							margin-top: 10px;
						}
					}

					.sub {
						color: var(--color_gray_dark);
						font-size: 1.4rem;

						@media (width <= 1022px) {
							font-size: 1.1rem;
						}
					}
				}
			}

			.count {
				margin: 20px 0 0;
				display: flex;

				@media (width <= 1022px) {
					margin-top: 0;
					flex-direction: column;
				}

				& > * {
					margin-right: 1em;
				}

				em {
					font-weight: 700;
					font-style: normal;

					@media (width <= 1022px) {
						font-size: 1.4rem;
						margin: 10px 0 0;
						display: inline-block;
					}
				}

				small {
					font-size: 1.2rem;

					@media (width <= 1022px) {
						font-size: 1rem;
					}
				}
			}

			.result {
				font-size: 1.6rem;
				text-align: right;
				flex-shrink: 0;
				font-feature-settings: 'palt';
				background-color: #F1F1F1;
				border-radius: 5px;
				padding: 10px 15px;

				@media (width <= 1022px) {
					width: 100%;
					margin: 20px 0;

					@media (width <= 767px) {
						margin: 10px 0;
					}
				}

				& > * {
					padding-block: .35em;

					@media (width <= 1022px) {
						padding-block: .35em;
						text-align: left;
						padding-block: .2em;
					}
				}

				small {
					font-size: 1.2rem;

					@media (width <= 1022px) {
						font-size: 1rem;
					}
				}
			}

			.price {
				font-size: 2.4rem;
				font-weight: 700;
				flex-shrink: 0;
				padding-left: 20px;

				@media (width <= 1022px) {
					width: 100%;
					text-align: right;

					@media (width <= 767px) {
						font-size: 1.8rem;
						width: 100%;
						padding-left: 0;
					}
				}

				small {
					font-size: 1.4rem;

					@media (width <= 1022px) {
						font-size: 1rem;
					}
				}
			}
		}

		.total {
			padding: 30px 0 0;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			font-feature-settings: 'palt';

			@media (width <= 1022px) {
				flex-wrap: wrap;
			}

			@media (width <= 767px) {
				padding-top: 20px;
				flex-direction: column;
			}

			.u-text {
				font-size: 1.8rem;
				padding-left: 1em;

				&:nth-child(4) {

					@media (width <= 1022px) {
						text-align: right;
						width: 100%;
						margin-top: 15px;
					}
				}

				@media (width <= 767px) {
					font-size: 1.6rem;
				}

				& + & {

					@media (width <= 767px) {
						margin-top: 15px;
					}
				}
			}

			em {
				font-weight: 700;
				font-style: normal;

				&.u-color_red {
					color: var(--color_red);
					font-size: 3rem;
					vertical-align: baseline;

					@media (width <= 767px) {
						font-size: 2.4rem;
					}
				}

				small {
					font-size: 1.4rem;

					@media (width <= 767px) {
						font-size: 1.1rem;
					}
				}
			}

			small {
				font-size: 1.4rem;
			}
		}

		.total-note {
			color: var(--color_gray_dark);
			font-size: 1.3rem;
			line-height: 1.5;
			text-align: right;
			letter-spacing: 0;
			margin-top: 20px;
		}
	}

	.c-order-details {
		padding: 20px;
		background-color: #F1F1F1;
		border-radius: 5px;

		@media (width <= 767px) {
			padding: 8px;
		}

		.inner {
			padding: 20px 40px;
			border-radius: 3px;
			background-color: var(--color_white);

			@media (width <= 767px) {
				padding: 20px 15px;
			}
		}
	}

	form {

		em {
			font-style: normal;
			font-weight: 700;
		}

		li {
			list-style: none;
		}

		.u-flex {
			align-items: center;

			@media (width <= 767px) {
				flex-wrap: wrap;
			}

			& > *:not(.u-flex) {
				padding-right: 1em;

				input,
				select {
					margin-right: -.5em;
				}
			}

			&.-column {
				flex-direction: column;
				align-items: flex-start;

				& > * {
					width: 100%;
					padding-right: 0;

					& + & {
						padding-top: 20px;
					}
				}
			}
		}

		.u-table {

			th {
				vertical-align: top;
				width: 270px;

				@media (width <= 1022px) {
					width: 220px;

					@media (width <= 767px) {
						width: 100%;
						padding-top: 0;
						padding-bottom: 0;
						display: block;
					}
				}

				small {
					color: var(--color_gray_dark);
					font-size: 1.3rem;
					font-weight: 400;
					margin-top: .75em;
					display: block;
				}
			}

			td {
				width: calc(100% - 270px);

				@media (width <= 1022px) {
					width: calc(100% - 220px);

					@media (width <= 767px) {
						width: 100%;
						display: block;
					}
				}

				.u-text {
					font-size: 1.4rem;
					line-height: 1.75;

					@media (width <= 767px) {
						margin-top: 1em;
					}
				}
			}

			.require {

				&:after {
					content: '必須';
					color: var(--color_white);
					font-size: 1.3rem;
					font-weight: 700;
					margin: 0 .5em;
					padding: .275em .5em .5em;
					display: inline-block;
					background-color: var(--color_red);
					border-radius: 5px;
					translate: 0 -.15em;
				}
			}
		}

		.note {
			color: var(--color_gray_dark);
			font-size: 1.4rem;
			line-height: 1.5;
			background-color: #F1F1F1;
			border-radius: 5px;
			margin: 20px 0 0;
			padding: 15px 20px;

			@media (width <= 767px) {
				font-size: 1.2rem;
			}

			.u-text {

				& + * {
					margin-top: 5px;
				}
			}

			li {
				display: flex;

				& > *:nth-child(2) {
					flex-grow: 1;
				}

				&:before {
					content: attr(data-note);
					flex-shrink: 0;
				}
			}
		}

		input,
		textarea {
			width: 100%;
			margin: 0 0 0 0;
			padding: .75em 1em;
			border: 1px solid var(--color_gray_dark);
			border-radius: 5px;
			transition: .3s;
			cursor: pointer;

			@media (width <= 767px) {
				padding: .5em .75em;
			}

			&.-width_short {
				width: 5em;
			}

			&:hover {
				border-color: var(--color_red);
			}

			&:focus,
			&.active {
				color: var(--color_black);
				background-color: var(--color_yellow_light);
				border-color: var(--color_red);
				box-shadow: 0 0 5px 0 color-mix(in srgb, var(--color_red), var(--color_white) 50%);
			}

			&[type="radio"] {

				& + label {
					color: inherit;
					margin: 0;

					small {
						font-weight: 400;

						@media (width <= 767px) {
							font-size: 1.2rem;
							margin: 10px 0 0;
							display: block;
						}
					}
				}
			}
		}
		
		textarea {
			min-height: 260px;
		}

		select {
			margin: 0;
			padding: .75em 1em;
			border: 1px solid var(--color_gray_dark);
			border-radius: 5px;
			transition: .3s;
			cursor: pointer;

			@media (width <= 767px) {
				padding: .5em .75em;
			}

			&:hover {
				border-color: var(--color_red);
			}

			&:focus {
				color: var(--color_black);
				background-color: var(--color_yellow_light);
				border-color: var(--color_red);
				box-shadow: 0 0 5px 0 color-mix(in srgb, var(--color_red), var(--color_white) 50%);
			}
		}

		.order-people-items {

			@media (width <= 1022px) {
				flex-direction: column;
				align-items: flex-start;

				.u-flex {
					& + .u-flex {
						margin-top: 20px;

						& > *:nth-of-type(1) {
							width: 4.25em;
						}
					}
				}

			}

		}

		.order-people-total {
			text-align: right;
			margin: 10px 0 0;
			flex-grow: 1;

			em {
				font-size: 2.4rem;
				vertical-align: text-bottom;
				margin: 0 .15em;
				display: inline-block;
				translate: 0 -.1em;
			}
		}

		.c-delivery-info {

			.note {

				@media (width <= 767px) {
					margin-top: 0;
				}
			}
		}

		.tab_container {
			padding-top: 25px;

			.tab_buttons {
				display: flex;
				justify-content: space-between;

				input {

					& + label {
						color: #333;
						text-align: center;
						width: calc(100% / 2 - 4px);
						height: 80px;
						padding-bottom: 5px;
						background-color: #DEDEDE;
						border-top: 8px solid #DEDEDE;
						border-right: 2px solid #DEDEDE;
						border-left: 2px solid #DEDEDE;
						border-radius: 5px 5px 0 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						@media (width <= 767px) {
							line-height: 1.35;
							padding-bottom: 4px;
						}

						&:before {
							display: none;
						}
						
						small {
							font-size: 1.4rem;
							line-height: 1.25;
							letter-spacing: 0;
							margin: .5em 0 0;
							display: block;
							
							@media (width <= 767px) {
								font-size: 1.1rem;
							}
						}
					}

					&:checked + label {
						padding-top: 15px;
						background-color: var(--color_white);
						position: relative;

						&.delivery_jal {
							color: var(--color_red);
							border-color: var(--color_red);
						}

						&.delivery_ana {
							color: #00146e;
							border-color: #00aff0;
						}

						&:hover {
							opacity: 1;
						}

						&:after {
							content: '';
							width: 100%;
							height: 2px;
							display: block;
							background-color: var(--color_white);
							position: absolute;
							bottom: 0;
							left: 0;
							z-index: 10;
							translate: 0 100%
						}
					}
				}

				label {

					@media (width <= 767px) {
						font-size: 1.6rem;
					}
				}
			}

			.tab-contents {
				margin-bottom: 40px;
				border-radius: 0 0 5px 5px;

				.tab-panel {
					padding: 40px 60px;

					@media (width <= 767px) {
						padding: 20px 20px 40px;
					}

					&.-jal {
						border: 2px solid var(--color_red);
					}

					&.-ana {
						border: 2px solid #00aff0;

						& input {
							&[type="radio"] {
								&:checked + label {
									color: #00146e;

									&:before {
										border: 2px solid #00146e;
										background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_circle_01_blue.svg);
									}
								}
							}
						}

						& input,
						& textarea,
						& select {
							&:hover {
								border-color: #00aff0;
							}

							&:focus,
							&.active {
								border-color: #00aff0;
								box-shadow: 0 0 5px 0 
								color-mix(in srgb, #00aff0, var(--color_white) 50%);
							}
						}
					}
				}

				.u-title {
					margin-top: 40px;

					&:nth-of-type(1) {
						margin-top: 0;
					}

					& + * {
						margin-top: 30px;
					}
				}

				label {

					@media (width <= 767px) {
						font-size: 1.6rem;
					}
				}

				input {
					font-size: 1.5rem;
					width: auto;
					max-width: 100%;
					margin-inline: .5em;
					padding: .35em 1em;

					& + label {
						font-weight: 400;
						width: 100%;
					}
					
					&[type="radio"] {
						clip: rect(0, 0, 0, 0);
					}
				}

				select {
					font-size: 1.5rem;
					margin-inline: .5em;
					padding: .35em 1em;

					@media (width <= 499px) {
						max-width: 100%;
					}
				}

				.note {
					font-size: 1.2rem;
					margin-top: 0;
					margin-bottom: 10px;
					padding: 10px 15px;
					display: inline-block;
				}
			}
		}

		.c-use-ransport {
			
			.u-table {

				tr {

					&:nth-of-type(n + 2) {

						.u-title {
							margin-top: -20px;
						}
					}
				}

				td {

					& > .u-flex {

						@media (width <= 767px) {
							flex-direction: column;
							align-items: flex-start;
						}

						& > *:nth-child(n + 2) {

							@media (width <= 767px) {
								margin-top: 40px;
							}
						}
					}
				}
			}
		}

		.c-divide-class {
			margin-top: 20px;
		}

		.c-divide-class,
		.c-divide-bus {
			tr {

				&:nth-of-type(n + 1) {

					td {

						@media (width <= 1022px) {
							padding-bottom: 0;
						}
					}
				}

				&:nth-of-type(n + 2) {

					td {
						padding-top: 0;
					}
				}

				td {

					& > .u-flex {

						@media (width <= 1022px) {
							flex-wrap: wrap;
						}

						& > * {

							@media (width <= 1022px) {
								padding-bottom: 20px;
							}
						}
					}
				}

				.note {

					@media (width <= 1022px) {
						margin-top: 0;
						margin-bottom: 20px;
					}
				}
			}

			input,
			select {
				padding: .35em 1em;
			}
		}
	}

	.c-order-button {
		margin-top: 0;

		& .button {

			& .name {

				&:before {
					background-image: url(/assets/img/business/delivery-caterrings/delivery-menu/icon_send_01.svg);
				}
			}
		}
	}
}



.flatpickr-calendar {
	width: auto;
	margin: 15px 0 0 15px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--color_red);
	box-shadow: 0 0 5px 0 color-mix(in srgb, var(--color_black), var(--color_white) 75%);

	@media (width <= 767px) {


		@media (width <= 499px) {
			width: calc(100% - (23px * 2));
			margin-left: -20px;
		}
	}

	.flatpickr-innerContainer {
		margin-top: 15px;
		justify-content: center;
	}

	&.arrowBottom {
		margin-top: -50px;
	}

	&:before {
		border-width: 12px;
		margin: 0 4px;
	}

	&:after {
		border-width: 11px;
		margin: 0 5px;
	}

	&.arrowTop:before {
		border-bottom-color: var(--color_red);
	}

	&.arrowBottom:before {
		border-top-color: var(--color_red);
	}

	.flatpickr-day.selected,
	.flatpickr-day.startRange,
	.flatpickr-day.endRange,
	.flatpickr-day.selected.inRange,
	.flatpickr-day.startRange.inRange,
	.flatpickr-day.endRange.inRange,
	.flatpickr-day.selected:focus,
	.flatpickr-day.startRange:focus,
	.flatpickr-day.endRange:focus,
	.flatpickr-day.selected:hover,
	.flatpickr-day.startRange:hover,
	.flatpickr-day.endRange:hover,
	.flatpickr-day.selected.prevMonthDay,
	.flatpickr-day.startRange.prevMonthDay,
	.flatpickr-day.endRange.prevMonthDay,
	.flatpickr-day.selected.nextMonthDay,
	.flatpickr-day.startRange.nextMonthDay,
	.flatpickr-day.endRange.nextMonthDay {
		background: var(--color_red);
		-webkit-box-shadow: none;
		box-shadow: none;
		color: #fff;
		border-color: var(--color_red);
	}

	.flatpickr-current-month {

		& > * {
			margin: 0 3px;
		}
	}

	.flatpickr-day {
		line-height: 1;
		padding: 0 0 .25em;
		display: flex;
		justify-content: center;
		align-items: center;

		&.today {
			color: var(--color_white);
			font-weight: 700;
			background-color: var(--color_red);
			border-color: var(--color_red);
		}
	}
	
	& .flatpickr-prev-month,
	& .flatpickr-next-month {
		margin-top: 12px;
	}
	
	& .flatpickr-prev-month {
		margin-left: 12px;
	}
	
	& .flatpickr-next-month {
		margin-right: 12px;
	}
}

/* error */
/* エラーがあるセルの背景色 */
.is-error-field {
	/*background-color: #fff0f0 !important;*/ /* 薄い赤 */
	transition: background-color 0.3s ease;
	border-top: 3px solid white;
	
	::placeholder {
		color: red;
	}
	
	&.select-radio_button {
		color: red;
		background-color: #fff0f0;
		padding: 20px 15px 15px 15px !important;
		
		small {
			color: inherit;
		}
	}
}

/* エラー箇所の入力枠を強調する場合 */
.is-error-field input[type="text"],
.is-error-field input[type="email"],
.is-error-field select {
	color: red;
	border-color: red;
	background-color: #fff0f0;
	box-shadow: 0 0 0 1px red;
}

.is-error-field input[type="radio"]:last-of-type + label:after {
	content: '';
	color: red;
}

.c-error{
	color: #eb5757;
	font-weight: bold;
}

.c-order-button .button:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #fff !important;
}

/* confirm */
.p-confirm.p-delivery-menu {
	
		& .u-table {
			
			tr:not(:first-child) {
				border-top: 1px solid #ddd;
			}
			
			th {
				padding: 20px 0;
				
				@media (width <= 767px) {
					padding-bottom: 0;
				}
			}
			
			td {
				padding: 20px 0;
				
				p + * {
					margin-top: 10px;
				}
			}
		}
	
		.c-use-ransport {
			border-top: 1px solid #ddd;
			
			& .u-table {
				
				& tr {
					border: 0 !important;
					
					&:nth-of-type(n+2) {
						
						.u-title {
							margin-top: 0 !important;
						}
					}
					
					& .u-title {

						&.-low + .-small {
							margin-top: 20px !important;
							display: inline-block;
						}
					}
					
				}
			}
		}
	
		.c-divide-class {
			border-top: 1px solid #ddd;
			
			& tr {
					border: 0 !important;
			}
		}
	
		.c-divide-bus {
			border-top: 1px solid #ddd;
			
			& tr {
					border: 0 !important;
			}
		}
	
	.c-remarks {
		border-top: 1px solid #ddd;

		& tr {
				border: 0 !important;
		}
	}
}

/* p-complete */
.p-complete {
	
	.g-main {
		
		.c-section_lead {
			line-height: 2.5;
			text-align: center;
			margin-top: 2em;
		}
	}
}