@charset "UTF-8";
@property --zoom-factor {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
.zoom-wrapper {
  --_min-viewport-width: 480px; /* viewportの最小値を下回ったら縮小をやめる */
  --_max-viewport-width: 1350px; /* viewportの最大値を上回ったら拡大をやめる */
  --_zoom-value: clamp(
    tan(atan2(var(--_min-viewport-width), var(--_max-viewport-width))),
    tan(atan2(var(--zoom-factor), var(--_max-viewport-width))),
    1
  );
  --zoom-factor: clamp(
    var(--_min-viewport-width),
    100dvi,
    var(--_max-viewport-width)
  );
  zoom: var(--_zoom-value);
  -webkit-text-size-adjust: initial; /* iOS Safariのバグを修正 */
  /* 768px以下では100%のズーム値を適用 */
}
@media (max-width: 480px) {
  .zoom-wrapper {
    zoom: 1;
  }
}

/*----------------------------------------------
recipe
----------------------------------------------*/
/*----------------------------------------------
recipeClmWrapper01
----------------------------------------------*/
.recipeClmWrapper01 {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .recipeClmWrapper01 {
    display: block;
  }
}
.recipeClmWrapper01 > .clm01 {
  width: 43.3333333333%;
}
@media (max-width: 1024px) {
  .recipeClmWrapper01 > .clm01 {
    width: auto;
  }
}
.recipeClmWrapper01 > .clm02 {
  width: 51.25%;
}
@media (max-width: 1024px) {
  .recipeClmWrapper01 > .clm02 {
    width: auto;
    margin-top: 30px;
  }
}

/*----------------------------------------------
recipeMainImg01
----------------------------------------------*/
.recipeMainImg01 {
  margin: 0;
}

/*----------------------------------------------

----------------------------------------------*/
.recipeName {
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
}

.recipeComment {
  font-size: clamp(16px, 3.4vw, 18px);
  line-height: 1.55;
  margin: 1em 0;
}

/*----------------------------------------------
rexipeBtnListBox
----------------------------------------------*/
.rexipeBtnListBox {
  margin: 30px 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 480px) {
  .rexipeBtnListBox {
    flex-wrap: wrap;
  }
}
.rexipeBtnListBox .time {
  color: #62C1BC;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.2em;
}
.rexipeBtnListBox .time .num {
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
  display: inline-block;
  margin: 0 0.1em;
}
.rexipeBtnListBox .time i {
  display: inline-block;
  width: 24px;
  line-height: 1;
}
.rexipeBtnListBox .btnPrint {
  color: #ffffff;
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 500;
  line-height: 1;
  border-radius: 6px;
  background-color: #3E2E18;
  border: none;
  cursor: pointer;
  outline: none;
  margin: 0 0 0 1em;
  padding: 0 1em;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 28px;
}
.rexipeBtnListBox .btnPrint i {
  display: inline-block;
  width: 18px;
  line-height: 1;
}
.rexipeBtnListBox .recipeSnsBtnList {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rexipeBtnListBox .recipeSnsBtnList > li {
  width: 28px;
}

/*----------------------------------------------
recipeKeywordBox
----------------------------------------------*/
.recipeKeywordBox {
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid #62C1BC;
}
.recipeKeywordBox .head {
  color: #62C1BC;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  margin: 0 0 0.5em 0;
}
.recipeKeywordBox .list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recipeKeywordBox .list > li a {
  display: block;
  color: #ffffff;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  text-decoration: none;
  padding: 0 1em;
  background: #62C1BC;
  border-radius: 100vmax;
}
.recipeKeywordBox .list > li a:hover {
  opacity: 0.6;
}

/*----------------------------------------------
resipeUsuitemBox
----------------------------------------------*/
.resipeUsuitemBox {
  margin: 20px 0;
  padding: 30px;
  background: #ffffff;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 480px) {
  .resipeUsuitemBox {
    gap: 0;
  }
}
.resipeUsuitemBox .imgClm {
  max-width: 133px;
}
@media (max-width: 480px) {
  .resipeUsuitemBox .imgClm {
    max-width: 90px;
  }
}
.resipeUsuitemBox .head {
  color: #62C1BC;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  margin: 0;
}
.resipeUsuitemBox .name {
  font-size: clamp(19.2px, 3.0006vw, 24px);
  font-weight: 700;
  margin: 0;
}
.resipeUsuitemBox .name .yomi {
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 400;
}
.resipeUsuitemBox .price {
  color: #D01800;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  margin: 0;
}
.resipeUsuitemBox .price .num {
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
}
.resipeUsuitemBox .btn {
  margin: 0.5em 0 0 0;
}

/*----------------------------------------------
recipeIngredientsBox
----------------------------------------------*/
.recipeIngredientsBox {
  margin: 80px 0 0 0;
}
.recipeIngredientsBox .head {
  font-size: clamp(19.2px, 3.0006vw, 24px);
  font-weight: 700;
  margin: 0 0 0.5em 0;
}
.recipeIngredientsBox .bodyBox {
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  margin: 0 0 0 1em;
}
.recipeIngredientsBox .bodyBox .list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.recipeIngredientsBox .bodyBox .list > li {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px dotted #9F7668;
  padding: 0.2em 0;
}
.recipeIngredientsBox .bodyBox .list > li .mark {
  display: block;
  padding: 0.2em 0;
}
.recipeIngredientsBox .bodyBox .list > li > dl {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.recipeIngredientsBox .bodyBox .list > li > dl > dt,
.recipeIngredientsBox .bodyBox .list > li > dl > dd {
  padding: 0.2em 0;
}
.recipeIngredientsBox .bodyBox .list > li > dl > dt {
  width: 70%;
}
.recipeIngredientsBox .bodyBox .list > li > dl > dd {
  width: 30%;
  text-align: end;
}

/*----------------------------------------------
recipeStepsBox
----------------------------------------------*/
.recipeStepsBox {
  margin: 80px 0 0 0;
}
.recipeStepsBox .head {
  font-size: clamp(19.2px, 3.0006vw, 24px);
  font-weight: 700;
  margin: 0 0 0.5em 0;
}
.recipeStepsBox .bodyBox {
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  margin: 0 0 0 1em;
}
.recipeStepsBox .bodyBox .list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.recipeStepsBox .bodyBox .list > li {
  border-bottom: 1px dotted #9F7668;
  padding: 1em 0 1em 2em;
  position: relative;
}
.recipeStepsBox .bodyBox .list > li .num {
  position: absolute;
  top: 0.3em;
  left: 0;
  color: #62C1BC;
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
}

/*----------------------------------------------
resipePointBox
----------------------------------------------*/
.resipePointBox {
  color: #9F7668;
  margin: 40px 0;
  padding: 20px;
  border: 1px solid #9F7668;
  background: #ffffff;
  border-radius: 20px;
}
.resipePointBox .head {
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.5em 0;
}
.resipePointBox .list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  text-align: center;
}
.resipePointBox .list > li + li {
  margin-top: 0.5em;
}
.resipePointBox .list > li::before {
  content: "✴︎";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 0.1em 0 0;
}

/*----------------------------------------------
recipeRecommendBox
----------------------------------------------*/
/*----------------------------------------------
column
----------------------------------------------*/
/*----------------------------------------------
columnClmWrapper01
----------------------------------------------*/
.columnClmWrapper01 {
  display: grid;
  grid-template-columns: 70.8333333333% 25.8333333333%;
  grid-template-rows: auto auto;
  gap: 0 3.3333333333%;
}
@media (max-width: 1024px) {
  .columnClmWrapper01 {
    display: block;
  }
}

/*----------------------------------------------
columnDetailHeadBox
----------------------------------------------*/
.columnDetailHeadBox {
  grid-column: 1;
  grid-row: 1;
}
.columnDetailHeadBox .date {
  color: #62C1BC;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
}
.columnDetailHeadBox .head {
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
  line-height: 1.65;
  margin: 0 0 1em 0;
}
@media (max-width: 480px) {
  .columnDetailHeadBox .head {
    font-size: 2.4rem;
    line-height: 1.4;
  }
}

/*----------------------------------------------
columnContentClm
----------------------------------------------*/
.columnContentClm {
  grid-column: 1;
  grid-row: 2;
}
.columnContentClm p {
  margin: 1.5em 0;
  line-height: 1.55;
}
.columnContentClm .tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 1em 0;
}
.columnContentClm .tagList > li a {
  display: block;
  color: #ffffff;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  text-decoration: none;
  padding: 0 1em;
  background: #62C1BC;
  border-radius: 100vmax;
}
.columnContentClm .tagList > li a:hover {
  opacity: 0.6;
}
.columnContentClm .indexListBox {
  margin: 1em 0;
  padding: 30px 0;
  border-top: 1px solid #3E2E18;
  border-bottom: 1px solid #3E2E18;
}
.columnContentClm .indexListBox .head {
  font-size: clamp(19.2px, 3.0006vw, 24px);
  font-weight: 700;
}
.columnContentClm .indexListBox .list {
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  margin: 0 0 0 1em;
}
.columnContentClm .indexListBox .list > li {
  margin: 0.5em 0 0 0;
}
.columnContentClm .indexListBox .list > li a {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.columnContentClm .indexListBox .list > li a:hover {
  text-decoration: underline;
}
.columnContentClm .indexListBox .list > li .num {
  color: #62C1BC;
  font-weight: 700;
}
.columnContentClm .columnTtl01 {
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
  margin: 2em 0 1em 0;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.columnContentClm .columnTtl01 .num {
  font-size: clamp(31.2px, 4.8744vw, 39px);
  color: #62C1BC;
  font-weight: 700;
}
.columnContentClm .newsBox img {
  margin: 0 0 2em 0;
}

/*----------------------------------------------
columnSideClm
----------------------------------------------*/
.columnSideClm {
  grid-column: 2;
  grid-row: 2;
}
.columnSideClm .columnOtherPost .list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 1024px) {
  .columnSideClm .columnOtherPost .list {
    flex-direction: row;
  }
}
.columnSideClm .columnOtherPost .list > li {
  padding: 20px;
  background: #ffffff;
  width: 100%;
  margin-top: 10px;
}
@media (max-width: 1024px) {
  .columnSideClm .columnOtherPost .list > li {
    width: calc((100% - 10px) / 2);
  }
}
@media (max-width: 480px) {
  .columnSideClm .columnOtherPost .list > li {
    width: 100%;
  }
}
.columnSideClm .columnOtherPost .list > li a {
  display: block;
}
.columnSideClm .columnOtherPost .list > li .imgBox {
  margin-bottom: 10px;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}
.columnSideClm .columnOtherPost .list > li .imgBox::before {
  padding-top: 47.04%;
  content: "";
  display: block;
}
.columnSideClm .columnOtherPost .list > li .imgBox img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.columnSideClm .columnOtherPost .list > li p {
  line-height: 1.3;
  margin: 0;
}
.columnSideClm .columnOtherPost .list > li p.date {
  color: #62C1BC;
  margin-bottom: 4px;
  font-weight: 500;
}
.columnSideClm .columnOtherPost .list > li p.comment {
  font-weight: 500;
}
.columnSideClm .columnOtherPost .list > li p.link {
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 500;
  margin: 1em 0 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #62C1BC;
  text-decoration: none;
}
.columnSideClm .columnOtherPost .list > li p.link::after {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  border-width: 1px 1px 0 0;
  border-color: #62C1BC;
  border-style: solid;
  rotate: 45deg;
}
.columnSideClm .columnOtherPost .list > li p.link:hover {
  text-decoration: underline;
}
.columnSideClm .columnOtherPost.news .list > li {
  padding: 10px 0;
  background: none;
  border-bottom: 1px dashed #9F7668;
}
.columnSideClm .columnOtherPost.news .list > li + li {
  margin-top: 10px;
}
.columnSideClm .columnCtgPost {
  margin: 40px 0 0 0;
}

/*----------------------------------------------
article
----------------------------------------------*/
/*----------------------------------------------
articleClmWrapper01
----------------------------------------------*/
.articleClmWrapper01 {
  display: grid;
  grid-template-columns: 70.8333333333% 25.8333333333%;
  grid-template-rows: auto auto;
  gap: 0 3.3333333333%;
}
@media (max-width: 1024px) {
  .articleClmWrapper01 {
    display: block;
  }
}

/*----------------------------------------------
articleIndexHeadBox
----------------------------------------------*/
.articleIndexHeadBox {
  grid-column: 1/3;
  grid-row: 1;
}
.articleIndexHeadBox .head {
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
  text-align: center;
  margin: 0 0 3em 0;
}

/*----------------------------------------------
columnContentClm
----------------------------------------------*/
.columnContentClm {
  grid-column: 1;
  grid-row: 2;
}
.columnContentClm .articleIndexList {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 20px;
}
@media (max-width: 480px) {
  .columnContentClm .articleIndexList {
    gap: 20px;
  }
}
.columnContentClm .articleIndexList > li {
  background: #fff;
  padding: 10px;
  width: calc((100% - 40px) / 3);
}
@media (max-width: 1024px) {
  .columnContentClm .articleIndexList > li {
    width: calc((100% - 40px) / 2);
  }
}
@media (max-width: 480px) {
  .columnContentClm .articleIndexList > li {
    width: 100%;
  }
}
.columnContentClm .articleIndexList > li a {
  display: block;
}
.columnContentClm .articleIndexList > li .imgBox {
  margin-bottom: 10px;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}
.columnContentClm .articleIndexList > li .imgBox::before {
  padding-top: 60%;
  content: "";
  display: block;
}
.columnContentClm .articleIndexList > li .imgBox img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.columnContentClm .articleIndexList > li p {
  line-height: 1.3;
  margin: 0;
}
.columnContentClm .articleIndexList > li p.comment {
  font-weight: 500;
}
.columnContentClm .articleIndexList > li p.date {
  color: #62C1BC;
  margin-bottom: 4px;
  font-weight: 500;
}
.columnContentClm .articleIndexList > li p.link {
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 500;
  margin: 1em 0 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #62C1BC;
  text-decoration: none;
}
.columnContentClm .articleIndexList > li p.link::after {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  border-width: 1px 1px 0 0;
  border-color: #62C1BC;
  border-style: solid;
  rotate: 45deg;
}
.columnContentClm .articleIndexList > li p.link:hover {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .columnContentClm .articleIndexList > li p.link {
    font-size: 1.4rem;
  }
}
.columnContentClm .columnPagerBox {
  margin: 5em auto;
}
.columnContentClm .columnPagerBox .list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.columnContentClm .columnPagerBox .list .prev a,
.columnContentClm .columnPagerBox .list .next a {
  display: flex;
  align-items: center;
  color: #62C1BC;
  text-decoration: none;
}
.columnContentClm .columnPagerBox .list .prev a:hover,
.columnContentClm .columnPagerBox .list .next a:hover {
  text-decoration: underline;
}
.columnContentClm .columnPagerBox .list .prev a::after,
.columnContentClm .columnPagerBox .list .next a::after {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  border-width: 1px 1px 0 0;
  border-color: #62C1BC;
  border-style: solid;
}
.columnContentClm .columnPagerBox .list .prev a {
  flex-direction: row-reverse;
}
.columnContentClm .columnPagerBox .list .prev a::after {
  rotate: -135deg;
}
.columnContentClm .columnPagerBox .list .next a::after {
  rotate: 45deg;
}
.columnContentClm .columnPagerBox .list .back {
  flex-shrink: 0;
  min-width: 260px; /*???これ入れないと縮んじゃう*/
}
.columnContentClm .columnPagerBox .list .back .commonBtn01 {
  max-width: 260px;
}

/*----------------------------------------------
articleSideClm
----------------------------------------------*/
.articleSideClm {
  grid-column: 2;
  grid-row: 2;
}
/*----------------------------------------------
btob
----------------------------------------------*/
/*----------------------------------------------
btobMainBox
----------------------------------------------*/
.btobMainBox {
  height: calc(100vh - 90px);
  background: url("../img/btob/btob_main_img.jpg") center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 480px) {
  .btobMainBox {
    height: calc(100vh - 60px);
    background: url("../img/btob/btob_main_img_sp.jpg") top center no-repeat;
    background-size: 100%;
  }
}
.btobMainBox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 32.92%, #fff 100%);
}
@media (max-width: 480px) {
  .btobMainBox::before {
    width: 100%;
    display: none;
  }
}
.btobMainBox .box01 {
  width: 100%;
  position: relative;
}
@media (max-width: 480px) {
  .btobMainBox .box01 {
    height: 30%;
    display: flex;
    align-items: center;
  }
}
.btobMainBox .box01 .catch {
  font-size: clamp(30.8px, 4.8896vw, 44px);
  font-weight: 700;
  line-height: 1.59;
}
@media (max-width: 480px) {
  .btobMainBox .box01 .catch {
    font-size: 2.8rem;
  }
}
.btobMainBox .box01 .comment {
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  line-height: 1.66;
  margin: 1em 0 0 0;
}
.btobMainBox .box01 .btn {
  margin: 3em 0 0 0;
}
@media (max-width: 480px) {
  .btobMainBox .box01 .btn {
    margin: 1.5em 0 0 0;
  }
}
.btobMainBox .box01 .btn .commonBtn01 {
  font-size: clamp(19.2px, 3.0006vw, 24px);
  max-width: 450px;
}

/*----------------------------------------------
btobMeritBox
----------------------------------------------*/
body.btob .mainContentBox {
  padding-top: 0;
}

.btobMeritBox .head {
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
  text-align: center;
  margin: 0 0 1em 0;
}
@media (max-width: 480px) {
  .btobMeritBox .head {
    font-size: 2.2rem;
  }
}
.btobMeritBox .lead {
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 500;
  line-height: 1.66;
  text-align: center;
}
.btobMeritBox .list {
  margin: 100px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}
@media (max-width: 1024px) {
  .btobMeritBox .list {
    gap: 20px;
  }
}
.btobMeritBox .list > li {
  width: calc((100% - 120px) / 3);
  background: #ffffff;
  padding: 40px;
  border-radius: 30px;
  text-align: center;
}
@media (max-width: 1024px) {
  .btobMeritBox .list > li {
    width: calc((100% - 20px) / 2);
    padding: 20px;
  }
}
@media (max-width: 480px) {
  .btobMeritBox .list > li {
    width: 100%;
    padding: 20px;
  }
}
.btobMeritBox .list > li .ttl {
  font-size: clamp(19.2px, 3.0006vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.8em 0;
}
.btobMeritBox .list > li .comment {
  margin: 1em 0 0 0;
}

/*----------------------------------------------
btobSampleBox
----------------------------------------------*/
body#btob .mainContentBox {
  padding: 100px 0 120px;
}