#mainwrap {
  background-image: url("/img/pattern_02.png");
  background-position: center;
  background-repeat: repeat;
}
body[wc-view-code="sp"] #mainwrap {
  background-size: 200px 200px;
}


.heroheader {
  position: relative;
  z-index: 1;
  background-image: url("/img/pattern_01.png");
  background-position: center;
  background-repeat: repeat;
  display: flex;
  overflow: hidden;
}
body[wc-view-code="sp"] .heroheader,
body[wc-view-code="pc"] .heroheader {
  width: 100%;
  height: calc(var(--windowfixdheight) - 2.5rem);
}
body[wc-view-code="sp"] .heroheader {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  background-size: 100px 100px;
}
body:not([wc-view-code="sp"]) .heroheader {
  flex-flow: row-reverse;
  justify-content: center;
  align-items: center;
}
body[wc-view-code="tb"] .heroheader {
  height: 70vw;
}
.heroheader::before,
.heroheader::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  bottom: 0;
  width: 50%;
  background-image: url("/img/pattern_02.png");
  background-position: center;
  background-repeat: repeat;
}
body:not([wc-view-code="pc"]) .heroheader::before,
body:not([wc-view-code="pc"]) .heroheader::after {
  height: 25vw;
  background-size: 200px 200px;
}
body[wc-view-code="pc"] .heroheader::before,
body[wc-view-code="pc"] .heroheader::after {
  height: calc(var(--windowfixdheight) * 0.2);
}
.heroheader::before {
  left: 0;
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.heroheader::after {
  right: 0;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.heroheader .heroheadertitle {
  position: absolute;
  z-index: 3;
  top: calc(var(--avesize) * 3);
  left: calc(50% - 144px);
  width: 288px;
  height: 72px;
  background-image: url("/img/logo/heroheader.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.heroheader .mainitem,
.heroheader .itemimage,
.heroheader .itemdata {
  position: relative;
  z-index: 1;
}
body[wc-view-code] .heroheader .itemimage {
  transition: transform 0.6s ease;
}
.heroheader figure img {
  width: 100%;
  height: auto;
}
body[wc-view-code="sp"] .heroheader .itemimage {
  transform: translateY(-38.2%);
}
html:not(.pageloading) body[wc-view-code="sp"] .heroheader .itemimage {
  transform: translateY(0);
}
body[wc-view-code="sp"] .heroheader .itemimage,
body[wc-view-code="sp"] .heroheader .mainitem {
  width: 100vw;
  flex: none;
}
body[wc-view-code="tb"] .heroheader > figure {
  width: 640px;
  height: 640px;
  position: absolute;
  left: 50%;
  transform: translate(-100%,-50%);
  top: 50%;
}
body:not([wc-view-code="sp"]):not([wc-view-code="tb"]) .heroheader .itemimage,
body:not([wc-view-code="sp"]):not([wc-view-code="tb"]) .heroheader .mainitem {
  width: calc(var(--innerWidth) * 0.5);
}
.heroheader .mainitem {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  gap: calc(var(--avesize) * 2);
}
body[wc-view-code="sp"] .heroheader .mainitem {
  padding-top: calc(var(--avesize) * 6 + 72px);
  min-height: 100vw;
}
body[wc-view-code="tb"] .heroheader .mainitem {
  width: 50vw;
  margin-left: auto;
}
.heroheader .mainitem > * {
  flex: none;
}
.heroheader .mainitem img {
  width: 100%;
  height: auto;
}
.heroheader .mainitem .bgitem {
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
}
.heroheader .itemdata {
  width: 100%;
  padding-top: calc(var(--avesize) * 2);
}
.heroheader .mainitem .itemcatchcopy {
  padding: 0 calc(var(--avesize) * 2);
  text-align: center;
  position: relative;
  z-index: 1;
  word-break: keep-all;
}
.heroheader .mainitem .itemcatchcopy .bgitem {
  top: 100%;
}
.heroheader .mainitem .strongtype {
  font-weight: 700;
}
.heroheader .mainitem .largetype {
  font-size: 1.6rem;
}
.heroheader .mainitem .whitetype {
  color: var(--contrastColor);
}
.heroheader .mainitem .pricearea {
  font-family: "Number";
}
.heroheader .mainitem .pricearea::after {
  content: "円";
  font-family: var(--jptype);
  font-size: 1rem;
}
.heroheader .mainitem .linkbtn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--avesize) * 2);
  height: var(--headerBtnSize);
  border-radius: calc(var(--avesize) * 2);
  background-color: var(--bgcolor,var(--accentColor));
}
.heroheader .mainitem .linkbtn.textnone[text-be]::before,
.heroheader .mainitem .linkbtn.textnone[text-af]::after,
.heroheader .mainitem .linkbtn:not(.textnone) {
  font-weight: 700;
  color: var(--color,var(--contrastColor));
}
.heroheader .pickupitem {
  position: absolute;
  z-index: 10;
  bottom: calc(var(--avesize) * 2);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: calc(var(--innerWidth) - var(--avesize) * 8);
  background-color: rgba(var(--defBgColorRGB),0.5);
  -webkit-backdrop-filter: brightness(1.1) blur(0.75rem);
  backdrop-filter: brightness(1.1) blur(0.75rem);
}
.heroheader .pickupitem a {
  display: flex;
  width: 100%;
  text-decoration: none;
}
.heroheader .pickupitem a .itemdata {
  padding: calc(var(--avesize) * 2);
  color: var(--defColor);
}
.heroheader .pickupitem figure {
  display: block;
  width: 29.2%;
  flex: none;
}
.heroheader .pickupitem a .itemdata * {
  font-weight: 700;
}
.heroheader .pickupitem .itemname {
}

.conceptarea {
  margin: var(--headerBtnSize) auto 0;
  display: flex;
  width: var(--columnWidth);
}
body[wc-view-code="pc"] .conceptarea,
body[wc-view-code="tb-l"] .conceptarea {
}
body:not([wc-view-code="pc"]):not([wc-view-code="tb-l"]) .conceptarea {
  flex-flow: column;
}
body:not([wc-view-code="pc"]):not([wc-view-code="tb-l"]) .conceptarea article {
  margin-top: 2rem;
}
body[wc-view-code="pc"] .conceptarea article,
body[wc-view-code="tb-l"] .conceptarea article {
  width: calc((100% - var(--avesize) * 4) * 0.3333);
  flex: none;linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
}
.conceptarea dl dd {
  margin-top: 1rem;
  padding-bottom: 4rem;
}
body:not([wc-view-code="pc"]):not([wc-view-code="tb-l"]) .conceptarea dl dd {
  position: relative;
  z-index: 1;
}
body[wc-view-code="pc"] .conceptarea article,
body[wc-view-code="tb-l"] .conceptarea article {
  position: relative;
  z-index: 1;
}
body[wc-view-code="pc"] .conceptarea dl,
body[wc-view-code="tb-l"] .conceptarea dl {
  display: flex;
  flex-flow: column;
  height: 100%;
}
body[wc-view-code="pc"] .conceptarea dl dt,
body[wc-view-code="tb-l"] .conceptarea dl dt {
  flex: none;
}
body[wc-view-code="pc"] .conceptarea dl dd,
body[wc-view-code="tb-l"] .conceptarea dl dd {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  flex: 1;
  height: 100%;
}

.conceptarea dt[wc-text-af]::after {
  display: block;
  font-family: "Oswald";
  font-size: 1rem;
  opacity: 0.5;
  color: var(--defColor);
  text-align: center;
  position: relative;
  z-index: 2;
}
.conceptarea dt[wc-text-af] h1 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.conceptarea dl dd p {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5rem;
  padding: 0 2rem 2rem;
  position: relative;
  z-index: 2;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.conceptarea dl dd figure {
  position: absolute;
  z-index: 1;
  left: 0;
}
.conceptarea dl dd figure.illustration,
.conceptarea dl dd figure.icon {
  opacity: 0.5;
}
.conceptarea dl dd figure.illustration {
  bottom: 0;
}
.conceptarea dl dd figure.icon {
  bottom: 50%;
  transform: translateY(50%);
}
.conceptarea dl dd figure.photo {
  -webkit-mask-image: -webkit-linear-gradient(top, transparent calc(var(--thisheight) * 0.5 - 2rem - var(--headerBtnSize)),black 100%);
  mask-image: linear-gradient(to bottom, transparent calc(var(--thisheight) * 0.5 - 2rem - var(--headerBtnSize)),black 100%);
  bottom: 0;
}
.conceptarea dl dd figure img {
  width: 100%;
  height: auto;
}
.conceptarea dl dd a.linkbtn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--avesize) * 2);
  width: max-content;
  height: var(--headerBtnSize);
  border-radius: calc(var(--avesize) * 2);
  color: var(--contrastColor);
  background-color: var(--defColor);
  margin: 0 auto;
  white-space: nowrap;
  font-weight: 700;
}
.middleblockarea {
  position: relative;
  z-index: 1;
  background-color: var(--defBgColor);
}
.middleblockarea::before {
  content: "";
  display: block;
  width: 100%;
  height: 120px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-image: url("/img/pattern_02.png");
  background-position: center top;
  background-repeat: repeat;
  -webkit-mask-image: -webkit-linear-gradient(top, black 0,transparent 100%);
  mask-image: linear-gradient(to bottom, black 0,transparent 100%);
}
body[wc-view-code="sp"] .middleblockarea::before {
  background-size: 200px 200px;
}
.middleblockarea .blockinner {
  position: relative;
  z-index: 2;
  width: var(--columnWidth);
  margin: 0 auto;
  display: flex;
  gap: calc(var(--avesize) * 4);
}
body[wc-view-code="pc"] .middleblockarea .blockinner {
  padding: 100px calc(var(--avesize) * 2) var(--headerBtnSize) calc(var(--avesize) * 2);
}
body:not([wc-view-code="pc"]) .middleblockarea .blockinner {
  flex-flow: column;
  box-sizing: border-box;
  padding: var(--headerBtnSize) calc(var(--avesize) * 2) 2rem calc(var(--avesize) * 2);
}
.middleblockarea .recipearea {
  background-image: url("/img/pattern_01.png");
  background-position: center top;
  background-repeat: repeat;
  color: var(--contrastColor);
  padding: 2rem calc(var(--avesize) * 2);
}
body[wc-view-code="pc"] .middleblockarea .recipearea {
  width: calc((var(--columnWidth) - var(--avesize) * 8) * 0.5);
  flex: none;
}
body[wc-view-code="sp"] .middleblockarea .recipearea {
  background-size: 100px 100px;
}
.middleblockarea .recipearea .btnarea {
  text-align: center;
}
.middleblockarea .recipearea .btnarea a {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--avesize) * 2);
  width: max-content;
  height: var(--headerBtnSize);
  border-radius: calc(var(--avesize) * 2);
  background-color: var(--contrastColor);
  color: var(--defColor);
  margin: 0 auto;
  white-space: nowrap;
  font-weight: 700;
  text-decoration: none;
}
.middleblockarea .mainitemarea {
  background-image: url("/img/pattern_02.png");
  background-position: center top;
  background-repeat: repeat;
}
body[wc-view-code="pc"] .middleblockarea .mainitemarea {
  flex: 1;
}
body[wc-view-code="sp"] .middleblockarea .mainitemarea {
  background-size: 200px 200px;
}
body:not([wc-view-code="sp"]) .middleblockarea .mainitemarea {
  padding: 2rem calc(var(--avesize) * 2);
}
.middleblockarea article {
  box-sizing: border-box;
  border-radius: calc(var(--avesize) * 3);
}
.middleblockarea article .blocktitle {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.middleblockarea article .blocktitle[wc-text-af]::after {
  display: block;
  font-family: "Oswald";
  font-size: 1rem;
  opacity: 0.5;
  color: inherit;
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: 400;
}
.middleblockarea .recipeflow .recipeheader {
  display: flex;
  justify-content: space-between;
}
.middleblockarea .recipeflow .recipetitle {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
  padding: 0.5rem;
  border-left: solid 5px var(--contrastColor);
}
.middleblockarea .recipeflow .recipedata {
  display: flex;
  gap: calc(var(--avesize) * 2);
}
.middleblockarea .recipeflow .recipedata .timearea {
  border-radius: var(--avesize);
  border: solid 1px var(--contrastColor);
}
.middleblockarea .recipeflow .recipedata .timearea > * {
  display: flex;
  font-weight: 700;
  padding: 0 0.5rem;
}
.middleblockarea .recipeflow .recipedata .timearea dt {
  font-size: 0.8rem;
  height: 45%;
  border-bottom: dotted 1px var(--contrastColor);
  align-items: center;
}
.middleblockarea .recipeflow .recipedata .timearea dd {
  align-items: baseline;
  justify-content: flex-end;
  height: 55%;
}
.middleblockarea .recipeflow .recipedata .timearea dd[wc-text-af]::after {
  font-size: 0.7rem;
}
.middleblockarea .recipeflow .recipeinner {
  padding: calc(var(--avesize) * 2) 0;
  overflow-x: auto;
}
.middleblockarea .recipeflow ul {
  display: flex;
  width: max-content;
  list-style: none;
  gap: calc(var(--avesize) * 2);
}
body[wc-view-code="sp"] .middleblockarea .recipeflow ul li {
  width: calc(var(--thiswidth) - 4rem);
}
body:not([wc-view-code="sp"]) .middleblockarea .recipeflow ul li {
  width: calc(var(--thiswidth) * 0.618);
}
.middleblockarea .recipeflow figure {
  display: block;
  position: relative;
  z-index: 1;
}
.middleblockarea .recipeflow figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
.middleblockarea .recipeflow .flowitem dt {
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
}
.middleblockarea .recipeflow .flowitem dd {
  padding-top: 1rem;
}
.middleblockarea .recipeflow .flowitem dd p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  padding-bottom: 1rem;
}
.middleblockarea .recipeflow .flowitem [count-num]::before {
  content: "STEP-" attr(count-num);
  font-family: "Oswald";
  font-weight: 700;
  background-color: var(--contrastColor);
  padding: 0 calc(var(--avesize) * 1.5);
  display: flex;
  width: max-content;
  height: 1rem;
  font-size: 0.7rem;
  color: var(--defColor);
  border-radius: 0.5rem;
  margin-right: var(--avesize);
}
.middleblockarea .mainitemarea .itemname {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 1rem;
}
.middleblockarea .mainitemarea [photo-change] {
  background-color: var(--sysBgColor);
}
body[wc-view-code="sp"] .middleblockarea .mainitemarea .itemname {
  padding-top: 2rem;
}
body:not([wc-view-code="sp"]) .middleblockarea .mainitemarea [photo-change] {
  margin-bottom: calc(var(--headerBtnSize) + 1rem);
}
body:not([wc-view-code="sp"]) .middleblockarea .mainitemarea [photo-change],
body:not([wc-view-code="sp"]) .middleblockarea .mainitemarea .itemdataarea,
body:not([wc-view-code="sp"]) .mainitemarea .linkbtnarea {
  width: calc(50% - var(--avesize) * 2);
}

.middleblockarea .mainitemarea {
  position: relative;
  z-index: 1;
}
.middleblockarea .mainitemarea [photo-change] img {
  width: 100%;
  height: auto;
}
body:not([wc-view-code="sp"]) .middleblockarea .mainitemarea .mainiteminner {
  display: flex;
  justify-content: space-between;
}
.mainitemarea .linkbtnarea {
  text-align: center;
}
body:not([wc-view-code="sp"]) .mainitemarea .linkbtnarea {
  position: absolute;
  z-index: 2;
  bottom: 2rem;
  left: calc(var(--avesize) * 2);
}
body[wc-view-code="sp"] .mainitemarea .linkbtnarea {
  padding: 2rem 0;
}
.mainitemarea .linkbtnarea a {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--avesize) * 2);
  width: max-content;
  height: var(--headerBtnSize);
  border-radius: calc(var(--avesize) * 2);
  color: var(--contrastColor);
  background-color: var(--defColor);
  margin: 0 auto;
  white-space: nowrap;
  font-weight: 700;
}
body[wc-view-code="sp"] .mainitemarea .nutritionfacts {
  margin: 0 1rem;
}
.mainitemarea .itemdataarea p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  padding-bottom: 1rem;
}
body[wc-view-code="sp"] .mainitemarea .itemdataarea p {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
}
.newsmediaarea,
.udonpr,
.pickupitems {
  background-color: var(--defBgColor);
}
.newsmediaarea .blockinner,
.udonpr .blockinner {
  width: calc(var(--columnWidth) - var(--avesize) * 4);
  background-image: url("/img/pattern_01.png");
  background-position: center top;
  background-repeat: repeat;
  color: var(--contrastColor);
  margin: 0 auto;
}
.newsmediaarea .blockinner {
  padding: 2rem calc(var(--avesize) * 2);
  border-radius: calc(var(--avesize) * 3);
}
body[wc-view-code="sp"] .newsmediaarea .blockinner,
body[wc-view-code="sp"] .udonpr .blockinner {
  background-size: 100px 100px;
}
.newsmediaarea .blockinner .blocktitle {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.newsmediaarea .blockinner .blocktitle[wc-text-af]::after {
  display: block;
  font-family: "Oswald";
  font-size: 1rem;
  opacity: 0.5;
  color: inherit;
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: 400;
}
.newsmediaarea .blockinner .newslist {
  display: flex;
  gap: 1px;
  margin-top: 2rem;
}
body[wc-view-code="sp"] .newsmediaarea .blockinner .newslist {
  flex-flow: column;
}
body:not([wc-view-code="sp"]) .newsmediaarea .blockinner .newslist {
  flex-flow: wrap;
  margin-right: 2rem;
  margin-left: 2rem;
}
.newsmediaarea .blockinner .newslist article {
  display: flex;
  flex-flow: column;
  color: var(--defColor);
  background-color: var(--defBgColor);
  box-sizing: border-box;
  height: calc(var(--avesize) * 4 + 3.5rem);
  justify-content: space-between;
}
body:not([wc-view-code="sp"]) .newsmediaarea .blockinner .newslist article {
  width: calc((100% - 1px) * 0.5);
}
.newsmediaarea .blockinner .newslist article a {
  display: flex;
  flex-flow: column;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  color: var(--defColor);
  text-decoration: none;
}
.newsmediaarea .blockinner .newslist article h1 {
  display: block;
  width: 100%;
  padding: calc(var(--avesize) * 2) calc(var(--avesize) * 2) 0 calc(var(--avesize) * 2);
  white-space: nowrap;
  box-sizing: border-box;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsmediaarea .blockinner .newslist article h1::after {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsmediaarea .blockinner .newslist article .timearea {
  display: block;
  text-align: right;
  font-family: "Number";
  font-size: 0.9rem;
  padding: 0 calc(var(--avesize) * 2) calc(var(--avesize) * 2) calc(var(--avesize) * 2);
}
body[wc-view-code="sp"] .udonpr {
  padding-top: 2rem;
}

body[wc-view-code="sp"] .pickupitems {
  padding-bottom: 2rem;
}
body:not([wc-view-code="sp"]) .newsmediaarea,
body:not([wc-view-code="sp"]) .udonpr,
body:not([wc-view-code="sp"]) .pickupitems {
  padding-bottom: var(--headerBtnSize);
}
.udonpr figure {
  display: block;
  background-image: url("/img/sanukimenichiba_01.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
body[wc-view-code="sp"] .udonpr figure {
  padding-top: 56.25%;
}
body:not([wc-view-code="sp"]) .udonpr figure {
  position: absolute;
  z-index: 1;
  width: 50%;
  top: 0;
  bottom: 0;
  left: 0;
}
.udonpr .blockinner {
  display: flex;
  flex-flow: column;
  border-radius: calc(var(--avesize) * 3);
  overflow: hidden;
}
body:not([wc-view-code="sp"]) .udonpr .blockinner {
  padding: 2rem calc(var(--avesize) * 2) 2rem calc((var(--columnWidth) - var(--avesize) * 4) * 0.5);
  position: relative;
  z-index: 1;
}
.udonpr .blockinner .blocktitle {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 1rem;
  padding-left: calc(var(--avesize) * 2);
}
body[wc-view-code="sp"] .udonpr .blockinner .blocktitle {
  padding-top: 2rem;
  padding-right: calc(var(--avesize) * 2);
}
.udonpr .blockinner p {
  padding-bottom: 2rem;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
body[wc-view-code="sp"] .udonpr .blockinner {
  padding-bottom: 2rem;
}
body[wc-view-code="sp"] .udonpr .blockinner p {
  padding: 0 2rem 2rem 2rem;
}
body:not([wc-view-code="sp"]) .udonpr .blockinner p {
  padding-left: calc(var(--avesize) * 2);
}
.udonpr .blockinner .linkbtnarea {
  text-align: center;
}
.udonpr .blockinner .linkbtnarea a {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--avesize) * 2);
  width: max-content;
  height: var(--headerBtnSize);
  border-radius: calc(var(--avesize) * 2);
  color: var(--defColor);
  background-color: var(--contrastColor);
  margin: 0 auto;
  white-space: nowrap;
  font-weight: 700;
}






.nutritionfacts {
  display: flex;
  flex-flow: column;
  gap: 1px;
}
.nutritionfacts > dl {
  display: flex;
  flex-flow: wrap;
  gap: 1px;
}
.nutritionfacts > dl > * {
  font-size: 0.9rem;
  padding: 0.25rem;
  box-sizing: border-box;
}
.nutritionfacts > dl > dt {
  flex: none;
  width: 38.2%;
  background-color: #eeeeea;
}
.nutritionfacts > dl > dd {
  flex: 1;
  width: 100%;
  background-color: #f5f5ee;
}