@charset "UTF-8";
@keyframes cta-btn-flash {
  100% {
    left: 120%;
  }
}
/* --- 薬膳雑穀LP --- */
#zakkoku {
  --font-zen-gothic: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-zen-mincho: "Zen Old Mincho", serif;
  --font-noto: "Noto Sans JP", sans-serif;
  font-family: var(--font-zen-gothic);
  letter-spacing: 0;
}
#zakkoku * {
  box-sizing: border-box;
  letter-spacing: 0;
  line-height: 1.6;
}
#zakkoku .section {
  background: #fff;
}
#zakkoku .is-sp {
  display: none;
}
/* --- FV / 悩み画像 --- */
#zakkoku .mainImg,
#zakkoku .problemImg {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
#zakkoku .mainImg picture,
#zakkoku .mainImg img,
#zakkoku .problemImg picture,
#zakkoku .problemImg img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- 提案エリア --- */
#zakkoku .proposalArea {
  position: relative;
  width: 100%;
  max-width: 1180px;
  height: clamp(566.9745762712px, 73.7288135593vw, 870px);
  margin: 0 auto;
  overflow: visible;
  color: #231815;
  background-color: #231815;
  background-image: var(--proposal-bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
/* --- 見出し（木目バナー） --- */
#zakkoku .proposalArea__head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: clamp(100.3610169492px, 13.0508474576vw, 154px);
  padding-top: clamp(10.4271186441px, 1.3559322034vw, 16px);
  margin: 0;
}
#zakkoku .proposalArea__wood {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
#zakkoku .proposalArea__wood picture,
#zakkoku .proposalArea__wood img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
#zakkoku .proposalArea__eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(112.0915254237px, 14.5762711864vw, 172px);
  height: clamp(26.0677966102px, 3.3898305085vw, 40px);
  margin: 0;
  padding: clamp(2.606779661px, 0.3389830508vw, 4px) clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-family: var(--font-zen-gothic);
  font-size: clamp(13.0338983051px, 1.6949152542vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  color: #fffcf7;
  white-space: nowrap;
  background: #231815;
  border-radius: 32px;
}
#zakkoku .proposalArea__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-weight: 500;
  color: #fffcf7;
  white-space: nowrap;
}
#zakkoku .proposalArea__titleBrand {
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  line-height: 1.6;
}
#zakkoku .proposalArea__titleFrom {
  font-size: clamp(15.6406779661px, 2.0338983051vw, 24px);
  line-height: 1.6;
}
#zakkoku .proposalArea__titleAccent {
  font-size: clamp(26.0677966102px, 3.3898305085vw, 40px);
  line-height: 1.3;
  color: #fffb00;
}
/* --- メイン吹き出し --- */
#zakkoku .proposalArea__bubble {
  position: absolute;
  top: clamp(102.9677966102px, 13.3898305085vw, 158px);
  left: clamp(269.15px, 35vw, 413px);
  z-index: 5;
  width: clamp(217.6661016949px, 28.3050847458vw, 334px);
  margin: 0;
}
#zakkoku .proposalArea__bubble img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- パッケージ --- */
#zakkoku .proposalArea__package {
  position: absolute;
  top: clamp(239.1720338983px, 31.1016949153vw, 367px);
  left: clamp(297.8245762712px, 38.7288135593vw, 457px);
  z-index: 3;
  width: clamp(174.0025423729px, 22.6271186441vw, 267px);
  margin: 0;
}
#zakkoku .proposalArea__package img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- 7種の和漢素材 --- */
#zakkoku .proposalArea__wakan {
  position: absolute;
  top: clamp(213.1042372881px, 27.7118644068vw, 327px);
  left: clamp(73.6415254237px, 9.5762711864vw, 113px);
  z-index: 2;
  width: clamp(168.7889830508px, 21.9491525424vw, 259px);
  margin: 0;
}
#zakkoku .proposalArea__wakan picture,
#zakkoku .proposalArea__wakan img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- 和漢素材って --- */
#zakkoku .proposalArea__note {
  position: absolute;
  top: clamp(429.4669491525px, 55.8474576271vw, 659px);
  left: clamp(64.5177966102px, 8.3898305085vw, 99px);
  z-index: 3;
  width: clamp(202.0254237288px, 26.2711864407vw, 310px);
  height: clamp(92.5406779661px, 12.0338983051vw, 142px);
  margin: 0;
}
#zakkoku .proposalArea__noteBg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#zakkoku .proposalArea__noteTitle {
  position: absolute;
  top: clamp(18.2474576271px, 2.3728813559vw, 28px);
  left: 50%;
  z-index: 1;
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-weight: 600;
  line-height: 1;
  color: #231815;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}
#zakkoku .proposalArea__noteAccent {
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  color: #e35731;
  border-bottom: 1px dotted #e35731;
}
#zakkoku .proposalArea__noteSuffix {
  font-size: clamp(11.7305084746px, 1.5254237288vw, 18px);
}
#zakkoku .proposalArea__noteLead {
  position: absolute;
  top: clamp(53.4389830508px, 6.9491525424vw, 82px);
  left: 50%;
  z-index: 1;
  width: clamp(181.1711864407px, 23.5593220339vw, 278px);
  margin: 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-weight: 400;
  line-height: 1.8;
  color: #231815;
  text-align: left;
  transform: translateX(-50%);
}
#zakkoku .proposalArea__noteLead span {
  display: block;
  white-space: nowrap;
}
/* --- 大豆イソフラボン --- */
#zakkoku .proposalArea__iso {
  position: absolute;
  top: clamp(216.3627118644px, 28.1355932203vw, 332px);
  left: clamp(509.6254237288px, 66.2711864407vw, 782px);
  z-index: 2;
  width: clamp(171.3957627119px, 22.2881355932vw, 263px);
  margin: 0;
}
#zakkoku .proposalArea__iso picture,
#zakkoku .proposalArea__iso img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .ctaArea {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: #231815;
  background-color: #5c2e1f;
  background-image: var(--cta-bg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
#zakkoku .ctaArea__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36.4949152542px, 4.7457627119vw, 56px) clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .ctaArea--withBubble .ctaArea__inner,
#zakkoku .ctaArea--withSpec .ctaArea__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
}
/* --- 注文吹き出し --- */
#zakkoku .ctaArea__orderBubble {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}
#zakkoku .ctaArea__orderBubble picture,
#zakkoku .ctaArea__orderBubble img {
  display: block;
  width: clamp(307.6px, 40vw, 472px);
  height: auto;
}
/* --- CTA見出し --- */
#zakkoku .ctaArea__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(10.4271186441px, 1.3559322034vw, 16px) 0;
  color: #fff;
  text-align: center;
}
#zakkoku .ctaArea--withBubble .ctaArea__heading,
#zakkoku .ctaArea--withSpec .ctaArea__heading {
  margin-bottom: 0;
}
/* --- カートアイコン（見出し左に絶対配置） --- */
#zakkoku .ctaArea__headingInner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#zakkoku .ctaArea__cart {
  position: absolute;
  top: clamp(-42px, -3.5593220339vw, -27.3711864407px);
  right: 100%;
  z-index: 1;
  width: clamp(50.8322033898px, 6.6101694915vw, 78px);
  height: clamp(50.8322033898px, 6.6101694915vw, 78px);
  margin: 0 clamp(5.213559322px, 0.6779661017vw, 8px) 0 0;
}
#zakkoku .ctaArea__cart picture,
#zakkoku .ctaArea__cart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* --- 吹き出し付きCTAのカート位置 --- */
#zakkoku .ctaArea--withBubble .ctaArea__cart {
  top: clamp(-99px, -8.3898305085vw, -64.5177966102px);
  right: auto;
  left: clamp(-37px, -3.1355932203vw, -24.1127118644px);
  width: clamp(61.9110169492px, 8.0508474576vw, 95px);
  height: clamp(61.9110169492px, 8.0508474576vw, 95px);
  margin: 0;
}
#zakkoku .ctaArea__headingText {
  display: flex;
  flex-wrap: nowrap;
  align-items: last baseline;
  justify-content: center;
  gap: clamp(3.9101694915px, 0.5084745763vw, 6px);
  margin: 0;
}
#zakkoku .ctaArea__headingCopy {
  display: block;
  margin: 0;
}
#zakkoku .ctaArea__titleDeco {
  display: block;
  flex-shrink: 0;
  width: clamp(14.3372881356px, 1.8644067797vw, 22px);
  height: auto;
  transform: translateY(clamp(3.9101694915px, 0.5084745763vw, 6px));
}
#zakkoku .ctaArea__headingLabel,
#zakkoku .ctaArea__headingLead {
  /* Makeshop テーマの `p { width: 100% }` を打ち消し、1行表示を維持 */
  display: inline;
  width: fit-content;
  max-width: none;
  margin: 0;
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}
#zakkoku .ctaArea__headingLead {
  margin-left: 0.35em;
}
/* --- 商品カード --- */
#zakkoku .ctaArea__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(482.2542372881px, 62.7118644068vw, 740px);
  max-width: 100%;
  margin: 0 auto;
  gap: clamp(15.6406779661px, 2.0338983051vw, 24px);
  padding: clamp(26.0677966102px, 3.3898305085vw, 40px);
  background: #fff;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .ctaArea__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(15.6406779661px, 2.0338983051vw, 24px);
  width: 100%;
}
#zakkoku .ctaArea__product {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  width: clamp(207.2389830508px, 26.9491525424vw, 318px);
  min-width: 0;
}
#zakkoku .ctaArea__media {
  flex: 0 0 auto;
  width: clamp(91.8889830508px, 11.9491525424vw, 141px);
}
#zakkoku .ctaArea__media img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .ctaArea__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  min-width: 0;
  color: #231815;
  text-align: left;
}
#zakkoku .ctaArea__nameBlock {
  width: 100%;
}
#zakkoku .ctaArea__name {
  margin: 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(23.4610169492px, 3.0508474576vw, 36px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
#zakkoku .ctaArea__blend {
  width: fit-content;
  max-width: none;
  margin: clamp(-2px, -0.1694915254vw, -1.3033898305px) 0 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 500;
  line-height: 1.6;
}
#zakkoku .ctaArea__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: none;
  margin: 0;
  padding: clamp(2.606779661px, 0.3389830508vw, 4px) clamp(5.213559322px, 0.6779661017vw, 8px);
  font-size: clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-weight: 400;
  line-height: normal;
  color: #231815;
  white-space: nowrap;
  background: #eae1d4;
  border-radius: 40px;
}
#zakkoku .ctaArea__price {
  display: flex;
  flex-wrap: nowrap;
  align-items: last baseline;
  width: fit-content;
  max-width: none;
  margin: clamp(10.4271186441px, 1.3559322034vw, 16px) 0 0;
  line-height: 1;
  white-space: nowrap;
}
#zakkoku .ctaArea__priceNum {
  font-family: var(--font-zen-mincho);
  font-size: clamp(32.5847457627px, 4.2372881356vw, 50px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
#zakkoku .ctaArea__priceUnit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: clamp(1.3033898305px, 0.1694915254vw, 2px);
}
#zakkoku .ctaArea__priceTax {
  margin: 0 0 clamp(1.3033898305px, 0.1694915254vw, 2px) clamp(-6px, -0.5084745763vw, -3.9101694915px);
  font-family: var(--font-zen-mincho);
  font-size: clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-weight: 500;
  line-height: 1;
}
#zakkoku .ctaArea__priceYen {
  font-family: var(--font-zen-mincho);
  font-size: clamp(15.6406779661px, 2.0338983051vw, 24px);
  font-weight: 500;
  line-height: 1;
}
/* --- カートボタン装飾 --- */
#zakkoku .ctaArea__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  align-items: center;
  justify-content: flex-end;
  width: clamp(207.2389830508px, 26.9491525424vw, 318px);
  min-height: clamp(99.0576271186px, 12.8813559322vw, 152px);
}
#zakkoku .ctaArea__btnWrap {
  position: relative;
  display: block;
  width: 100%;
  padding-top: clamp(18.2474576271px, 2.3728813559vw, 28px);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
  #zakkoku .ctaArea__btnWrap:hover {
    transform: translateY(clamp(1.9550847458px, 0.2542372881vw, 3px));
  }
  #zakkoku .ctaArea__btnWrap:hover .ctaArea__btn--set {
    box-shadow: 0 clamp(0.6516949153px, 0.0847457627vw, 1px) 0 #1f6f8e;
  }
  #zakkoku .ctaArea__btnWrap:hover .ctaArea__btn--set::before {
    animation: cta-btn-flash 0.75s;
  }
#zakkoku .ctaArea__trial {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  background: #fff;
  border: 1px solid #1d7875;
  border-radius: 9999px;
  transform: translateX(-50%);
  /* 右上デコ（吹き出しの外側） */
}
#zakkoku .ctaArea__trial::before {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  content: "";
  background: var(--trial-deco) no-repeat center/contain;
}
  #zakkoku .ctaArea__trial::before {
    top: clamp(-6px, -0.5084745763vw, -3.9101694915px);
    right: clamp(-6px, -0.5084745763vw, -3.9101694915px);
    width: clamp(7.1686440678px, 0.9322033898vw, 11px);
    height: clamp(7.1686440678px, 0.9322033898vw, 11px);
  }
  #zakkoku .ctaArea__trial {
    min-height: clamp(23.4610169492px, 3.0508474576vw, 36px);
    padding: clamp(2.606779661px, 0.3389830508vw, 4px) clamp(20.8542372881px, 2.7118644068vw, 32px);
  }
#zakkoku .ctaArea__trialTip {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#zakkoku .ctaArea__trialTip::before, #zakkoku .ctaArea__trialTip::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateX(-50%);
  content: "";
}
#zakkoku .ctaArea__trialTip::before {
  z-index: 0;
  border-color: #1d7875 transparent transparent;
}
#zakkoku .ctaArea__trialTip::after {
  z-index: 1;
  border-color: #fff transparent transparent;
}
  #zakkoku .ctaArea__trialTip::before {
    bottom: clamp(-8px, -0.6779661017vw, -5.213559322px);
    border-width: clamp(5.213559322px, 0.6779661017vw, 8px) clamp(3.9101694915px, 0.5084745763vw, 6px) 0;
  }
  #zakkoku .ctaArea__trialTip::after {
    bottom: clamp(-7px, -0.593220339vw, -4.5618644068px);
    border-width: clamp(5.213559322px, 0.6779661017vw, 8px) clamp(3.9101694915px, 0.5084745763vw, 6px) 0;
  }
#zakkoku .ctaArea__trialText {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-noto);
  font-size: clamp(9.1237288136px, 1.186440678vw, 14px);
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
  white-space: nowrap;
}
#zakkoku .ctaArea__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  text-decoration: none;
  border-radius: 9999px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#zakkoku .ctaArea__btn::before {
  position: absolute;
  top: 0;
  left: -60%;
  z-index: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}
#zakkoku .ctaArea__btn > * {
  position: relative;
  z-index: 1;
}
#zakkoku .ctaArea__btn--set {
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  width: clamp(207.2389830508px, 26.9491525424vw, 318px);
  height: clamp(45.6186440678px, 5.9322033898vw, 70px);
  padding: 0 clamp(10.4271186441px, 1.3559322034vw, 16px);
  background: linear-gradient(180deg, #2dada9 0%, #3583a7 100%);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) 0 #1f6f8e;
}
#zakkoku .ctaArea__btn--single {
  width: clamp(162.9237288136px, 21.186440678vw, 250px);
  height: clamp(32.5847457627px, 4.2372881356vw, 50px);
  padding: 0 clamp(26.0677966102px, 3.3898305085vw, 40px);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  background: linear-gradient(180deg, #e89003 0%, #e86100 100%);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) 0 #c85905;
}
  #zakkoku .ctaArea__btn--single:hover {
    transform: translateY(clamp(1.9550847458px, 0.2542372881vw, 3px));
    box-shadow: 0 clamp(0.6516949153px, 0.0847457627vw, 1px) 0 #c85905;
  }
  #zakkoku .ctaArea__btn--single:hover::before {
    animation: cta-btn-flash 0.75s;
  }
#zakkoku .ctaArea__ship {
  display: grid;
  flex: 0 0 clamp(28.6745762712px, 3.7288135593vw, 44px);
  place-items: center;
  width: clamp(28.6745762712px, 3.7288135593vw, 44px);
  height: clamp(28.6745762712px, 3.7288135593vw, 44px);
  font-size: clamp(8.4720338983px, 1.1016949153vw, 13px);
  font-weight: 900;
  line-height: 1.29;
  color: #338ca7;
  text-align: center;
  background: #fff7b2;
  border-radius: 32px;
}
#zakkoku .ctaArea__btnText {
  flex: 0 1 auto;
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}
#zakkoku .ctaArea__btnTextMain {
  font-size: clamp(15.6406779661px, 2.0338983051vw, 24px);
}
#zakkoku .ctaArea__btnTextSub {
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .ctaArea__arrow {
  display: grid;
  flex: 0 0 clamp(15.6406779661px, 2.0338983051vw, 24px);
  place-items: center;
  width: clamp(15.6406779661px, 2.0338983051vw, 24px);
  height: clamp(15.6406779661px, 2.0338983051vw, 24px);
  border: 1px solid #fff;
  border-radius: 40px;
}
#zakkoku .ctaArea__arrow::before {
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-width: 0.28em 0 0.28em 0.4em;
  border-color: transparent transparent transparent #fff;
  transform: translateX(12%);
}
#zakkoku .ctaArea__btn--single .ctaArea__arrow {
  position: absolute;
  top: 50%;
  right: clamp(10.4271186441px, 1.3559322034vw, 16px);
  transform: translateY(-50%);
}
/* --- 成分・規格表 --- */
#zakkoku .ctaArea__spec {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: #231815;
}
#zakkoku .ctaArea__spec th,
#zakkoku .ctaArea__spec td {
  padding: clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(5.213559322px, 0.6779661017vw, 8px);
  font-family: var(--font-zen-gothic);
  font-size: clamp(9.1237288136px, 1.186440678vw, 14px);
  line-height: 1.6;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #999;
}
#zakkoku .ctaArea__spec th {
  width: clamp(83.4169491525px, 10.8474576271vw, 128px);
  font-weight: 700;
  background: #eee;
}
#zakkoku .ctaArea__spec td {
  font-weight: 400;
  word-break: break-word;
  background: #fff;
}
#zakkoku .ctaArea__specNote {
  font-size: clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-weight: 400;
  line-height: 1.6;
}
#zakkoku .aboutArea {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible;
  color: #231815;
  background-color: #f7f4ef;
  background-image: var(--texture-bg);
  background-position: left top;
  background-size: clamp(418.3881355932px, 54.406779661vw, 642px) clamp(628.8855932203px, 81.7796610169vw, 965px);
  background-repeat: repeat;
}
#zakkoku .aboutArea__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(26.0677966102px, 3.3898305085vw, 40px);
  align-items: center;
  max-width: clamp(560.4576271186px, 72.8813559322vw, 860px);
  margin: 0 auto;
  padding: clamp(41.7084745763px, 5.4237288136vw, 64px) 0;
  overflow: visible;
}
/* --- ABOUT見出し --- */
#zakkoku .aboutArea__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}
#zakkoku .aboutArea__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 clamp(14.3372881356px, 1.8644067797vw, 22px);
  padding: clamp(5.213559322px, 0.6779661017vw, 8px) clamp(10.4271186441px, 1.3559322034vw, 16px);
  background: #fff;
  border: 1px solid #6a4940;
  border-radius: clamp(5.213559322px, 0.6779661017vw, 8px);
}
#zakkoku .aboutArea__eyebrow picture,
#zakkoku .aboutArea__eyebrow img {
  display: block;
  width: clamp(213.7559322034px, 27.7966101695vw, 328px);
  height: auto;
}
#zakkoku .aboutArea__title {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
#zakkoku .aboutArea__titleLine {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
}
#zakkoku .aboutArea__titleAccent {
  color: #e35731;
}
#zakkoku .aboutArea__titleLg {
  font-size: clamp(39.1016949153px, 5.0847457627vw, 60px);
}
#zakkoku .aboutArea__titleSm {
  font-size: clamp(27.3711864407px, 3.5593220339vw, 42px);
}
#zakkoku .aboutArea__titleDe {
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  color: #231815;
}
#zakkoku .aboutArea__titleSupport {
  position: relative;
  display: inline-block;
  padding-bottom: clamp(5.213559322px, 0.6779661017vw, 8px);
  font-size: clamp(32.5847457627px, 4.2372881356vw, 50px);
  color: #231815;
  isolation: isolate;
}
#zakkoku .aboutArea__titleDeco {
  position: absolute;
  z-index: -1;
  display: block;
  pointer-events: none;
  bottom: clamp(-10px, -0.8474576271vw, -6.5169491525px);
  left: 50%;
  width: clamp(196.1601694915px, 25.5084745763vw, 301px);
  transform: translateX(calc(-50% + clamp(7.8203389831px, 1.0169491525vw, 12px)));
}
#zakkoku .aboutArea__titleDeco img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- そもそも + 定義 + 恵み --- */
#zakkoku .aboutArea__body {
  display: flex;
  flex-direction: column;
  gap: clamp(36.4949152542px, 4.7457627119vw, 56px);
  align-items: center;
  width: 100%;
  margin: 0;
  overflow: visible;
}
#zakkoku .aboutArea__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(36.4949152542px, 4.7457627119vw, 56px);
  align-items: center;
  width: 100%;
  overflow: visible;
}
#zakkoku .aboutArea__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(233.306779661px, 30.3389830508vw, 358px);
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 600;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .aboutArea__lead::before, #zakkoku .aboutArea__lead::after {
  flex: 1 1 auto;
  height: 1px;
  content: "";
  background-image: linear-gradient(to right, #6a4940 0 2px, transparent 2px 4px);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 4px 1px;
}
#zakkoku .aboutArea__lead::before {
  margin-right: clamp(9.1237288136px, 1.186440678vw, 14px);
}
#zakkoku .aboutArea__lead::after {
  margin-left: clamp(9.1237288136px, 1.186440678vw, 14px);
}
#zakkoku .aboutArea__lead span {
  flex: 0 0 auto;
}
#zakkoku .aboutArea__defs {
  display: grid;
  grid-template-columns: clamp(233.306779661px, 30.3389830508vw, 358px) clamp(233.306779661px, 30.3389830508vw, 358px);
  grid-template-rows: auto auto 1fr;
  row-gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  column-gap: clamp(56.6974576271px, 7.3728813559vw, 87px);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  overflow: visible;
}
#zakkoku .aboutArea__def {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-items: stretch;
  width: 100%;
  max-width: clamp(233.306779661px, 30.3389830508vw, 358px);
  min-width: 0;
  min-height: clamp(285.4423728814px, 37.1186440678vw, 438px);
  overflow: visible;
}
/* --- 定義カード写真（羽付き透過PNG） --- */
#zakkoku .aboutArea__defPhoto {
  position: absolute;
  top: clamp(-37px, -3.1355932203vw, -24.1127118644px);
  right: clamp(-45px, -3.813559322vw, -29.3262711864px);
  z-index: 0;
  width: clamp(151.8449152542px, 19.7457627119vw, 233px);
  aspect-ratio: 466/476;
  pointer-events: none;
  background-image: var(--def-photo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#zakkoku .aboutArea__defPhoto--zenryu {
  top: clamp(-40px, -3.3898305085vw, -26.0677966102px);
  right: clamp(-57px, -4.8305084746vw, -37.1466101695px);
  width: clamp(150.5415254237px, 19.5762711864vw, 231px);
  aspect-ratio: 462/392;
}
#zakkoku .aboutArea__defLabel {
  position: relative;
  z-index: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(29.9779661017px, 3.8983050847vw, 46px);
  margin: 0;
  padding: clamp(1.3033898305px, 0.1694915254vw, 2px) clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-family: var(--font-zen-mincho);
  font-size: clamp(15.6406779661px, 2.0338983051vw, 24px);
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  background: #e35731;
  border-radius: 48px;
}
#zakkoku .aboutArea__defHeading {
  position: relative;
  z-index: 1;
  align-self: start;
  max-width: clamp(160.3169491525px, 20.8474576271vw, 246px);
  padding-left: clamp(5.213559322px, 0.6779661017vw, 8px);
  text-shadow: 0 4px 4px #fff;
}
#zakkoku .aboutArea__def--zenryu .aboutArea__defHeading {
  max-width: 100%;
}
#zakkoku .aboutArea__defNote {
  margin: 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(9.1237288136px, 1.186440678vw, 14px);
  font-weight: 400;
  line-height: 1.6;
}
#zakkoku .aboutArea__defLead {
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  font-weight: 500;
  line-height: 1.3;
}
#zakkoku .aboutArea__defCard {
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 100%;
  height: 100%;
  padding: clamp(26.0677966102px, 3.3898305085vw, 40px) clamp(15.6406779661px, 2.0338983051vw, 24px);
  background: #fff;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) clamp(1.3033898305px, 0.1694915254vw, 2px) rgba(0, 0, 0, 0.15);
}
#zakkoku .aboutArea__defCard p {
  margin: 0;
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .aboutArea__defCard strong {
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(#fff7b2, #fff7b2);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 1em;
}
/* --- 7つの自然の恵み --- */
#zakkoku .aboutArea__bless {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}
#zakkoku .aboutArea__blessHead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: clamp(350.6118644068px, 45.593220339vw, 538px);
}
#zakkoku .aboutArea__blessLabels {
  display: flex;
  flex-direction: column;
  gap: clamp(3.2584745763px, 0.4237288136vw, 5px);
  align-items: center;
  margin: 0 0 clamp(5.213559322px, 0.6779661017vw, 8px);
}
#zakkoku .aboutArea__blessLabels p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: clamp(26.0677966102px, 3.3898305085vw, 40px);
  margin: 0;
  padding: 0 clamp(6.5169491525px, 0.8474576271vw, 10px);
  font-family: var(--font-zen-mincho);
  font-size: clamp(13.0338983051px, 1.6949152542vw, 20px);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  background: #231815;
}
#zakkoku .aboutArea__blessTitle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-weight: 500;
  line-height: 1;
  color: #e35731;
  text-align: center;
}
#zakkoku .aboutArea__blessNum {
  font-size: clamp(52.1355932203px, 6.7796610169vw, 80px);
  line-height: 1;
}
#zakkoku .aboutArea__blessText {
  font-size: clamp(26.0677966102px, 3.3898305085vw, 40px);
  line-height: 1;
}
#zakkoku .aboutArea__blessDeco {
  width: 100%;
  margin: clamp(3.9101694915px, 0.5084745763vw, 6px) 0 0;
}
#zakkoku .aboutArea__blessDeco picture,
#zakkoku .aboutArea__blessDeco img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .aboutArea__blessImg {
  width: clamp(350.6118644068px, 45.593220339vw, 538px);
  margin-top: clamp(-4px, -0.3389830508vw, -2.606779661px);
}
#zakkoku .aboutArea__blessImg picture,
#zakkoku .aboutArea__blessImg img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- 穀物特長アコーディオン --- */
#zakkoku .aboutArea__accordion {
  width: 100%;
  /* close時はボタン下の影（box-shadow）を切らない */
  overflow: visible;
  background: #ffefe1;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) clamp(1.3033898305px, 0.1694915254vw, 2px) rgba(154, 154, 154, 0.15);
}
#zakkoku .aboutArea__accordion[open] {
  overflow: hidden;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(10.4271186441px, 1.3559322034vw, 16px) 0 0;
}
#zakkoku .aboutArea__accordionBtn {
  display: flex;
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(46.9220338983px, 6.1016949153vw, 72px);
  padding: clamp(5.213559322px, 0.6779661017vw, 8px) clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-family: var(--font-zen-gothic);
  font-size: clamp(13.0338983051px, 1.6949152542vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  list-style: none;
  cursor: pointer;
  background: #e35731;
  border: 0;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) 0 #be4727;
  transition: background-color 0.2s ease;
}
#zakkoku .aboutArea__accordionBtn::-webkit-details-marker {
  display: none;
}
  #zakkoku .aboutArea__accordionBtn:hover {
    background: #ff7e5b;
  }
#zakkoku .aboutArea__accordionIcon {
  display: block;
  flex: 0 0 clamp(15.6406779661px, 2.0338983051vw, 24px);
  width: clamp(15.6406779661px, 2.0338983051vw, 24px);
  height: clamp(15.6406779661px, 2.0338983051vw, 24px);
  transition: transform 0.25s ease;
  /* icon_up は左向き。閉じ時は下向き（展開を示す） */
  transform: rotate(-90deg);
}
#zakkoku .aboutArea__accordion[open] .aboutArea__accordionIcon {
  /* 開いているときは上向き（折りたたみを示す） */
  transform: rotate(90deg);
}
#zakkoku .aboutArea__accordionPanel {
  display: none;
  padding: clamp(26.0677966102px, 3.3898305085vw, 40px) clamp(15.6406779661px, 2.0338983051vw, 24px);
}
#zakkoku .aboutArea__accordion[open] .aboutArea__accordionPanel {
  display: block;
}
#zakkoku .aboutArea__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .aboutArea__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #231815;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .aboutArea__cardMedia {
  width: 100%;
  height: clamp(109.4847457627px, 14.2372881356vw, 168px);
  overflow: hidden;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(10.4271186441px, 1.3559322034vw, 16px) 0 0;
}
#zakkoku .aboutArea__cardMedia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#zakkoku .aboutArea__cardBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  padding: clamp(15.6406779661px, 2.0338983051vw, 24px) clamp(10.4271186441px, 1.3559322034vw, 16px);
  background: #fffcf7;
  border-radius: 0 0 clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .aboutArea__cardTxt {
  display: flex;
  flex-direction: column;
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  width: 100%;
}
#zakkoku .aboutArea__cardName {
  margin: 0;
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .aboutArea__cardText {
  margin: 0;
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .aboutArea__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.606779661px, 0.3389830508vw, 4px);
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
#zakkoku .aboutArea__tags li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.9101694915px, 0.5084745763vw, 6px) clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-size: clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  background: #e35731;
  border-radius: 9999px;
}
/* --- こんな方におすすめ --- */
#zakkoku .recommendArea {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible;
  color: #231815;
  background-color: #f7f1df;
  background-image: var(--recommend-bg);
  background-position: left top;
  background-size: clamp(265.2398305085px, 34.4915254237vw, 407px) auto;
  background-repeat: repeat;
}
#zakkoku .recommendArea__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(41.7084745763px, 5.4237288136vw, 64px) clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(31.2813559322px, 4.0677966102vw, 48px);
  overflow: visible;
}
#zakkoku .recommendArea__title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(261.9813559322px, 34.0677966102vw, 402px);
  height: clamp(54.0906779661px, 7.0338983051vw, 83px);
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-size: clamp(26.0677966102px, 3.3898305085vw, 40px);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  background: #6a4940;
  border-radius: 99999px;
}
#zakkoku .recommendArea__title::after {
  position: absolute;
  top: clamp(-6px, -0.5084745763vw, -3.9101694915px);
  left: clamp(-3px, -0.2542372881vw, -1.9550847458px);
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: "";
  border: 1px solid #e35731;
  border-radius: 99999px;
}
#zakkoku .recommendArea__titleAccent {
  color: #fff175;
}
#zakkoku .recommendArea__leadWrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(417.0847457627px, 54.2372881356vw, 640px);
  margin: clamp(26.0677966102px, 3.3898305085vw, 40px) 0 0;
}
#zakkoku .recommendArea__lead {
  display: flex;
  flex-direction: column;
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  align-items: center;
  justify-content: center;
  padding: clamp(26.0677966102px, 3.3898305085vw, 40px) clamp(10.4271186441px, 1.3559322034vw, 16px);
  line-height: 1.6;
  background: linear-gradient(180deg, #fff 0%, #fefbf3 100%);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) clamp(2.606779661px, 0.3389830508vw, 4px) #e1d8bc;
}
#zakkoku .recommendArea__lead p {
  width: 100%;
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 600;
  text-align: center;
}
#zakkoku .recommendArea__em {
  color: #e35731;
}
#zakkoku .recommendArea__azuki {
  position: absolute;
  right: clamp(-130px, -11.0169491525vw, -84.7203389831px);
  bottom: clamp(-30px, -2.5423728814vw, -19.5508474576px);
  z-index: 2;
  display: block;
  width: clamp(141.4177966102px, 18.3898305085vw, 217px);
  height: auto;
  pointer-events: none;
}
#zakkoku .recommendArea__azuki img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .recommendArea__cards {
  position: relative;
  width: 100%;
  max-width: clamp(625.6271186441px, 81.3559322034vw, 960px);
  height: clamp(219.6211864407px, 28.5593220339vw, 337px);
  margin: clamp(31.2813559322px, 4.0677966102vw, 48px) 0 0;
  padding: 0;
  overflow: visible;
  list-style: none;
}
#zakkoku .recommendArea__card {
  position: relative;
  margin: 0;
  padding: 0;
}
#zakkoku .recommendArea__card picture,
#zakkoku .recommendArea__card img {
  display: block;
  width: 100%;
  height: auto;
}
  #zakkoku .recommendArea__card {
    position: absolute;
  }
#zakkoku .recommendArea__card--meal {
  z-index: 1;
}
  #zakkoku .recommendArea__card--meal {
    top: clamp(13.6855932203px, 1.7796610169vw, 21px);
    left: 0;
    width: clamp(235.913559322px, 30.6779661017vw, 362px);
  }
#zakkoku .recommendArea__card--family {
  z-index: 2;
}
  #zakkoku .recommendArea__card--family {
    top: clamp(72.3381355932px, 9.406779661vw, 111px);
    left: clamp(201.3737288136px, 26.186440678vw, 309px);
    width: clamp(222.2279661017px, 28.8983050847vw, 341px);
  }
#zakkoku .recommendArea__card--health {
  z-index: 3;
}
  #zakkoku .recommendArea__card--health {
    top: 0;
    left: clamp(392.3203389831px, 51.0169491525vw, 602px);
    width: clamp(233.306779661px, 30.3389830508vw, 358px);
  }
/* --- でも… --- */
#zakkoku .concernArea {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
#zakkoku .concernArea__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(37.7983050847px, 4.9152542373vw, 58px);
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: #231815;
  text-align: center;
  background: #a99f96;
}
#zakkoku .concernArea__img {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f2ebe1;
}
#zakkoku .concernArea__img picture,
#zakkoku .concernArea__img img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- こだわり（おいしさ＋簡便性） --- */
#zakkoku .appealArea {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  color: #231815;
  background-color: #f7f1df;
  background-image: var(--appeal-bg);
  background-position: left top;
  background-size: clamp(265.2398305085px, 34.4915254237vw, 407px) auto;
  background-repeat: repeat;
}
#zakkoku .appealArea__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(26.0677966102px, 3.3898305085vw, 40px);
}
#zakkoku .appealArea__banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: clamp(456.186440678px, 59.3220338983vw, 700px);
  height: clamp(75.5966101695px, 9.8305084746vw, 116px);
  margin: 0;
}
#zakkoku .appealArea__banner picture,
#zakkoku .appealArea__banner .appealArea__bannerShape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#zakkoku .appealArea__banner img {
  display: block;
  width: 100%;
  height: 100%;
}
#zakkoku .appealArea__bannerText {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: clamp(15.6406779661px, 2.0338983051vw, 24px) clamp(10.4271186441px, 1.3559322034vw, 16px) 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(15.6406779661px, 2.0338983051vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  color: #fffcf7;
  text-align: center;
}
#zakkoku .appealArea__brSp {
  display: none;
}
#zakkoku .appealArea__head {
  display: flex;
  flex-direction: column;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  align-items: center;
  width: 100%;
  max-width: clamp(560.4576271186px, 72.8813559322vw, 860px);
  margin: clamp(26.0677966102px, 3.3898305085vw, 40px) 0 0;
}
#zakkoku .appealArea__lead {
  position: relative;
  width: fit-content;
  max-width: clamp(337.5779661017px, 43.8983050847vw, 518px);
  margin: 0 auto;
  padding-bottom: clamp(5.213559322px, 0.6779661017vw, 8px);
  font-family: var(--font-zen-gothic);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 400;
  line-height: 1.8;
  color: #231815;
  text-align: center;
}
#zakkoku .appealArea__lead::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 0;
  content: "";
  border-bottom: 1px dashed #cf9b48;
}
  #zakkoku .appealArea__leadLine + #zakkoku .appealArea__leadLine::before {
    content: " ";
  }
#zakkoku .appealArea__headline {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(2.606779661px, 0.3389830508vw, 4px);
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-zen-gothic);
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .appealArea__headlinePrimary,
#zakkoku .appealArea__headlineSecondary {
  display: contents;
}
#zakkoku .appealArea__deco {
  display: block;
  flex-shrink: 0;
  width: clamp(20.2025423729px, 2.6271186441vw, 31px);
  height: clamp(29.9779661017px, 3.8983050847vw, 46px);
}
  #zakkoku .appealArea__deco--left {
    order: -1;
  }
#zakkoku .appealArea__deco--right {
  transform: scaleX(-1);
}
#zakkoku .appealArea__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(5.213559322px, 0.6779661017vw, 8px);
  font-family: var(--font-zen-mincho);
  font-size: clamp(26.0677966102px, 3.3898305085vw, 40px);
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  background: #cf9b48;
  border-radius: clamp(5.213559322px, 0.6779661017vw, 8px);
}
#zakkoku .appealArea__plus,
#zakkoku .appealArea__headlineOf {
  flex-shrink: 0;
}
  #zakkoku .appealArea__headlineOf {
    display: none;
  }
#zakkoku .appealArea__headlineRest {
  flex-shrink: 0;
  white-space: nowrap;
}
#zakkoku .appealArea__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(15.6406779661px, 2.0338983051vw, 24px);
  align-items: stretch;
  width: 100%;
  max-width: clamp(560.4576271186px, 72.8813559322vw, 860px);
  margin: clamp(26.0677966102px, 3.3898305085vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
#zakkoku .appealArea__card {
  display: flex;
  flex-direction: column;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  margin: 0;
  padding: clamp(26.0677966102px, 3.3898305085vw, 40px) clamp(15.6406779661px, 2.0338983051vw, 24px);
  background: #fff;
  border-radius: clamp(10.4271186441px, 1.3559322034vw, 16px);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) clamp(2.606779661px, 0.3389830508vw, 4px) rgba(0, 0, 0, 0.15);
}
#zakkoku .appealArea__cardHead {
  display: flex;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  align-items: center;
  width: 100%;
}
#zakkoku .appealArea__cardIcon {
  display: block;
  flex-shrink: 0;
  width: clamp(39.1016949153px, 5.0847457627vw, 60px);
  height: clamp(39.1016949153px, 5.0847457627vw, 60px);
}
#zakkoku .appealArea__cardIcon img {
  display: block;
  width: 100%;
  height: 100%;
}
#zakkoku .appealArea__cardTitle {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-zen-mincho);
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: #e35731;
}
#zakkoku .appealArea__cardTitle--split {
  font-size: 0;
  line-height: 0;
}
#zakkoku .appealArea__cardTitleAccent {
  font-size: clamp(20.8542372881px, 2.7118644068vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: #e35731;
}
#zakkoku .appealArea__cardTitleSub {
  font-size: clamp(15.6406779661px, 2.0338983051vw, 24px);
  font-weight: 600;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .appealArea__cardBody {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-family: var(--font-zen-gothic);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: #231815;
  border-top: 1px dashed #6a4940;
}
#zakkoku .appealArea__cardBody p {
  margin: 0;
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
}
#zakkoku .appealArea__cardBody em {
  font-family: var(--font-zen-gothic);
  font-style: normal;
  font-weight: 700;
  color: #e35731;
}
#zakkoku .appealArea__visual {
  width: 100%;
  max-width: clamp(417.0847457627px, 54.2372881356vw, 640px);
  margin: clamp(26.0677966102px, 3.3898305085vw, 40px) 0 0;
}
#zakkoku .appealArea__visual picture,
#zakkoku .appealArea__visual img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- 炊き方 / 味変レシピ --- */
#zakkoku .howtoArea {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: #231815;
  background-color: #f7f4ef;
  background-image: var(--texture-bg);
  background-position: left top;
  background-size: clamp(418.3881355932px, 54.406779661vw, 642px) clamp(628.8855932203px, 81.7796610169vw, 965px);
  background-repeat: repeat;
}
#zakkoku .howtoArea__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(26.0677966102px, 3.3898305085vw, 40px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(41.7084745763px, 5.4237288136vw, 64px) clamp(10.4271186441px, 1.3559322034vw, 16px);
}
/* --- 炊き方 --- */
#zakkoku .howtoArea__cook {
  display: flex;
  flex-direction: column;
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  align-items: center;
  width: 100%;
  max-width: clamp(453.5796610169px, 58.9830508475vw, 696px);
}
#zakkoku .howtoArea__cookTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(254.1610169492px, 33.0508474576vw, 390px);
  height: clamp(125.1254237288px, 16.2711864407vw, 192px);
  margin: 0;
  padding: clamp(10.4271186441px, 1.3559322034vw, 16px) 0 clamp(5.213559322px, 0.6779661017vw, 8px);
}
#zakkoku .howtoArea__cookTitle img {
  display: block;
  width: clamp(222.2279661017px, 28.8983050847vw, 341px);
  height: auto;
}
#zakkoku .howtoArea__cookCard {
  display: flex;
  gap: clamp(26.0677966102px, 3.3898305085vw, 40px);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: clamp(26.0677966102px, 3.3898305085vw, 40px);
  background: #fff;
  border-radius: clamp(26.0677966102px, 3.3898305085vw, 40px);
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) clamp(1.3033898305px, 0.1694915254vw, 2px) rgba(154, 154, 154, 0.15);
}
#zakkoku .howtoArea__steps {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: clamp(191.5983050847px, 24.9152542373vw, 294px);
  margin: 0;
  padding: 0;
  list-style: none;
}
#zakkoku .howtoArea__step {
  display: flex;
  gap: clamp(10.4271186441px, 1.3559322034vw, 16px);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: clamp(15.6406779661px, 2.0338983051vw, 24px) 0;
  border-bottom: 1px dashed #6a4940;
}
#zakkoku .howtoArea__step:first-child {
  padding-top: 0;
}
#zakkoku .howtoArea__step--last {
  border-bottom: 0;
  padding-bottom: 0;
}
#zakkoku .howtoArea__stepIcon {
  flex-shrink: 0;
  display: block;
  width: clamp(32.5847457627px, 4.2372881356vw, 50px);
  height: auto;
}
#zakkoku .howtoArea__stepIcon img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .howtoArea__stepBody {
  display: flex;
  flex-direction: column;
  gap: clamp(5.213559322px, 0.6779661017vw, 8px);
  min-width: 0;
}
#zakkoku .howtoArea__stepText {
  margin: 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(10.4271186441px, 1.3559322034vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .howtoArea__stepNote {
  margin: 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(7.8203389831px, 1.0169491525vw, 12px);
  font-weight: 400;
  line-height: 1.6;
  color: #231815;
}
#zakkoku .howtoArea__cookVisual {
  flex-shrink: 0;
  width: clamp(183.7779661017px, 23.8983050847vw, 282px);
}
#zakkoku .howtoArea__cookVisual img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- 味変レシピ --- */
#zakkoku .howtoArea__recipes {
  display: flex;
  flex-direction: column;
  gap: clamp(26.0677966102px, 3.3898305085vw, 40px);
  align-items: center;
  width: 100%;
  max-width: clamp(645.1779661017px, 83.8983050847vw, 990px);
}
#zakkoku .howtoArea__recipesHead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: clamp(304.993220339px, 39.6610169492vw, 468px);
  padding-top: clamp(31.2813559322px, 4.0677966102vw, 48px);
}
#zakkoku .howtoArea__bubble {
  position: absolute;
  top: clamp(7.8203389831px, 1.0169491525vw, 12px);
  left: clamp(27.3711864407px, 3.5593220339vw, 42px);
  display: block;
  width: clamp(75.5966101695px, 9.8305084746vw, 116px);
  transform: rotate(-11.89deg);
  transform-origin: center center;
}
#zakkoku .howtoArea__bubble picture,
#zakkoku .howtoArea__bubble img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .howtoArea__recipesTitle {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-zen-gothic);
  font-size: clamp(26.0677966102px, 3.3898305085vw, 40px);
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
  text-align: center;
}
#zakkoku .howtoArea__recipesAccent {
  color: #e35731;
}
#zakkoku .howtoArea__pen {
  position: relative;
  top: clamp(-8px, -0.6779661017vw, -5.213559322px);
  left: clamp(-43px, -3.6440677966vw, -28.0228813559px);
  z-index: 0;
  display: block;
  width: clamp(265.8915254237px, 34.5762711864vw, 408px);
  margin-top: clamp(-8px, -0.6779661017vw, -5.213559322px);
}
#zakkoku .howtoArea__pen img {
  display: block;
  width: 100%;
  height: auto;
}
#zakkoku .howtoArea__recipeList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(15.6406779661px, 2.0338983051vw, 24px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#zakkoku .howtoArea__recipeCard {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: #fff;
  border: clamp(3.2584745763px, 0.4237288136vw, 5px) solid #fff;
  box-shadow: 0 clamp(2.606779661px, 0.3389830508vw, 4px) clamp(2.606779661px, 0.3389830508vw, 4px) rgba(154, 154, 154, 0.15);
}
#zakkoku .howtoArea__recipeMedia {
  width: 100%;
  aspect-ratio: 315/197;
  overflow: hidden;
}
#zakkoku .howtoArea__recipeMedia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#zakkoku .howtoArea__recipeName {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(10.4271186441px, 1.3559322034vw, 16px) clamp(5.213559322px, 0.6779661017vw, 8px);
  font-family: var(--font-zen-gothic);
  font-size: clamp(11.7305084746px, 1.5254237288vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
  text-align: center;
  background: #fff;
}