.p-bg--a {
  background: url("/hokkaido100/sakerucheese/assets/images/common/bg_02.jpg") center top/60px auto repeat;
}
.p-bg--a::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1200px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(160, 224, 255, 0) 0%, #a0e0ff 8.3333333333%, #a0e0ff 91.6666666667%, rgba(160, 224, 255, 0) 100%);
  content: "";
}
.p-bg--b {
  background: url("/hokkaido100/sakerucheese/assets/images/common/bg_03.jpg") center top/60px auto repeat;
}
.p-bg--b::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1200px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(131, 213, 255, 0) 0%, #83d5ff 8.3333333333%, #83d5ff 91.6666666667%, rgba(131, 213, 255, 0) 100%);
  content: "";
}
.p-dicbox {
  padding-top: 40px;
}
.p-dicbox + .p-dicbox {
  margin-top: 40px;
}
.p-dicbox__box {
  position: relative;
  padding: 60px 80px;
  border-radius: 20px 20px;
  background: var(--color-white);
}
.p-dicbox__box.flex-item {
  display: flex;
}
.p-dicbox__box.flex-item .p-dicbox__image {
  width: 500px;
  margin: -100px 40px 0 0;
}
.p-dicbox__image {
  margin: -100px 0 40px;
}
.p-dicbox__image.flex-item {
  display: flex;
  gap: 0 40px;
}
.p-dicbox__image .radius {
  overflow: hidden;
  border-radius: 20px 20px;
}
.p-dicbox__body {
  flex: 1;
}
.p-dicbox__title {
  margin-bottom: 30px;
}
.p-dicbox__note {
  margin-top: 1.2em;
}
.keyvisual {
  margin-top: calc(var(--header-height) * -1);
  padding: var(--header-height) 0 100px;
  background: url("/hokkaido100/sakerucheese/assets/images/common/bg_01.jpg") center top/60px auto repeat;
}
.keyvisual .p-keyvisual__image-pic {
  left: 6.7272727273%;
  width: 73.4545454545%;
}
.navancher {
  margin-top: -50px;
}
.navancher::before {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/hokkaido100/sakerucheese/assets/images/common/bg_02.jpg") center top/60px auto repeat;
  content: "";
}
.recipe__text {
  width: 736px;
  margin-inline: auto;
}
.recipe__howto {
  padding-inline: 80px;
  border-radius: 20px 20px;
  background: var(--color-white);
}
.recipe__howto-list {
  display: flex;
  justify-content: space-between;
}
.recipe__howto-list .item {
  position: relative;
  width: 190px;
}
.recipe__howto-list .item:not(:first-of-type)::before {
  z-index: 1;
  position: absolute;
  top: 48px;
  left: -16px;
  aspect-ratio: 3/9;
  width: 30px;
  background: url("/hokkaido100/sakerucheese/assets/images/common/icon_arrow_01.svg") center center/contain no-repeat;
  content: "";
}
.recipe__howto-list .item-image {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 20px 20px;
}
.recipe__howto-list .item-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  border-radius: 0 0 20px 0;
  background: var(--color-conversion);
  font-size: 2.4rem;
  text-align: center;
}
.recipe__child {
  position: absolute;
  bottom: -160px;
  left: 5px;
}
.point__list .item {
  display: flex;
  position: relative;
  padding: 60px 80px;
  overflow: hidden;
  border-radius: 20px 20px;
  background: var(--color-white);
}
.point__list .item + .item {
  margin-top: 40px;
}
.point__list .item-image {
  position: relative;
  width: 450px;
  margin: -60px 0 -60px -80px;
}
.point__list .item-num {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 112px;
  padding: 9px 20px;
  border-radius: 0 0 20px 0;
  background: var(--color-conversion);
  font-size: 1.6rem;
  text-align: center;
}
.point__list .item-num span {
  display: inline-block;
  padding-left: 0.2em;
  font-size: 2.4rem;
  line-height: 1;
}
.point__list .item-body {
  flex: 1;
  align-self: center;
  margin-left: 40px;
}
.point__list .item-title {
  font-size: 2.4rem;
}
.point__list .item-text {
  margin-top: 30px;
}
.point__child {
  position: absolute;
  right: -23px;
  bottom: -160px;
}
.secret__child {
  position: absolute;
  bottom: -160px;
  left: -136px;
}
.memory__child {
  position: absolute;
  right: -50px;
  bottom: -160px;
}
.cheese {
  z-index: 1;
  position: absolute;
  pointer-events: none;
}
.cheese--01 {
  top: 15px;
  left: -70px;
  transform: rotate(-36deg);
}
.cheese--02 {
  top: 250px;
  right: -80px;
  transform: rotate(31deg);
}
.cheese--03 {
  top: -180px;
  right: -70px;
  transform: rotate(-15deg);
}
.cheese--04 {
  top: 515px;
  left: -70px;
  transform: rotate(-38deg);
}
.cheese--05 {
  top: 530px;
  left: -70px;
  transform: rotate(31deg);
}
.cheese--06 {
  top: -200px;
  right: -95px;
  transform: rotate(-38deg);
}
.cheese--07 {
  top: 615px;
  left: -150px;
  transform: rotate(-15deg);
}
@media screen and (max-width: 767px) {
  .p-bg--a {
    background: var(--color-sub-1);
  }
  .p-bg--a::before {
    content: none;
  }
  .p-bg--b {
    background: #83D5FF;
  }
  .p-bg--b::before {
    content: none;
  }
  .p-dicbox {
    padding-top: 30px;
  }
  .p-dicbox + .p-dicbox {
    margin-top: 30px;
  }
  .p-dicbox__box {
    margin-inline: -9.5238095238%;
    padding: 1px 9.5238095238% 40px;
  }
  .p-dicbox__box.flex-item {
    display: block;
  }
  .p-dicbox__box.flex-item .p-dicbox__image {
    width: auto;
    margin: -30px 0 30px;
  }
  .p-dicbox__image {
    margin: -30px 0 30px;
  }
  .p-dicbox__image.flex-item {
    flex-direction: column;
    gap: 30px 0;
  }
  .p-dicbox__title {
    margin-bottom: 25px;
  }
  .keyvisual {
    padding-bottom: 80px;
  }
  .keyvisual .p-keyvisual__image-pic {
    left: 12.2033898305%;
    width: 68.4745762712%;
  }
  .navancher::before {
    background: var(--color-sub-1);
  }
  .navancher {
    margin-top: -40px;
  }
  .recipe {
    padding-bottom: 53.3333333333vw;
  }
  .recipe__text {
    width: auto;
  }
  .recipe__howto {
    margin-inline: -9.5238095238%;
    padding-inline: 3.1746031746%;
  }
  .recipe__howto-list {
    flex-direction: column;
    margin-right: 4.2253521127%;
    gap: 30px 0;
  }
  .recipe__howto-list .item {
    display: flex;
    width: 100%;
  }
  .recipe__howto-list .item:not(:first-of-type)::before {
    top: -55px;
    left: 50%;
    transform: translateX(-15px) rotate(90deg);
  }
  .recipe__howto-list .item-image {
    width: min(170px, 47.8873239437%);
    margin-bottom: 0;
  }
  .recipe__howto-list .item-text {
    flex: 1;
    align-self: center;
    margin-left: 5.6338028169%;
  }
  .recipe__child {
    bottom: -53.3333333333vw;
    left: 25.6%;
    width: 49.3333333333%;
  }
  .point {
    padding-bottom: 53.3333333333vw;
  }
  .point__list .item {
    flex-direction: column;
    margin-inline: -9.5238095238%;
    padding: 0 0;
  }
  .point__list .item + .item {
    margin-top: 30px;
  }
  .point__list .item-image {
    width: 100%;
    margin: 0 0;
  }
  .point__list .item-body {
    margin-left: 0;
    padding: 30px 8% 40px;
  }
  .point__list .item-title {
    font-size: 1.8rem;
  }
  .point__list .item-text {
    margin-top: 20px;
  }
  .point__child {
    right: 28.2666666667%;
    bottom: -53.3333333333vw;
    width: 45.6%;
  }
  .secret {
    padding-bottom: 53.3333333333vw;
  }
  .secret__title {
    margin-inline: -4.7619047619%;
  }
  .secret__child {
    bottom: -53.3333333333vw;
    left: 17.6%;
    width: 62.9333333333%;
  }
  .memory {
    padding-bottom: 53.3333333333vw;
  }
  .memory__child {
    right: 23.7333333333%;
    bottom: -53.3333333333vw;
    width: 58.1333333333%;
  }
  .cheese--01 {
    top: -64px;
    left: -14px;
    width: 90px;
  }
  .cheese--02 {
    top: 1480px;
    right: -32px;
    width: 88px;
  }
  .cheese--03 {
    top: -90px;
    right: -52px;
    width: 107px;
  }
  .cheese--04 {
    display: none;
  }
  .cheese--05 {
    top: 650px;
    left: -35px;
    width: 88px;
  }
  .cheese--06 {
    top: -70px;
    right: -28px;
    width: 61px;
  }
  .cheese--07 {
    top: 700px;
    left: -58px;
    width: 107px;
  }
}