@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
:root {
/* 共通設定 */
	--color--black: #1A1311;
	--color--white: #FFFDF9;
	--color--gray: #AAAAAA;
	--color--base : #FFFBF0;
	--color--article: #F2E8CE;
	--color--lightred: #F2E8CE;
	--color--red: #76231F;
	--color--yellow: #F99A00;
	--color--blue: #136067;
}
body {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
	background-color: var(--color--base);
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	color: #000000;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
body.scroll-stop {
	overflow: hidden;
}

.barlow {
	font-family: "Barlow", sans-serif;
}

#wrap {
	padding: 160px 0 0;
}
#wrap:not(.top) {
	background-image: url('../image/page-spices@pc.webp');
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 100% auto;
}

#l_wrapper {
	position: relative;
	z-index: 3;
}

header {
	width: 100%;
	height: 160px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	pointer-events: none;
	transition: .4s;
}
header.scrolled {
	background-color: var(--color--base);
	pointer-events: auto;
}
	.header__inner {
		width: calc((1000 / 1280) * 100%);
		height: 0;
		margin: 0 auto;
		position: relative;
		pointer-events: auto;
	}
		.header__copy {
			width: 300px;
			height: auto;
			padding: 7px 0 9px;
			border-top: solid 1px var(--color--black);
			border-bottom: solid 1px var(--color--black);
			position: absolute;
			top: 75px;
			left: 0;
			transition: .4s;
		}
			.header__copy__txt {
				width: 100%;
				height: auto;
				font-size: 16px;
				font-weight: 700;
				line-height: calc(24 / 16);
				letter-spacing: 0.15em;
				text-align: center;
			}
		.header__logo {
			width: 369px;
			height: auto;
			position: absolute;
			top: 30px;
			left: 50%;
			transform: translate(-50%,0%);
			transition: .4s;
		}
			.header__logo a {
				display: block;
				width: 100%;
				height: auto;
			}
				.header__logo a span {
					display: block;
					width: 100%;
					height: auto;
					margin: 0 auto 2px;
					font-size: 16px;
					font-weight: 700;
					line-height: calc(24 / 16);
					letter-spacing: 0.3em;
					text-align: center;
					color: var(--color--black);
					transition: .2s;
				}
		.header__obj {
			width: 256px;
			height: 50px;
			background-image: url('../image/header-obj@pc.webp');
			background-position: center;
			background-repeat: no-repeat;
			background-size: auto 100%;
			position: absolute;
			top: 63px;
			right: 0;
			transition: .4s;
		}
		.hamburger {
			width: 58px;
			height: 58px;
			border-radius: 9999px;
			position: absolute;
			top: 26px;
			right: calc((114 / 1280) * -100vw);
			z-index: 2001;
			transition: .4s;
		}
			.hbg_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				padding: 1px 0 0;
				margin: 0;
				border-radius: 9999px;
				border: solid 1px var(--color--black);
				background-color: var(--color--red);
				outline: none;
				cursor: pointer;
				transition: .4s;
			}
			.hbg_btn.open {
				background-color: var(--color--yellow);
			}
				.hbg_btn_line {
					width: 32.85px;
					height: 0px;
					position: relative;
				}
					.hbg_btn_line::before,
					.hbg_btn_line::after {
						content: '';
						display: block;
						width: 32.85px;
						height: 5.21px;
						background-image: url('../image/header-hamburger_line.webp');
						background-position: 0 0;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 0;
					}
					.hbg_btn_line::before {
						top: -5.6px;
					}
					.hbg_btn_line::after {
						bottom: -5.6px;
					}
				/* 開く時の処理 */
					.open .hbg_btn_line::before {
						animation: hbg_btn-line_before-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
					.open .hbg_btn_line::after {
						animation: hbg_btn-line_after-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
						@keyframes hbg_btn-line_before-open {
							0% {
								height: 5.21px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								top: -5.6px;
								transform: translate(0%,0%);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							41% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								top: -1px;
							}
							100% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(30deg);
							}
						}
						@keyframes hbg_btn-line_after-open {
							0% {
								height: 5.21px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								bottom: -5.6px;
								transform: translate(0%,0%);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							41% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								bottom: -1px;
							}
							100% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(-30deg);
							}
						}
				/* 閉じる時の処理 */
					.close .hbg_btn_line::before {
						animation: hbg_btn-line_before-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
					.close .hbg_btn_line::after {
						animation: hbg_btn-line_after-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
						@keyframes hbg_btn-line_before-close {
							0% {
								height: 2px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(30deg);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								top: -1px;
							}
							41% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							100% {
								height: 5.21px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								top: -5.6px;
								transform: translate(0%,0%);
							}
						}
						@keyframes hbg_btn-line_after-close {
							0% {
								height: 2px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(-30deg);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								bottom: -1px;
							}
							41% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							100% {
								height: 5.21px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								bottom: -5.6px;
								transform: translate(0%,0%);
							}
						}
		.global_nav {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			overflow: hidden;
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			transition-delay: .6s;
		}
		.global_nav.open_nav {
			pointer-events: initial;
			opacity: 1;
			visibility: initial;
			transition-delay: 0s;
		}
			.global_nav__bg {
				width: 100%;
				height: 100%;
				background-color: rgba(26, 19, 17, .25);
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				opacity: 0;
				transition: .4s;
			}
			.open_nav .global_nav__bg {
				opacity: 1;
			}
			.global_nav__body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 85%;
				max-width: 886px;
				height: 100%;
				border-radius: calc((200 / 1280) * 100vw) 0 0 0;
				margin: 0 0 0 auto;
				background-color: var(--color--lightred);
				position: relative;
				z-index: 2;
				transform: translate(100%,0%);
				transition: .6s;
			}
			.open_nav .global_nav__body {
				transform: translate(0%,0%);
			}
				.global_nav__spices {
					width: 100%;
					height: 100%;
					border-radius: calc((200 / 1280) * 100vw) 0 0 0;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
					.global_nav__spices__obj {
						height: auto;
						position: absolute;
						z-index: 1;
					}
					.global_nav__spices__obj._01 {
						width: calc((77.68 / 886) * 100%);
						top: calc((157 / 800) * 100%);
						left: calc((22 / 886) * -100%);
					}
					.global_nav__spices__obj._02 {
						width: calc((161.93 / 886) * 100%);
						bottom: calc((52.4 / 800) * 100%);
						left: calc((34.3 / 886) * -100%);
						transform: rotate(-2deg);
					}
					.global_nav__spices__obj._03 {
						width: calc((19.47 / 886) * 100%);
						bottom: calc((161.4 / 800) * 100%);
						left: calc((181 / 886) * 100%);
						transform: rotate(-77deg);
					}
					.global_nav__spices__obj._04 {
						width: calc((20.79 / 886) * 100%);
						bottom: calc((54.1 / 800) * 100%);
						left: calc((272.5 / 886) * 100%);
					}
					.global_nav__spices__obj._05 {
						width: calc((20.86 / 886) * 100%);
						top: calc((169.2 / 800) * 100%);
						right: calc((120.3 / 886) * 100%);
						transform: rotate(-13deg);
					}
					.global_nav__spices__obj._06 {
						width: calc((74.75 / 886) * 100%);
						top: calc((238.9 / 800) * 100%);
						right: calc((43.2 / 886) * -100%);
						transform: rotate(-7deg);
					}
					.global_nav__spices__obj._07 {
						width: calc((20.79 / 886) * 100%);
						top: calc((414.5 / 800) * 100%);
						right: calc((44.5 / 886) * 100%);
					}
					.global_nav__spices__obj._08 {
						width: calc((27.29 / 886) * 100%);
						bottom: calc((29.4 / 800) * 100%);
						right: calc((1.8 / 886) * 100%);
						transform: rotate(49deg);
					}
				.global_nav__header {
					width: 100%;
					height: auto;
					margin: 0 auto calc((93 / 800) * 100vh);
					position: relative;
					z-index: 2;
				}
					.global_nav__logo {
						width: calc((369 / 886) * 100%);
						height: auto;
						margin: 0 auto;
					}
						.global_nav__logo a {
							display: block;
							width: 100%;
							height: auto;
						}
							.global_nav__logo a span {
								display: block;
								width: 100%;
								height: auto;
								margin: 0 auto -4px;
								font-size: 16px;
								font-weight: 700;
								line-height: calc(24 / 16);
								letter-spacing: 0.3em;
								text-align: center;
								color: var(--color--black);
							}
					.global_nav__obj {
						display: none;
					}
				.global_nav__contents {
					width: 100%;
					height: auto;
					margin: 0 auto;
					position: relative;
					z-index: 2;
				}
					.global_nav__contents__inner {
						width: 90%;
						max-width: 674px;
						height: auto;
						margin: 0 auto;
					}
						.global_nav__menu_wrap {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							width: 100%;
							height: auto;
							margin: 0 auto calc((70 / 800) * 100vh);
						}
							.global_nav__menu_list {
								width: auto;
								height: auto;
							}
								.global_nav__menu_list__item {
									padding-left: 25px;
									font-size: 27px;
									font-weight: 900;
									line-height: calc(39 / 27);
									letter-spacing: 0.07em;
									position: relative;
								}
								.global_nav__menu_list__item:not(:last-of-type) {
									margin-bottom: 27px;
								}
									.global_nav__menu_list__item .arrow_bold {
										width: 10px;
										height: auto;
										position: absolute;
										top: 18px;
										left: 0;
									}
									.global_nav__menu_list__item__link {
										color: var(--color--black);
									}
								@media (any-hover: hover) {
									.global_nav__menu_list__item__link {
										transition: .4s;
									}
									.global_nav__menu_list__item__link:hover {
										color: var(--color--yellow);
									}
								}
									.global_nav__menu_child_list {
										display: flex;
										justify-content: flex-start;
										align-items: flex-start;
										column-gap: 10px;
										row-gap: 6px;
										padding-bottom: 11px;
										margin-top: 10px;
									}
										.global_nav__menu_child_list__item {
											width: auto;
											height: auto;
										}
											.global_nav__menu_child_list__item__inner {
												display: flex;
												justify-content: center;
												align-items: center;
												width: auto;
												height: 31px;
												padding: 0 7px 1px;
												border-radius: 2px;
												background-color: var(--color--white);
												border: solid 1px;
												background: var(--color--white);
												font-size: 14px;
												font-weight: 700;
												line-height: calc(20 / 14);
												letter-spacing: 0.07em;
												white-space: nowrap;
											}
											._akairo .global_nav__menu_child_list__item__inner {
												border-color: var(--color--red);
												color: var(--color--red);
											}
											._kiiro .global_nav__menu_child_list__item__inner {
												border-color: var(--color--yellow);
												color: var(--color--yellow);
											}
											._aoiro .global_nav__menu_child_list__item__inner {
												border-color: var(--color--blue);
												color: var(--color--blue);
											}
										@media (any-hover: hover) {
											.global_nav__menu_child_list__item__inner {
												transition: .4s;
											}
											.global_nav__menu_child_list__item__inner:hover {
												color: var(--color--white);
											}
											._akairo .global_nav__menu_child_list__item__inner:hover {
												background-color: var(--color--red);
											}
											._kiiro .global_nav__menu_child_list__item__inner:hover {
												background-color: var(--color--yellow);
											}
											._aoiro .global_nav__menu_child_list__item__inner:hover {
												background-color: var(--color--blue);
											}
										}
						.global_nav__contact {
							width: 100%;
							height: auto;
							margin: 0 auto calc((30 / 800) * 100vh);
						}
							.global_nav__contact__btn_wrap {
								width: 320px;
								height: 60px;
								margin: 0 0 0 auto;
							}
								.global_nav__contact__btn {
									padding-left: 23px;
								}
									.global_nav__contact__btn__icon {
										display: block;
										width: 27px;
										height: auto;
										margin-right: 22px;
									}
										.global_nav__contact__btn__icon svg {
											fill: var(--color--base);
										}
										._order .global_nav__contact__btn__icon svg {
											width: 100%;
											height: auto;
										}
									.global_nav__contact__btn__ja_txt {
										margin-right: 13px;
										font-size: 16px;
										font-weight: 900;
										line-height: calc(24 / 16);
										letter-spacing: 0.07em;
										color: var(--color--base);
									}
									.global_nav__contact__btn__en_txt {
										display: inline-flex;
										align-items: flex-end;
										width: auto;
										height: 24px;
										position: relative;
									}
										.global_nav__contact__btn__en_txt svg {
											width: auto;
											height: 12px;
											margin-bottom: 4px;
											fill: var(--color--base);
										}
									.global_nav__contact__btn .btn__icon__arrow {
										fill: var(--color--base);
									}
									.global_nav__contact__btn .btn__icon__frame {
										border-color: var(--color--base);
									}
							@media (any-hover: hover) {
								.global_nav__contact__btn.btn:hover {
									background-color: var(--color--yellow);
								}
										.global_nav__contact__btn__icon svg {
											transition: .4s;
										}
										.global_nav__contact__btn:hover .global_nav__contact__btn__icon svg {
											fill: var(--color--black);
										}
									.global_nav__contact__btn__ja_txt {
										transition: .4s;
									}
									.global_nav__contact__btn:hover .global_nav__contact__btn__ja_txt {
										color: var(--color--black);
									}
										.global_nav__contact__btn__en_txt svg {
											transition: .4s;
										}
										.global_nav__contact__btn:hover .global_nav__contact__btn__en_txt svg {
											fill: var(--color--black);
										}
									.global_nav__contact__btn .btn__icon__arrow,
									.global_nav__contact__btn .btn__icon__frame {
										transition: .4s;
									}
									.global_nav__contact__btn:hover .btn__icon__arrow {
										fill: var(--color--black);
									}
									.global_nav__contact__btn:hover .btn__icon__frame {
										border-color: var(--color--black);
									}
							}
						.global_nav__sns {
							width: 100%;
							height: auto;
						}
							.global_nav__sns__list {
								display: flex;
								justify-content: flex-end;
								align-items: center;
								column-gap: 27px;
								width: 100%;
								height: auto;
							}
								.global_nav__sns__list__item {
									width: auto;
									height: auto;
								}
									.global_nav__sns__list__item__link {
										display: flex;
										justify-content: center;
										align-items: center;
										width: 54px;
										height: 54px;
										border-radius: 9999px;
										background-color: var(--color--black);
									}
										.global_nav__sns__list__item__link svg {
											fill: var(--color--base);
										}
										.global_nav__sns__list__item__link._instagram svg {
											width: 25px;
											height: auto;
										}
										.global_nav__sns__list__item__link._x svg {
											width: 23px;
											height: auto;
										}
								@media (any-hover: hover) {
									.global_nav__sns__list__item__link {
										transition: .4s;
									}
									.global_nav__sns__list__item__link:hover {
										background-color: var(--color--yellow);
									}
										.global_nav__sns__list__item__link svg {
											transition: .4s;
										}
										.global_nav__sns__list__item__link:hover svg {
											fill: var(--color--black);
										}
								}

#search {
	width: 100%;
	height: auto;
	border-top: solid 1px var(--color--black);
	background-color: var(--color--base);
	position: relative;
	z-index: 4;
}
	.search__inner {
		width: calc((772 / 1280) * 100%);
		height: auto;
		padding: 49px 0 30px;
		margin: 0 auto;
		position: relative;
	}
		.search__heading {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 293px;
			height: 38px;
			padding-right: 21px;
			border-radius: 6px;
			background-color: var(--color--black);
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 1;
		}
			.search__heading__icon {
				width: 21.35px;
				height: auto;
				margin-right: 24px;
			}
			.search__heading__txt {
				font-size: 14px;
				font-weight: 900;
				line-height: clac(18.2 / 14);
				letter-spacing: 0.1em;
				color: var(--color--white);
			}
		.search__color {
			width: 100%;
			height: auto;
			margin: 0 auto 10px;
		}
			.search__color__list {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-wrap: wrap;
				column-gap: 8px;
				row-gap: 6px;
				width: 100%;
				height: auto;
			}
				.search__color__list__item {
					width: auto;
					height: auto;
				}
					.search__color__list__item__inner {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 24px;
						padding: 0 6px 1px;
						border-radius: 4px;
						border: solid 1px var(--color--gray);
						background: var(--color--white);
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.03em;
						color: var(--color--white);
						white-space: nowrap;
					}
					._akairo .search__color__list__item__inner {
						background-color: var(--color--white);
						border-color: var(--color--red);
						color: var(--color--red);
					}
					._kiiro .search__color__list__item__inner {
						background-color: var(--color--white);
						border-color: var(--color--yellow);
						color: var(--color--yellow);
					}
					._aoiro .search__color__list__item__inner {
						background-color: var(--color--white);
						border-color: var(--color--blue);
						color: var(--color--blue);
					}
				@media (any-hover: hover) {
					.search__color__list__item__inner {
						transition: .4s;
					}
					.search__color__list__item__inner:hover {
						color: var(--color--white);
					}
					._akairo .search__color__list__item__inner:hover {
						background-color: var(--color--red);
					}
					._kiiro .search__color__list__item__inner:hover {
						background-color: var(--color--yellow);
					}
					._aoiro .search__color__list__item__inner:hover {
						background-color: var(--color--blue);
					}
				}
		.search__tag {
			width: 100%;
			height: auto;
		}
			.search__tag__list {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-wrap: wrap;
				column-gap: 8px;
				row-gap: 6px;
				width: 100%;
				height: auto;
			}
				.search__tag__list__item {
					width: auto;
					height: auto;
				}
					.search__tag__list__item__inner {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 24px;
						padding: 0 6px;
						border-radius: 4px;
						border: solid 1px var(--color--black);
						background: var(--color--white);
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.03em;
						color: var(--color--black);
						white-space: nowrap;
					}
				@media (any-hover: hover) {
					.search__tag__list__item__inner {
						transition: .4s;
					}
					.search__tag__list__item__inner:hover {
						background-color: var(--color--black);
						color: var(--color--white);
					}
				}

footer {
	width: 100%;
	height: auto;
	background-color: var(--color--yellow);
	border-top: solid 1px var(--color--black);
	position: relative;
	z-index: 1;
}
	.footer__top {
		width: 100%;
		height: auto;
		border-bottom: solid 1px var(--color--black);
	}
	.footer__bottom {
		width: 100%;
		height: auto;
	}
		.footer__inner {
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			width: 90%;
			max-width: 1280px;
			height: auto;
			margin: 0 auto;
			position: relative;
		}
			.footer__inner::before,
			.footer__inner::after {
				content: '';
				display: block;
				width: 1px;
				height: 100%;
				background-color: var(--color--black);
				position: absolute;
				top: 0;
				transform: translate(-50%,0%);
				z-index: 1;
			}
			.footer__inner::before {
				left: 0;
			}
			.footer__inner::after {
				right: 0;
			}
			.footer__large_cell {
				display: flex;
				justify-content: center;
				width: 57.3%;
				height: auto;
				padding: 20px 0;
				position: relative;
			}
			.footer__top .footer__large_cell {
				align-items: center;
			}
			.footer__bottom .footer__large_cell {
				align-items: flex-start;
			}
				.footer__large_cell::after {
					content: '';
					display: block;
					width: 1px;
					height: 100%;
					background-color: var(--color--black);
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%,0%);
					z-index: 1;
				}
				.footer__logo {
					display: block;
					width: calc((369 / 573) * 100%);
					max-width: 369px;
					height: auto;
				}
				.footer__menu_list {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex-wrap: wrap;
					column-gap: 20px;
					row-gap: 12px;
					width: auto;
					height: auto;
				}
				.footer__menu_list._recipe {
					margin-right: 20px;
				}
				.footer__menu_list._other {
					max-width: 400px;
					column-gap: 0;
				}
			@media all and (max-width: 1280px){
				.footer__menu_list._other {
					max-width: 200px;
				}
			}
					.footer__menu_list__item {
						width: auto;
						height: auto;
						padding-left: 15px;
						font-size: 14px;
						font-weight: 900;
						line-height: calc(25.2 / 14);
						letter-spacing: 0.07em;
						position: relative;
					}
					._other .footer__menu_list__item {
						width: 200px;
					}
						.footer__menu_list__item .arrow_bold {
							width: 7px;
							height: auto;
							fill: var(--color--black);
							position: absolute;
							top: 10px;
							left: 0;
						}
						.footer__menu_list__item a {
							color: var(--color--black);
						}
					@media (any-hover: hover) {
						.footer__menu_list__item a {
							transition: .4s;
						}
						.footer__menu_list__item a:hover {
							color: var(--color--base);
						}
					}
						.footer__menu_child_list {
							display: flex;
							justify-content: flex-start;
							align-items: flex-start;
							column-gap: 4px;
							margin-top: 10px;
						}
							.footer__menu_child_list__item {
								padding-left: 13px;
								font-size: 12px;
								font-weight: 900;
								line-height: calc(25.2 / 12);
								letter-spacing: 0.07em;
								position: relative;
							}
								.footer__menu_child_list__item::before {
									content: '';
									display: block;
									width: 3px;
									height: 3px;
									background-color: var(--color--black);
									border-radius: 9999px;
									position: absolute;
									top: 12px;
									left: 0.5em;
									transform: translate(-50%,0%);
								}
								.footer__menu_child_list__item a {
									color: var(--color--black);
								}
							@media (any-hover: hover) {
								.footer__menu_child_list__item a {
									transition: .4s;
								}
								.footer__menu_child_list__item a:hover {
									color: var(--color--base);
								}
							}
			.footer__small_cell {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 42.7%;
				height: auto;
				padding: 20px 0;
			}
				.footer__btn_list {
					width: calc((368 / 427) * 100%);
					height: auto;
				}
					.footer__btn_list__item {
						width: 100%;
						height: 60px;
					}
					.footer__btn_list__item:not(:last-of-type) {
						margin-bottom: 10px;
					}
						.footer__btn {
							padding-left: 23px;
						}
							.footer__btn__icon {
								display: block;
								width: 27px;
								height: auto;
								margin-right: 22px;
							}
								.footer__btn__icon svg {
									fill: var(--color--base);
								}
								._order .footer__btn__icon svg {
									width: 100%;
									height: auto;
								}
								._contact .footer__btn__icon svg {
									width: calc((15 / 27) * 100%);
									height: auto;
									margin: 0 auto;
								}
							.footer__btn__ja_txt {
								margin-right: 13px;
								font-size: 16px;
								font-weight: 900;
								line-height: calc(24 / 16);
								letter-spacing: 0.07em;
								color: var(--color--base);
							}
							.footer__btn__en_txt {
								display: inline-flex;
								align-items: flex-end;
								width: auto;
								height: 24px;
								position: relative;
							}
								.footer__btn__en_txt svg {
									width: auto;
									height: 12px;
									margin-bottom: 4px;
									fill: var(--color--base);
								}
							.footer__btn .btn__icon__arrow {
								fill: var(--color--base);
							}
							.footer__btn .btn__icon__frame {
								border-color: var(--color--base);
							}
					@media (any-hover: hover) {
						.footer__btn.btn:hover {
							background-color: var(--color--base);
						}
								.footer__btn__icon svg {
									transition: .4s;
								}
								.footer__btn:hover .footer__btn__icon svg {
									fill: var(--color--black);
								}
							.footer__btn__ja_txt {
								transition: .4s;
							}
							.footer__btn:hover .footer__btn__ja_txt {
								color: var(--color--black);
							}
								.footer__btn__en_txt svg {
									transition: .4s;
								}
								.footer__btn:hover .footer__btn__en_txt svg {
									fill: var(--color--black);
								}
							.footer__btn .btn__icon__arrow,
							.footer__btn .btn__icon__frame {
								transition: .4s;
							}
							.footer__btn:hover .btn__icon__arrow {
								fill: var(--color--black);
							}
							.footer__btn:hover .btn__icon__frame {
								border-color: var(--color--black);
							}
					}
				.footer__sns {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: auto;
					padding: 8px 27px 8px 35px;
				}
					.footer__sns__heading {
						width: 53.49px;
						height: auto;
					}
					.footer__sns__list {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						column-gap: 22px;
						width: auto;
						height: auto;
					}
						.footer__sns__list__item {
							width: auto;
							height: auto;
						}
							.footer__sns__list__item__link {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 40px;
								height: 40px;
								border-radius: 9999px;
								background-color: var(--color--black);
							}
								.footer__sns__list__item__link svg {
									fill: var(--color--base);
								}
								.footer__sns__list__item__link._instagram svg {
									width: 18.37px;
									height: auto;
								}
								.footer__sns__list__item__link._x svg {
									width: 17px;
									height: auto;
								}
						@media (any-hover: hover) {
							.footer__sns__list__item__link {
								transition: .4s;
							}
							.footer__sns__list__item__link:hover {
								background-color: var(--color--base);
							}
								.footer__sns__list__item__link svg {
									transition: .4s;
								}
								.footer__sns__list__item__link:hover svg {
									fill: var(--color--black);
								}
						}
	.footer__copy {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50px;
		background-color: var(--color--black);
	}
		.footer__copy__txt {
			font-size: 10px;
			font-weight: 900;
			line-height: calc(25.2 / 10);
			letter-spacing: 0.07em;
			color: var(--color--base);
		}

/* ボタン */
.btn {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-color: var(--color--black);
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.07em;
	color: var(--color--white);
	position: relative;
}
.btn._center {
	justify-content: center;
}
.btn._left {
	justify-content: flex-start;
}
.btn._blue {
	background-color: var(--color--blue);
}
	.btn .btn__icon {
		top: 50%;
		right: 18px;
		transform: translate(0%,-50%);
	}
		.btn .btn__icon__frame {
			border-color: var(--color--white);
		}
			.btn .btn__icon__arrow {
				fill: var(--color--white);
			}
@media (any-hover: hover) {
.btn {
	transition: .4s;
}
.btn:hover {
	background-color: var(--color--yellow);
	color: var(--color--black);
}
		.btn .btn__icon__frame {
			transition: .4s;
		}
		.btn:hover .btn__icon__frame {
			border-color: var(--color--black);
		}
			.btn .btn__icon__arrow {
				transition: .4s;
			}
			.btn:hover .btn__icon__arrow {
				fill: var(--color--black);
			}
}

/* ボタン矢印アイコン */
.btn__icon {
	width: 24px;
	height: 24px;
	position: absolute;
}
	.btn__icon__frame {
		width: 100%;
		height: 100%;
		border-radius: 9999px;
		border: solid 1px;
		overflow: hidden;
		position: relative;
		transform: translate(0%,0%);
		transition: .4s;
	}
		.btn__icon__arrow {
			width: 9.46px;
			height: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			transition: .4s;
		}
	@media (any-hover: hover) {
		a:hover > .btn__icon .btn__icon__arrow {
			animation: arrowRightLeft 0.4s 1 forwards;
		}
		@keyframes arrowRightLeft {
			0% {
				transform: translate(-50%,-50%);;
			}
			50% {
				transform: translate(150%,-50%);
			}
			51% {
				transform: translate(-250%,-50%);
			}
			100% {
				transform: translate(-50%,-50%);;
			}
		}
	}

/* PC ================================================== */
@media all and (min-width: 769px){
.sp {display: none;}
.pc {display: inline-block;}
.view_sp {display: none;}
.view_pc {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}

/* header */
header.scrolled {
	height: 80px;
}
		.scrolled .header__copy {
			top: 18px;
		}
		.scrolled .header__logo {
			width: 200px;
			top: 10px;
		}
				.header__logo a span {
					font-size: 12px;
					line-height: calc(16 / 12);
				}
		.scrolled .header__obj {
			height: 44px;
			top: 18px;
		}
		.scrolled .hamburger {
			top: 10px;
		}
}

@media all and (max-width: 1280px){
	.header__inner {
		width: 85%;
	}
		.hamburger {
			right: -80px;
		}
}

@media all and (min-width: 769px) and (max-width: 1150px) {
#wrap {
	padding: 110px 0 0;
}

header {
	height: 110px;
}
		.header__copy {
			width: 250px;
			padding: 7px 0;
			top: 45px;
		}
			.header__copy__txt {
				font-size: 14px;
				letter-spacing: 0.08em;
			}
		.header__logo {
			width: 280px;
			top: 15px;
		}
				.header__logo a span {
					margin-bottom: 0;
					font-size: 14px;
					line-height: calc(18 / 14);
				}
		.header__obj {
			width: 120px;
			height: 37px;
			top: 40px;
			right: 80px;
		}
		.scrolled .header__obj {
			height: 37px;
		}
		.hamburger {
			right: 0;
		}
}
@media all and (max-width: 939px){
		.header__copy {
			width: 180px;
			top: 48px;
		}
		.scrolled .header__copy {
			top: 24px;
		}
			.header__copy__txt {
				font-size: 10px;
				letter-spacing: 0em;
			}
}

/* Tablet ================================================== */
@media all and (max-width: 768px){
.pc {display: none;}
.sp {display: inline-block;}
.view_pc {display: none;}
.view_sp {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}

#wrap {
	padding: 80px 0 0;
}
#wrap:not(.top) {
	background-image: url('../image/page-spices@sp.webp');
	background-position: 0% 0%;
}

/* header */
header {
	height: 80px;
}
header.scrolled {
	height: 80px;
}
	.header__inner {
		width: calc((335 / 375) * 100%);
	}
		.header__copy {
			display: none;
		}
		.header__logo {
			width: 187.16px;
			top: 10px;
		}
				.header__logo a span {
					margin: 0 auto 3px;
					font-size: 12px;
					line-height: calc(15 / 10);
				}
		.header__obj {
			width: 55.65px;
			height: 31.35px;
			background-image: url('../image/header-obj@sp.webp');
			background-position: right center;
			background-size: auto 100%;
			top: 25px;
			left: 0;
		}
		.hamburger {
			width: 44px;
			height: 44px;
			top: 18px;
			right: 0;
		}
				.hbg_btn_line {
					width: 24.67px;
					height: 0;
				}
					.hbg_btn_line::before,
					.hbg_btn_line::after {
						width: 24.67px;
						height: 3.91px;
					}
					.hbg_btn_line::before {
						top: -5.3px;
					}
					.hbg_btn_line::after {
						bottom: -5.3px;
					}
				/* 開く時の処理 */
					.open .hbg_btn_line::before {
						animation: hbg_btn-line_before-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
					.open .hbg_btn_line::after {
						animation: hbg_btn-line_after-open .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
						@keyframes hbg_btn-line_before-open {
							0% {
								height: 3.91px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								top: -5.3px;
								transform: translate(0%,0%);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							41% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								top: -1px;
							}
							100% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(30deg);
							}
						}
						@keyframes hbg_btn-line_after-open {
							0% {
								height: 3.91px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								bottom: -5.3px;
								transform: translate(0%,0%);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							41% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								bottom: -1px;
							}
							100% {
								height: 2px;
								background-color: rgba(26, 19, 17, 1);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(-30deg);
							}
						}
				/* 閉じる時の処理 */
					.close .hbg_btn_line::before {
						animation: hbg_btn-line_before-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
					.close .hbg_btn_line::after {
						animation: hbg_btn-line_after-close .5s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
					}
						@keyframes hbg_btn-line_before-close {
							0% {
								height: 2px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(30deg);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								top: -1px;
							}
							41% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								top: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							100% {
								height: 3.91px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								top: -5.3px;
								transform: translate(0%,0%);
							}
						}
						@keyframes hbg_btn-line_after-close {
							0% {
								height: 2px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(-30deg);
							}
							40% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								bottom: -1px;
							}
							41% {
								height: 2px;
								background-color: rgba(255, 255, 255, 1);
								background-position: 0px -6px;
								bottom: -1px;
								transform: translate(0%,0%) rotate(0deg);
							}
							100% {
								height: 3.91px;
								background-color: rgba(255, 255, 255, 0);
								background-position: 0px 0px;
								bottom: -5.3px;
								transform: translate(0%,0%);
							}
						}
		.global_nav {
			height: 100dvh;
		}
			.global_nav__bg {
				height: 100dvh;
			}
			.global_nav__body {
				display: block;
				width: 100vw;
				max-width: initial;
				height: 100%;
				border-radius: 0;
				margin: 0;
				overflow: auto;
			}
				.global_nav__spices {
					height: 100vh;
					border-radius: 0;
				}
					.global_nav__spices__obj._01 {
						width: calc((36.43 / 375) * 100%);
						top: auto;
						bottom: calc((107.7 / 665) * 100%);
						left: calc((18.2 / 375) * -100%);
					}
					.global_nav__spices__obj._02 {
						display: none;
					}
					.global_nav__spices__obj._03 {
						width: calc((9.13 / 375) * 100%);
						bottom: calc((148.9 / 665) * 100%);
						left: calc((23.9 / 375) * 100%);
						transform: rotate(-77deg);
					}
					.global_nav__spices__obj._04 {
						display: none;
					}
					.global_nav__spices__obj._05 {
						width: calc((12.13 / 375) * 100%);
						top: calc((316.9 / 665) * 100%);
						right: calc((55.4 / 375) * 100%);
						transform: rotate(-13deg);
					}
					.global_nav__spices__obj._06 {
						width: calc((43.46 / 375) * 100%);
						top: calc((328.1 / 665) * 100%);
						right: calc((10.8 / 375) * -100%);
						transform: rotate(-7deg);
					}
					.global_nav__spices__obj._07 {
						width: calc((12.09 / 375) * 100%);
						top: calc((418.2 / 665) * 100%);
						right: calc((31.2 / 375) * 100%);
					}
					.global_nav__spices__obj._08 {
						width: calc((15.37 / 375) * 100%);
						bottom: calc((55.8 / 665) * 100%);
						right: calc((3.4 / 375) * -100%);
						transform: rotate(49deg);
					}
				.global_nav__header {
					width: calc((335 / 375) * 100%);
					height: 0;
					margin: 0 auto calc((117.3 / 375) * 100vw);
				}
					.global_nav__logo {
						width: calc((187.16 / 375) * 100vw);
						height: auto;
						position: absolute;
						top: calc((20 / 375) * 100vw);
						left: 50%;
						transform: translate(-50%, 0%);
					}
							.global_nav__logo a span {
								margin: 0 auto calc((3 / 375) * 100vw);
								font-size: calc((10 / 375 * 100vw));
								line-height: calc(15 / 10);
							}
					.global_nav__obj {
						display: block;
						width: calc((55.65 / 375) * 100vw);
						height: calc((31.35 / 375) * 100vw);
						background-image: url('../image/header-obj@sp.webp');
						background-position: right center;
						background-size: auto 100%;
						position: absolute;
						top: calc((38.9 / 375) * 100vw);
						left: 0;
					}
				.global_nav__contents {
					width: calc((283 / 375) * 100%);
					padding: 0 0 38px;
				}
					.global_nav__contents__inner {
						width: 100%;
						max-width: initial;
					}
						.global_nav__menu_wrap {
							display: block;
							margin: 0 auto 50px;
						}
							.global_nav__menu_list {
								width: 100%;
							}
							.global_nav__menu_list:not(:last-of-type) {
								margin-bottom: 20px;
							}
								.global_nav__menu_list__item {
									padding-left: 16px;
									font-size: 20px;
									line-height: calc(29 / 20);
								}
								.global_nav__menu_list__item:not(:last-of-type) {
									margin-bottom: 20px;
								}
									.global_nav__menu_list__item .arrow_bold {
										top: 12px;
									}
									.global_nav__menu_child_list {
										column-gap: 12px;
										row-gap: 4px;
										padding-bottom: 0;
										margin-top: 6px;
									}
											.global_nav__menu_child_list__item__inner {
												height: 28px;
												font-size: 12px;
												line-height: calc(17 / 12);
											}
						.global_nav__contact {
							margin: 0 auto 50px;
						}
							.global_nav__contact__btn_wrap {
								width: 250px;
								height: 50px;
								margin: 0 auto;
							}
								.global_nav__contact__btn {
									padding-left: 18px;
								}
									.global_nav__contact__btn__icon {
										margin-right: 15px;
									}
									.global_nav__contact__btn__ja_txt {
										margin-right: 11px;
										font-size: 14px;
										line-height: calc(20 / 14);
									}
									.global_nav__contact__btn__en_txt {
										height: 20px;
									}
										.global_nav__contact__btn__en_txt svg {
											height: 9px;
											margin-bottom: 3px;
										}
							.global_nav__sns__list {
								justify-content: center;
								column-gap: 24px;
							}
									.global_nav__sns__list__item__link {
										width: 50px;
										height: 50px;
									}
										.global_nav__sns__list__item__link._instagram svg {
											width: 23px;
										}
										.global_nav__sns__list__item__link._x svg {
											width: 21px;
										}

/* search */
	.search__inner {
		width: calc((293 / 375) * 100%);
		padding: 35px 0;
	}
		.search__heading {
			width: 186px;
			height: 34px;
			padding-right: 0;
		}
			.search__heading__icon {
				width: 17.35px;
				margin-top: 1px;
				margin-right: 5px;
			}
			.search__heading__txt {
				font-size: 12px;
				line-height: clac(18.35 / 12);
			}
		.search__color {
			margin: 0 auto 12px;
		}
			.search__color__list {
				column-gap: 12px;
			}
					.search__color__list__item__inner {
						height: 28px;
						padding: 0 7px;
						border-radius: 4px;
						font-size: 12px;
					}
			.search__tag__list {
				column-gap: 12px;
			}
					.search__tag__list__item__inner {
						height: 28px;
						padding: 0 7px;
						font-size: 12px;
					}

/* footer */
		.footer__inner {
			display: block;
			width: 100%;
			max-width: initial;
		}
			.footer__inner::before,
			.footer__inner::after {
				content: '';
				display: block;
				width: 1px;
				height: 100%;
				background-color: var(--color--black);
				position: absolute;
				top: 0;
				transform: translate(-50%,0%);
				z-index: 1;
			}
			.footer__inner::before {
				left: calc((40 / 375) * 100vw);
			}
			.footer__inner::after {
				right: calc((40 / 375) * 100vw);
			}
			.footer__large_cell {
				display: block;
				width: 100%;
				padding: calc((20 / 375) * 100vw) 0;
				margin-bottom: 1px;
				position: relative;
			}
				.footer__large_cell::after {
					content: '';
					display: block;
					width: 100%;
					height: 1px;
					background-color: var(--color--black);
					position: absolute;
					top: auto;
					bottom: -1px;
					left: 0;
					transform: translate(0%,0%);
					z-index: 1;
				}
				.footer__logo {
					width: calc((168 / 375) * 100%);
					margin: 0 auto;
				}
				.footer__menu_list {
					display: block;
					width: calc((295 / 375) * 100%);
					padding: 0 22px;
					margin: 0 auto;
				}
				.footer__menu_list._recipe {
					margin-right: auto;
					margin-bottom: 12px;
				}
				.footer__menu_list._other {
					width: calc((295 / 375) * 100%);
					max-width: initial;
				}
					.footer__menu_list__item {
						width: 100%;
					}
					._other .footer__menu_list__item {
						width: 100%;
						max-width: initial;
					}
					._other .footer__menu_list__item:not(:last-of-type) {
						margin-bottom: 12px;
					}
						.footer__menu_list__item .arrow_bold {
							width: 7px;
						}
						.footer__menu_child_list {
							column-gap: 12px;
							margin-top: 0px;
							margin-left: -15px;
						}
							.footer__menu_child_list__item {
								padding-left: 17px;
								font-size: 17px;
								line-height: calc(25 / 17);
							}
			.footer__small_cell {
				display: block;
				width: 100%;
				padding: calc((20 / 375) * 100vw) 0;
			}
				.footer__btn_list {
					width: calc((250 / 375) * 100%);
					margin: 0 auto;
				}
					.footer__btn_list__item {
						height: 50px;
					}
						.footer__btn {
							padding-left: 18px;
						}
							.footer__btn__icon {
								margin-right: 15px;
							}
							.footer__btn__ja_txt {
								margin-right: 10px;
								font-size: 14px;
								line-height: calc(20 / 14);
							}
							.footer__btn__en_txt {
								width: auto;
								height: 20px;
							}
								.footer__btn__en_txt svg {
									width: auto;
									height: 9.06px;
									margin-bottom: 3px;
								}
				.footer__sns {
					width: calc((295 / 375) * 100vw);
					padding: 0 14px 0 13px;
					margin: 0 auto;
				}
					.footer__sns__heading {
						width: 42.79px;
					}
					.footer__sns__list {
						column-gap: 12px;
					}
							.footer__sns__list__item__link {
								width: 46px;
								height: 46px;
							}
								.footer__sns__list__item__link._instagram svg {
									width: 21.1px;
								}
								.footer__sns__list__item__link._x svg {
									width: 19.52px;
								}
	.footer__copy {
		height: 35px;
	}
		.footer__copy__txt {
			line-height: calc(15 / 10);
		}
}

/* SP ================================================== */
@media all and (max-width: 575px){


}