/* Zen Kaku Gothic New */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* font */
/*

/* color */
.container-lg {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .container-lg {
    width: 97%;
  }
}

.container-md {
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .container-md {
    width: 88%;
  }
}

.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

body {
  font-family: "Noto Sans", sans-serif;
  line-height: 1.618;
  color: #482807;
}

main img {
  width: 100%;
}

section {
  width: 100%;
}

p, li {
  color: #482807;
}

picture {
  font-size: 0;
}

.contents-wrapper {
  background: url(../img/recipe/bg_recipe_02_pc.png) repeat center;
  background-size: contain;
  padding: 0 0 90px;
}
@media screen and (max-width: 768px) {
  .contents-wrapper {
    background: url(../img/recipe/bg_recipe_02_sp.png) repeat center;
    padding: 0 0 50px;
  }
}

.kv .kv-image {
  width: 100%;
}

.lead {
  padding: 52px 0 0;
}
@media screen and (max-width: 768px) {
  .lead {
    padding: 36px 0 0;
  }
}
.lead .text-wrapper {
  margin: 0 auto;
  width: fit-content;
  position: relative;
  z-index: 1;
}
.lead .text-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -15%;
  max-width: 648px;
  width: 40%;
  transform: translate(-100%, 0%);
  aspect-ratio: 648/75;
  background: url(../img/recipe/path.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .lead .text-wrapper::before {
    top: -20%;
    left: 20%;
    width: 80%;
    transform: translate(-100%, 0%) rotate(180deg);
  }
}
.lead .text-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -5%;
  width: 160px;
  transform: translate(100%, -50%) rotate(20deg);
  aspect-ratio: 500/382;
  background: url(../img/recipe/kaki_obj_02.gif) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .lead .text-wrapper::after {
    top: -12%;
    right: 8%;
    width: 27%;
  }
}
.lead .text {
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .lead .text {
    font-weight: bold;
    font-size: clamp(0.875rem, 2.7vw, 1.25rem);
  }
}

.recipe-1 .h3-heading-wrapper {
  position: relative;
  width: 71.3%;
  aspect-ratio: 791/217;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .recipe-1 .h3-heading-wrapper {
    width: 95%;
    margin: 16px auto 0;
    aspect-ratio: 716/246;
  }
}
.recipe-1 .h3-heading-wrapper .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/recipe/img_text_bg_01_pc.png) no-repeat center;
  background-size: contain;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .recipe-1 .h3-heading-wrapper .bg-image {
    background: url(../img/recipe/img_text_bg_01_sp.png) no-repeat center;
    background-size: contain;
  }
}
.recipe-1 .h3-heading-wrapper .h3-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
@media screen and (max-width: 768px) {
  .recipe-1 .h3-heading-wrapper .h3-heading {
    width: 60%;
    top: 45%;
  }
}
.recipe-1 .h3-heading-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: -15%;
  max-width: 648px;
  width: 68%;
  transform: translate(100%, 0%);
  aspect-ratio: 500/116;
  background: url(../img/recipe/ribbon-blue.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-1 .h3-heading-wrapper::before {
    top: -123%;
    right: 10%;
    width: 86%;
  }
}
.recipe-1 .h3-heading-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 97%;
  right: -12%;
  width: 150px;
  transform: translate(100%, -50%) rotate(-45deg);
  aspect-ratio: 500/382;
  background: url(../img/recipe/nuts.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-1 .h3-heading-wrapper::after {
    top: -53%;
    left: -29%;
    width: 20%;
  }
}
.recipe-1 .recipe-contents-wrapper {
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .recipe-1 .recipe-contents-wrapper {
    margin: 6px auto 0;
    position: relative;
    width: 92%;
  }
}
.recipe-1 .recipe-list-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  position: relative;
  column-gap: 1%;
  row-gap: 18px;
  z-index: 1;
}
.recipe-1 .recipe-list {
  position: relative;
}
.recipe-1 .recipe-list::before {
  position: absolute;
  content: "";
}
.recipe-1 .recipe-list::after {
  position: absolute;
  content: "";
  top: 2%;
  left: 3%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../img/recipe/recipe-shadow.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-1 .recipe-list::after {
    top: 4%;
    left: 0%;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../img/recipe/recipe-shadow_sp.png) no-repeat center;
    background-size: contain;
  }
}
.recipe-1 .recipe-list.pkg-normal::before {
  width: 39%;
  top: 18%;
  right: -5%;
  aspect-ratio: 284/221;
  background: url(../img/recipe/kaki_pkg.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-1 .recipe-list.pkg-normal::before {
    width: 42%;
    top: 15%;
    right: -3%;
  }
}
.recipe-1 .recipe-list.pkg-ume::before {
  width: 41%;
  top: 16%;
  right: -5%;
  aspect-ratio: 304/247;
  background: url(../img/recipe/kaki_pkg_ume.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-1 .recipe-list.pkg-ume::before {
    width: 41%;
    top: 15%;
    right: -2%;
  }
}
.recipe-1 .recipe-list.pkg-wsb::before {
  width: 41%;
  top: 16%;
  right: -5%;
  aspect-ratio: 308/249;
  background: url(../img/recipe/kaki_pkg_wsb.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-1 .recipe-list.pkg-wsb::before {
    width: 44%;
    top: 13%;
    right: -2%;
  }
}
.recipe-1 .deco-item-1 {
  position: absolute;
  top: 23%;
  right: -15%;
  width: 32%;
  aspect-ratio: 850/98;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-1 .deco-item-1 {
    top: 41%;
    right: -19%;
    width: 44%;
    transform: rotate(180deg);
  }
}
.recipe-1 .deco-item-2 {
  position: absolute;
  top: 39%;
  left: 20%;
  width: 57%;
  transform: translate(-100%, 0);
  aspect-ratio: 1348/348;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-1 .deco-item-2 {
    top: 60%;
    left: 20%;
    width: 87%;
  }
}
.recipe-1 .deco-item-3 {
  position: absolute;
  top: 60%;
  right: 5%;
  width: 12%;
  transform: translate(100%, 0);
  aspect-ratio: 500/382;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-1 .deco-item-3 {
    top: 13%;
    left: -23%;
    width: 17%;
    transform: translate(100%, 0) rotate(122deg);
  }
}
.recipe-1 .deco-item-4 {
  position: absolute;
  bottom: 16%;
  left: 13%;
  width: 50%;
  transform: translate(-100%, 0);
  aspect-ratio: 1219/122;
  z-index: 0;
}
.recipe-1 .deco-item-5 {
  position: absolute;
  top: 29%;
  left: 20%;
  width: 37%;
  transform: translate(-100%, 0);
  aspect-ratio: 1348/348;
  z-index: 0;
}
.recipe-1 .deco-item-6 {
  position: absolute;
  top: 47%;
  right: 16%;
  width: 18%;
  transform: translate(100%, -50%) rotate(10deg);
  aspect-ratio: 500/382;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-1 .deco-item-6 {
    top: 48.2%;
    right: 9%;
  }
}
.recipe-1 .deco-item-7 {
  position: absolute;
  top: 69%;
  left: -28%;
  width: 17%;
  transform: translate(100%, 0) rotate(122deg);
  aspect-ratio: 500/382;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-1 .deco-item-7 {
    top: 71%;
  }
}
.recipe-1 .deco-item-8 {
  position: absolute;
  top: 86%;
  right: 13%;
  width: 17%;
  transform: translate(100%, 0);
  aspect-ratio: 500/382;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-1 .deco-item-8 {
    top: 86.5%;
    right: 5%;
  }
}
.recipe-1 .deco-item-9 {
  position: absolute;
  top: 94%;
  left: -9%;
  width: 18%;
  transform: rotate(-43deg);
  aspect-ratio: 500/382;
  z-index: 0;
}

.recipe-2 {
  padding: 40px 0 0;
}
@media screen and (max-width: 768px) {
  .recipe-2 {
    padding: 16px 0 0;
  }
}
.recipe-2 .h3-heading-wrapper {
  max-width: 606px;
  margin: 0 auto;
  width: 57.1%;
  aspect-ratio: 606/130;
  position: relative;
}
@media screen and (max-width: 768px) {
  .recipe-2 .h3-heading-wrapper {
    width: 95%;
    margin: 16px auto 0;
  }
}
.recipe-2 .h3-heading-wrapper .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/recipe/img_text_bg_02.png) no-repeat center;
  background-size: contain;
  opacity: 0.8;
}
.recipe-2 .h3-heading-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: -1%;
  left: -33%;
  max-width: 648px;
  width: 17%;
  transform: translate(-100%, 0%);
  aspect-ratio: 432/587;
  background: url(../img/recipe/kaki_obj_03.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-2 .h3-heading-wrapper::before {
    top: 14%;
    left: 11%;
    max-width: 648px;
    width: 17%;
    z-index: 1;
  }
}
.recipe-2 .h3-heading-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 30px;
  right: -19%;
  width: 200px;
  transform: translate(100%, -50%);
  aspect-ratio: 500/382;
  background: url(../img/recipe/kaki_obj_02.gif) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-2 .h3-heading-wrapper::after {
    top: -30%;
    right: 11%;
    width: 28%;
  }
}
.recipe-2 .h3-heading-wrapper .h3-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74%;
}
.recipe-2 .recipe-contents-wrapper {
  position: relative;
  margin: 30px auto 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-contents-wrapper {
    margin: 16px auto 0;
  }
}
.recipe-2 .recipe-contents-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 94%;
  left: -22%;
  width: 150px;
  transform: translate(100%, -50%) rotate(-45deg);
  aspect-ratio: 500/382;
  background: url(../img/recipe/nuts.png) no-repeat center;
  background-size: contain;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-contents-wrapper::before {
    top: 23%;
    left: -41%;
    width: 26%;
  }
}
.recipe-2 .recipe-contents-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 86%;
  right: -20%;
  width: 50%;
  aspect-ratio: 1219/122;
  z-index: 0;
  background: url(../img/recipe/path-pink-loop.png) no-repeat center;
  background-size: contain;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-contents-wrapper::after {
    right: -29%;
    width: 79%;
  }
}
.recipe-2 .recipe-box {
  width: 100%;
  background: url(../img/recipe/bg_recipe_01_pc.png) no-repeat center;
  background-size: 100% 100%;
  display: flex;
  padding: 50px 0;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-box {
    background: url(../img/recipe/bg_recipe_01_sp.png) no-repeat center;
    background-size: 100% 100%;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 30px;
  }
}
.recipe-2 .recipe-image-wrapper {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-image-wrapper {
    width: 87%;
    flex-direction: column;
    row-gap: 24px;
  }
}
.recipe-2 .recipe-image-wrapper .image-inner {
  position: relative;
  width: 76.4%;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-image-wrapper .image-inner {
    width: 100%;
  }
}
.recipe-2 .recipe-image-wrapper .pkg-normal::after {
  position: absolute;
  content: "";
  width: 55%;
  top: -36%;
  right: -19%;
  aspect-ratio: 284/221;
  background: url(../img/recipe/kaki_pkg.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-image-wrapper .pkg-normal::after {
    width: 48%;
    top: -13%;
    right: -11%;
  }
}
.recipe-2 .recipe-text-wrapper {
  padding: 0 2% 0;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-text-wrapper {
    padding: 0;
    margin: 0 auto;
    width: 88%;
  }
}
.recipe-2 .recipe-title {
  max-width: 190px;
  width: 41%;
}
@media screen and (max-width: 768px) {
  .recipe-2 .recipe-title {
    width: 43%;
  }
}
.recipe-2 .material-title {
  max-width: 35px;
  width: 7.5%;
  margin: 25px 0 0;
}
@media screen and (max-width: 768px) {
  .recipe-2 .material-title {
    margin: 10px 0 0;
    width: 11%;
  }
}
.recipe-2 .material-text {
  font-size: 1.0625rem;
  margin: 4px 0 0;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .recipe-2 .material-text {
    font-size: clamp(0.6875rem, 2.7vw, 1.25rem);
  }
}
.recipe-2 .material-text .text {
  line-height: 2;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
.recipe-2 .howto-title {
  max-width: 50px;
  width: 11%;
  margin: 6px 0 0;
}
@media screen and (max-width: 768px) {
  .recipe-2 .howto-title {
    width: 15%;
  }
}
.recipe-2 .howto-text {
  font-size: 1.0625rem;
  margin: 6px 0 0;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .recipe-2 .howto-text {
    font-size: clamp(0.6875rem, 2.7vw, 1.25rem);
  }
}
.recipe-2 .howto-text li {
  line-height: 2;
  display: flex;
  font-weight: bold;
}
.recipe-2 .howto-text li span {
  margin: 0 8px 0 0;
  word-break: keep-all;
}

.container-mini {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}

.section-link {
  padding: 11% 0% 20% 0%;
  background-color: #fff100;
}

.section-link .link-banner-comment {
  width: 100%;
}

.section-link .link-banner-comment.link-banner-comment-01-wrapper {
  margin: 12% auto 0;
}

.section-link .link-banner-comment.link-banner-comment-02-wrapper {
  margin: 17% auto 0;
}

.section-link .link-banner-comment.link-banner-comment-03-wrapper {
  margin: 16% auto 0;
}

.section-link .link-banner-comment.link-banner-comment-04-wrapper {
  margin: 17% auto 0;
}

.section-link .link-banner {
  width: 100%;
}

.section-link .link-banner.link-banner-01-wrapper {
  margin: 4% 0 0;
}

.section-link .link-banner.link-banner-02-wrapper {
  margin: 6% 0 0;
}

.section-link .link-banner.link-banner-03-wrapper {
  margin: 6% 0 0;
}

.section-link .link-banner.link-banner-04-wrapper {
  margin: 6% 0 0;
}

.section-link .link-sns-header-wrapper {
  width: 40%;
  margin: 8% auto 0;
}

.section-link .link-sns-area {
  width: 73%;
  margin: 2% auto 0;
  padding: 2% 20px;
  background-color: #ffffff;
  border: #ffa800 solid 2px;
  border-radius: 10px;
  box-sizing: border-box;
}

.section-link .link-sns-area .link-sns-icon-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 40px;
}

.section-link .link-sns-area .link-sns-icon {
  max-width: 70px;
}

@media screen and (min-width: 751px) {
  .section-link {
    padding: 5% 0 4%;
  }
  .section-link .link-banner-comment {
    width: 82%;
  }
  .section-link .link-banner-comment.link-banner-comment-01-wrapper {
    width: 80%;
    margin: 4% auto 0;
  }
  .section-link .link-banner-comment.link-banner-comment-02-wrapper {
    margin: 12% auto 0;
  }
  .section-link .link-banner-comment.link-banner-comment-03-wrapper {
    margin: 12% auto 0;
  }
  .section-link .link-banner-comment.link-banner-comment-04-wrapper {
    margin: 12% auto 0;
  }
  .section-link .link-banner {
    width: 94%;
  }
  .section-link .link-banner.link-banner-01-wrapper {
    margin: 0;
  }
  .section-link .link-banner.link-banner-02-wrapper {
    margin: 0;
  }
  .section-link .link-banner.link-banner-03-wrapper {
    margin: 0;
  }
  .section-link .link-banner.link-banner-04-wrapper {
    margin: 0;
  }
  .section-link .link-sns-header-wrapper {
    width: 22%;
    margin: 3% auto 0;
  }
  .section-link .link-sns-area {
    width: 50%;
    padding: 15px 8%;
    border: #ffa800 solid 5px;
    border-radius: 20px;
  }
  .section-link .link-sns-area .link-sns-icon-list {
    gap: 40px;
  }
  .section-link .link-sns-area .link-sns-icon {
    max-width: 68px;
  }
}/*# sourceMappingURL=recipe.css.map */