@charset "UTF-8";
/*=======================================================
八福餅
=======================================================*/
.floating-tel {
	display: none;
}
/*-----------------------------
見出し
-----------------------------*/
.title {
	font-size: 26px;
	margin-bottom: 26px;
}
.title .subtitle {
	color: var(--color-variant);
}
@media screen and (max-width : 767px) {
	.title {
		margin-bottom: 15px;
	}
}
/*-----------------------------
ヒーロー画像
-----------------------------*/
.hero {
    margin-bottom: 58px;
}
@media screen and (max-width : 767px) {
	.hero {
		margin-bottom: 26px;
	}
}
/*-----------------------------
イントロ
-----------------------------*/
.shop-intro__subtitle {
	color: var(--color-variant);
	font-size: 26px; 
	font-weight: 500;
	margin-bottom: 11px;
	display: block;
}
.shop-intro__logo {
	max-width: 164px;
}
.shop-intro__nav-item {
    text-decoration: none;
    border: 1px solid var(--color-variant);
    background: #fff;
    padding: 10px 5px 11px;
    max-width: 214px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	position: relative;
}
.shop-intro__nav-item::before {
	margin-top: 2px;
	background-image: none;
	background-color: #892C63;
	mask: url(../images/lower/icon-arrow.svg) no-repeat center / contain;
	-webkit-mask: url(../images/lower/icon-arrow.svg) no-repeat center / contain;
}
.shop-intro__image {
	max-width: 650px; 
	margin: auto auto 34px;
}
@media screen and (max-width : 767px) {
	.shop-intro__subtitle {
    	font-size: 21px;
    	margin-bottom: 15px;
	}
	.shop-intro__title {
        margin-bottom: 31px;
        padding-inline: 55px;
    }
	.shop-intro__nav-item {
		padding-left: 25px;
	}
	.shop-intro__nav-item::before {
		position: absolute; 
		left: 15px;
	}
	.shop-intro__nav {
		margin-bottom: 26px;
	}
	.shop-intro__description {
		font-size:14px;
		text-align: left;
	}
}
/*-----------------------------
長年愛される
-----------------------------*/
.reasons {
	background: var(--color-variant-bg);
}
.reasons__inner {
	padding-block: 70px 50px;
}
.reasons__list {
	display: flex; 
	justify-content: center;
	gap: 42px;
}
.reasons__item {
	flex: 1;
}
.reasons__item-title {
	font-size: 22px; 
	font-weight: 500;
	color: var(--color-variant);
	text-align: center;
	line-height: 1.46;
    margin-bottom: 10px;
	margin-top: 8px;
}
.reasons__text {
	font-size: 14px;
	text-align: center;
}
@media screen and (max-width : 1099px) {
	.reasons__list {
		flex-direction: column;
	}
}
@media screen and (max-width : 767px) {
	.reasons__inner {
		padding: 39px 38px 50px 37px!important;
	}
	.reasons__list {
		gap: 24px;
	}
	.reasons__image {
		display: block; 
		margin: auto;
	}
}
/*-----------------------------
購入店舗・お召し上がり
-----------------------------*/
.product-groups__inner {
	padding-block: 50px;
}
.product-groups__groups {
	display: flex;
	gap: clamp(24px, 4vw, 86px);
}
.product-groups__group {
	flex: 1;
}
.product-groups__description {
	font-size: 22px; 
	font-weight: 500;
	color: var(--color-variant);
	text-align: center;
	margin: 10px 0 12px;
}
.product-groups__buttons {
	gap: 17px 21px;
	margin-bottom: 15px;
}
.button__link {
	line-height: 1.3;
	flex-direction: column;
}
.button__link span {
	font-size: 12px;
	display: block;
}
.button--icon-right::after {
	right: 8px;
}
.button--more {
    background: var(--color-variant);
    border: 1px solid var(--color-variant);
}
.button--more:hover {
	color: var(--color-variant);
}
.button--icon-right:hover::after {
	background-image: none;
	background-color: #892c63;
	mask: url(../images/common/button-right.svg) no-repeat center / contain;
	-webkit-mask: url(../images/common/button-right.svg) no-repeat center / contain;
}
.product-groups__note {
	font-size: 14px;
	text-align: center;
}
@media screen and (max-width : 1040px) {
	.product-groups__groups {
		flex-direction: column;
		gap: 86px;
	}
}
@media screen and (max-width : 767px) {
	.product-groups__inner {
		padding-block: 36px 68px;
	}
	.product-groups__note {
		text-align: left;
	}
	.product-groups__groups {
		gap: 40px;
	}
	.product-groups__description {
		padding-inline: 35px;
		line-height: 1.5;
	}
	.product-groups__buttons {
		margin-bottom: 0;
	}
}
/*-----------------------------
お知らせ
-----------------------------*/
.news__part {
    background: var(--color-variant-bg);
}
.bg-deco::before, .bg-deco::after {
	content: none;
}
/*-----------------------------
季節限定商品
-----------------------------*/
.seasonal__inner {
	padding-block: 63px 75px;
}
.seasonal__lead {
	font-size: 21px; 
	font-weight: 500;
	color: var(--color-variant);
	text-align: center;
	margin-bottom: 25px;
}
.seasonal__text {
	font-size: 14px;
	text-align: center;
	margin-bottom: 30px;
}
.seasonal__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:  35px clamp(16px, 4vw, 52px);
  max-width: 983px;
  width: 100%;
  margin: 0 auto;
}
.seasonal__name {
	font-size: 22px; 
	font-weight: 500;
	color: var(--color-variant);
	text-align: center;
	margin-top: 10px;
	line-height: 1.3;
}
@media (max-width: 900px) {
  .seasonal__products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width : 767px) {
	.seasonal__text {
		text-align: left;
	}
	.seasonal__name {
		font-size: 18px;
	}
	.seasonal__products {
		gap: 15px;
	}
	.seasonal__inner {
    	padding-block: 48px 54px;
	}
}
/*-----------------------------
こだわりの
-----------------------------*/
.craft {
	background: var(--color-variant-bg);
}
.craft__inner {
	padding-block: 39px;
}
.craft__block {
  display: flex;
}
.craft__image {
  object-fit: cover;
    width: 50%;
}
.craft__body {
	background: #fff;
	padding: 46px 42px 45px;
}
.craft__heading {
	font-size: 22px; 
	font-weight: 500;
	color: var(--color-variant);
	margin-bottom: 3px;
}
.craft__text {
	font-size: 14px;
	line-height: 1.9;
}
.craft__spec__inner {
	padding-block: 76px 0;
}
.craft__spec__title {
	font-size: 22px; 
	font-weight: 500;
	color: var(--color-variant);
	margin-bottom: 12px;
}
.craft__spec-list {
  display: grid;
  grid-template-columns: 179px 1fr;
  gap: 5px;
}
.craft__spec-label {
	background: var(--color-variant-bg-accent);
	color: #fff;
	font-size: 14px;
	padding: 10px 10px 11px;
	display: flex; 
	align-items: center; 
	justify-content: center;
}
.craft__spec-value {
	background: #fff;
	padding: 10px 18px 11px;
}
@media screen and (max-width : 1099px) {
	.craft__block {
		flex-direction: column;
	}
	.craft__image {
		width: 100%;
	}
	.craft__spec-list {
		display: block;
	}
}
@media screen and (max-width : 767px) {
	.craft__inner {
    	padding-block: 39px 50px;
	}
	.craft__body {
    	padding: 14px 18px 16px;
	}
	.craft__heading {
		margin-bottom: 0; 
		font-size: 20px;
	}
	.craft__text {
		line-height: 1.6;
	}
	.craft__spec__inner {
    	padding-block: 46px 0;
	}
	.craft__spec__title {
		font-size: 20px;
		margin-bottom: 6px;
	}
	.craft__spec-value {
    	padding: 11px 18px 10px;
    	margin-block: 4px;
    	font-size: 14px;
	}
}