@charset "UTF-8";
/* ---------------------------------------
  トップページ
-----------------------------------------*/
:root {
	--color-plain: #733204;
	--color-sesame: #BF8425;
	--color-peanut: #D83A00;
	--color-tea: #4E9B3A;
	--color-burdock: #AC5A1F;
	--color-mugwort: #4F6256;
	--color-mix: #2D385A;
}

/* header
--------------------------------*/
#header:not(.is-scrolled):not(.navOpen) {
	background-color: transparent;
}

.main {
	padding: 0 0 12rem;
}
@media screen and (max-width: 767px) {
	.main {
		padding: 0 0 8rem;
	}
}
.main_bg {
	width: 100%;
	height: 100lvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
.main_bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* sec_mv
--------------------------------*/
#sec_mv .wrap {
	max-width: 124rem;
	height: 88rem;
	height: 100lvh;
	max-height: 97.9rem;
}
@media screen and (max-width: 767px) {
	#sec_mv .wrap {
		max-height: inherit;
	}
}
#sec_mv .ttl {
	text-align: center;
	width: 8.2rem;
	position: absolute;
	right: 0;
	top: 18.1rem;
}
@media screen and (max-width: 767px) {
	#sec_mv .ttl {
		width: 4.7rem;
		top: auto;
		right: 3.7rem;
		bottom: 4.1rem;
	}
}
@media (orientation: landscape) and (max-width: 767px) {
	#sec_mv .ttl {
		width: 2.35rem;
	}
}
#sec_mv .ttl img {
	max-height: 50vh;
}
#sec_mv .img {
	width: 144rem;
	height: 100%;
	margin: 0 -10rem;
}
@media screen and (max-width: 767px) {
	#sec_mv .img {
		width: 100vw;
		margin: 0 -2rem;
	}
}
#sec_mv .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}
@media screen and (max-width: 767px) {
	#sec_mv .img img {
		max-height: 80vh;
		min-height: inherit;
		object-position: center top;
	}
}
@media (orientation: landscape) and (max-width: 767px) {
	#sec_mv .img img {
		object-fit: contain;
	}
}
#sec_mv .taste {
	display: flex;
	flex-direction: row-reverse;
	gap: 0 1.1rem;
	position: absolute;
	left: 0;
	bottom: 10rem;
}
@media screen and (max-width: 767px) {
	#sec_mv .taste {
		left: 3rem;
		bottom: 2.6rem;
	}
}
@media (orientation: landscape) and (max-width: 767px) {
	#sec_mv .taste {
		gap: 0 0.55rem;
	}
}
#sec_mv .taste li {
	position: relative;
	writing-mode: vertical-rl;
	color: #4E4036;
	font-weight: 700;
	letter-spacing: 0.25em;
	padding-top: 2rem;
}
@media screen and (max-width: 767px) {
	#sec_mv .taste li {
		font-size: 1.4rem;
	}
}
@media (orientation: landscape) and (max-width: 767px) {
	#sec_mv .taste li {
		font-size: 0.7rem;
		padding-top: 1rem;
	}
}
#sec_mv .taste li::before {
	content: "";
	width: 1.6rem;
	height: 1rem;
	mask-image: url(../img/index/ico_producrs.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media (orientation: landscape) and (max-width: 767px) {
	#sec_mv .taste li::before {
		width: 0.8rem;
		height: 0.5rem;
	}
}
#sec_mv .taste li.taste_plain::before {
	background-color: var(--color-plain);
}
#sec_mv .taste li.taste_sesame::before {
	background-color: var(--color-sesame);
}
#sec_mv .taste li.taste_peanut::before {
	background-color: var(--color-peanut);
}
#sec_mv .taste li.taste_tea::before {
	background-color: var(--color-tea);
}
#sec_mv .taste li.taste_burdock::before {
	background-color: var(--color-burdock);
}
#sec_mv .taste li.taste_mugwort::before {
	background-color: var(--color-mugwort);
}
#sec_mv .taste li.taste_mix::before {
	background-color: var(--color-mix);
}

/* sec_kodawari
--------------------------------*/
#sec_kodawari {
	padding: 6rem 0 0;
	margin-top: 7rem;
}
@media screen and (max-width: 767px) {
	#sec_kodawari {
		padding: 8rem 0 0;
		margin-top: 8rem;
	}
}
#sec_kodawari::before, #sec_kodawari::after {
	content: "";
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}
#sec_kodawari::before {
	width: 47.4rem;
	height: 46.9rem;
	background-image: url(../img/index/kodawari_bg01.png);
	background-position: left top;
	left: 0;
	top: -1rem;
}
@media screen and (max-width: 767px) {
	#sec_kodawari::before {
		transform: scale(-1, 1);
		width: 23.7rem;
		height: 23.45rem;
		top: -8rem;
		left: auto;
		right: 0;
	}
}
#sec_kodawari::after {
	width: 45.9rem;
	height: 43.8rem;
	background-image: url(../img/index/kodawari_bg02.png);
	background-position: right top;
	right: 0;
	top: 14rem;
}
@media screen and (max-width: 767px) {
	#sec_kodawari::after {
		width: 22.95rem;
		height: 21.9rem;
		top: auto;
		bottom: 19rem;
	}
}
#sec_kodawari .wrap {
	max-width: 77rem;
	padding: 0 0 24rem;
}
@media screen and (max-width: 767px) {
	#sec_kodawari .wrap {
		padding: 0 3rem;
	}
}
#sec_kodawari .ttl {
	width: 17.3rem;
	margin-left: auto;
}
@media screen and (max-width: 767px) {
	#sec_kodawari .ttl {
		margin-left: 0;
	}
}
#sec_kodawari .txt {
	color: #4E4036;
	font-weight: 700;
	font-size: 2rem;
	line-height: 2;
	margin-top: -7rem;
}
@media screen and (max-width: 767px) {
	#sec_kodawari .txt {
		font-size: 1.4rem;
		margin-top: 4.2rem;
	}
}
#sec_kodawari .img {
	width: 52.3rem;
}
@media screen and (min-width: 768px) {
	#sec_kodawari .img {
		position: absolute;
		right: -19rem;
		bottom: 0;
	}
}
@media screen and (max-width: 767px) {
	#sec_kodawari .img {
		width: 26rem;
		margin: 6rem auto 0;
	}
}

/* sec_products
--------------------------------*/
#sec_products {
	padding-top: 6rem;
	margin-top: 12rem;
}
@media screen and (max-width: 767px) {
	#sec_products {
		margin-top: 6rem;
	}
}
#sec_products * {
	color: #4E4036;
}
@media screen and (max-width: 767px) {
	#sec_products .wrap {
		padding: 0 1rem;
	}
}
#sec_products .sec_ttl {
	width: 67.2rem;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	#sec_products .sec_ttl {
		width: 26rem;
	}
}
#sec_products .lead_txt {
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 2.1111111111;
	margin-top: 6.3rem;
}
@media screen and (max-width: 767px) {
	#sec_products .lead_txt {
		font-size: 1.4rem;
		margin-top: 4rem;
	}
}
#sec_products .products_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8rem 4.6rem;
	margin-top: 6rem;
}
@media screen and (max-width: 767px) {
	#sec_products .products_list {
		grid-template-columns: 1fr;
		gap: 6rem 0;
		margin-top: 5rem;
	}
}
#sec_products .products_list .item .taste {
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1;
	margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
	#sec_products .products_list .item .taste {
		font-size: 1.8rem;
	}
}
#sec_products .products_list .item .txt {
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.8888888889;
	margin-top: 1em;
}
@media screen and (max-width: 767px) {
	#sec_products .products_list .item .txt {
		font-size: 1.4rem;
	}
}
#sec_products .products_list .item.taste_plain .taste {
	color: var(--color-plain);
}
#sec_products .products_list .item.taste_sesame .taste {
	color: var(--color-sesame);
}
#sec_products .products_list .item.taste_peanut .taste {
	color: var(--color-peanut);
}
#sec_products .products_list .item.taste_tea .taste {
	color: var(--color-tea);
}
#sec_products .products_list .item.taste_burdock .taste {
	color: var(--color-burdock);
}
#sec_products .products_list .item.taste_mugwort .taste {
	color: var(--color-mugwort);
}
#sec_products .products_list .item.taste_mix .taste {
	color: var(--color-mix);
}
#sec_products .shipping_txt {
	font-weight: 700;
	font-size: 4rem;
	margin-top: 2em;
}
@media screen and (max-width: 767px) {
	#sec_products .shipping_txt {
		font-size: 2.3rem;
	}
}
#sec_products .shipping_txt span {
	display: inline-block;
	padding-bottom: 0.8rem;
	border-bottom: 0.4rem solid #4E4036;
}
@media screen and (max-width: 767px) {
	#sec_products .shipping_txt span {
		padding-bottom: 0.5rem;
		border-width: 0.2rem;
	}
}

/* sec_info
--------------------------------*/
#sec_info {
	padding-top: 6rem;
	margin-top: 10rem;
}
@media screen and (max-width: 767px) {
	#sec_info {
		margin-top: 4rem;
	}
}
#sec_info .sec_ttl {
	width: 17rem;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	#sec_info .sec_ttl {
		width: 11rem;
	}
}
#sec_info .img {
	margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
	#sec_info .img {
		margin-top: 4rem;
	}
}
#sec_info .info_wrap {
	padding: 10rem 10.5rem;
	background-color: #fff;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap {
		padding: 5rem 2rem;
	}
}
#sec_info .info_wrap .logo {
	width: 42.8rem;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .logo {
		width: 20rem;
	}
}
#sec_info .info_wrap .logo img {
	width: 100%;
	max-width: inherit;
}
#sec_info .info_wrap .lead_txt {
	color: #4E4036;
	font-weight: 700;
	line-height: 2;
	margin-top: 4rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .lead_txt {
		margin-top: 3rem;
	}
}
#sec_info .info_wrap .box {
	display: flex;
	align-items: center;
	border: 1px solid #A2A2A2;
	margin-top: 8rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box {
		display: block;
	}
}
#sec_info .info_wrap .box .map {
	position: relative;
	width: 51rem;
	height: 100%;
	min-height: 48.7rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box .map {
		width: 100%;
		min-height: 27rem;
	}
}
#sec_info .info_wrap .box .map iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#sec_info .info_wrap .box .detail {
	flex: 1;
	padding: 4rem 7.5rem 4.5rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box .detail {
		padding: 3rem 2rem;
	}
}
#sec_info .info_wrap .box .detail .ttl {
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box .detail .ttl {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}
}
#sec_info .info_wrap .box .detail .txt, #sec_info .info_wrap .box .detail .tel {
	line-height: 2.125;
}
#sec_info .info_wrap .box .btn_box {
	margin-top: 2.4rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box .btn_box {
		margin-top: 2rem;
	}
}
#sec_info .info_wrap .box .btn_box a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5.4rem;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.5;
	padding: 1.4rem 6rem;
	border: 1px solid #000;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box .btn_box a {
		min-height: 4.2rem;
		font-size: 1.4rem;
		padding: 1rem 4rem;
	}
}
#sec_info .info_wrap .box .btn_box a::after {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: url(../img/common/ico_blank.svg) no-repeat center/contain;
	position: absolute;
	right: 3.5rem;
}
@media screen and (max-width: 767px) {
	#sec_info .info_wrap .box .btn_box a::after {
		width: 1.4rem;
		height: 1.4rem;
		right: 2rem;
	}
}

/* sec_link
--------------------------------*/
#sec_link {
	margin-top: 32rem;
}
@media screen and (max-width: 767px) {
	#sec_link {
		margin-top: 20rem;
	}
}

/* 2511_外部リンク修正 */
#sec_link .blank {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
#sec_link .blank::after {
	content: "";
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	background: url(../img/common/ico_blank.svg) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
	#sec_link .blank::after {
		width: 1.4rem;
		height: 1.4rem;
	}
}