@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap);

* {
  margin: 0px;
  padding: 0px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

body {
  overflow-x: hidden
}

body.china {
  font-family: "Microsoft YaHei", serif
}

body.china * {
  font-family: "Microsoft YaHei", serif
}

body.no_scroll {
  overflow: hidden
}

h1 {
  line-height: 0
}

html {
  font-size: 62.5%
}

body {
  font-family: Roboto, Noto Sans JP, sans-serif;
  font-weight: 700;
  font-size: 1.4rem
}

img {
  vertical-align: top;
  width: 100%
}

li {
  list-style: none
}

@media screen and (min-width: 1025px) {
  a.ov {
    transition: opacity 0.3s
  }

  a.ov:hover {
    opacity: 0.7
  }
}

.floatBnr {
  position: fixed;
  bottom: 1vw;
  right: 1vw;
  width: 23%;
  z-index: 100;
  transition: opacity 0.5s
}

@media screen and (max-width: 750px) {
  .floatBnr {
    left: 50%;
    width: 80%;
    z-index: 100;
    transform: translateX(-50%)
  }
}

.floatBnr.remove {
  opacity: 0;
  pointer-events: none
}

#backAn {
  background-image: -webkit-linear-gradient(270deg, #eb4e6d 0%, #f5869b 100%);
  background-image: linear-gradient(180deg, #eb4e6d 0%, #f5869b 100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh
}

#backAn .obj1 {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff
}

#backAn .obj2 {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 0 3vw 3vw #FFFFFF;
  box-shadow: 0 0 3vw 3vw #FFFFFF
}

#backAn .obj3 {
  position: absolute;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../img/bk-foam.png)
}

body.recipe,
body.list {
  background-position: left top;
  background-attachment: fixed;
  background-image: url("../../img/rec_back.jpg");
  background-repeat: no-repeat;
  background-size: cover
}

@media screen and (max-width: 750px) {

  body.recipe,
  body.list {
    background-position: center top
  }
}

header {
  position: fixed;
  width: 97%;
  height: 6vw;
  background-image: -webkit-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: -moz-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: -o-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: linear-gradient(92deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  top: 2vw;
  left: 1.5%;
  border-radius: 1vw;
  z-index: 1000;
  transition: all 0.5s
}

@media screen and (max-width: 750px) {
  header {
    height: 13vw;
    border-radius: 3vw
  }
}

header nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  transition: all 0.5s
}

@media screen and (max-width: 1024px) {
  header nav {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    transform: translateY(0);
    background-color: rgba(247, 242, 139, 0.9);
    padding-top: 9.5vw
  }
}

@media screen and (max-width: 750px) {
  header nav {
    right: -70%;
    width: 70%;
    padding-top: 16vw
  }
}

header nav>ul {
  display: flex;
  justify-content: flex-end;
  padding-right: 2.5vw
}

@media screen and (max-width: 1024px) {
  header nav>ul {
    display: block
  }
}

header nav>ul li {
  margin-left: 4vw;
  transition: all 0.5s
}

@media screen and (max-width: 1024px) {
  header nav>ul li {
    border-bottom: dotted 1px #e6002d;
    margin-left: 0;
    padding: 3vw 0 3vw 5vw
  }
}

@media screen and (max-width: 750px) {
  header nav>ul li {
    padding: 5vw 0 5vw 5vw
  }
}

header nav>ul li:first-of-type {
  margin-left: 0
}

header nav>ul li a {
  color: #e6002d;
  font-size: 1.35vw;
  text-decoration: none;
  font-weight: 700;
  position: relative;
  transition: all 0.5s;
  padding-left: 1.2vw
}

@media screen and (max-width: 1024px) {
  header nav>ul li a {
    font-size: 2vw
  }
}

@media screen and (max-width: 750px) {
  header nav>ul li a {
    font-size: 4vw;
    padding-left: 2vw
  }
}

header nav>ul li a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5vw 0 0.5vw 0.8vw;
  border-color: transparent transparent transparent #e6002d;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%)
}

@media screen and (max-width: 1024px) {
  header nav>ul li a::before {
    border-width: 0.7vw 0 0.7vw 1vw
  }
}

@media screen and (max-width: 750px) {
  header nav>ul li a::before {
    border-width: 1.3vw 0 1.3vw 1.7vw
  }
}

@media screen and (min-width: 1025px) {

  header nav>ul li a:hover,
  header nav>ul li a.active {
    text-shadow: 0 0 4px #ac8915
  }
}

@media screen and (max-width: 1024px) {
  header nav>ul li a.active {
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5), -2px 2px 2px rgba(255, 255, 255, 0.5), 2px -2px 2px rgba(255, 255, 255, 0.5), -2px -2px 2px rgba(255, 255, 255, 0.5)
  }
}

header nav>ul.en li {
  margin-left: 2vw
}

@media screen and (max-width: 750px) {
  header nav>ul.en li {
    margin-left: 0
  }
}

header nav>ul.en li a {
  font-size: 1.2vw
}

@media screen and (max-width: 1024px) {
  header nav>ul.en li a {
    font-size: 2vw
  }
}

@media screen and (max-width: 750px) {
  header nav>ul.en li a {
    font-size: 3vw;
    padding-left: 2vw
  }
}

header nav .hedLangWrap {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 4.5vw
}

header nav .hedLangWrap.en {
  top: 4.3vw
}

@media screen and (max-width: 1024px) {
  header nav .hedLangWrap {
    position: relative;
    padding: 3vw;
    top: 0
  }
}

header nav .hedLangWrap ul {
  display: flex;
  flex-wrap: wrap
}

@media screen and (max-width: 1024px) {
  header nav .hedLangWrap ul {
    justify-content: space-between
  }
}

header nav .hedLangWrap ul li {
  margin-right: 0.5vw
}

@media screen and (max-width: 1024px) {
  header nav .hedLangWrap ul li {
    margin-right: 0;
    width: 32%
  }
}

header nav .hedLangWrap ul li a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9vw;
  font-weight: 600;
  text-decoration: none;
  border: 0.1vw solid #e6002d;
  background-color: rgba(255, 255, 255, 0.8);
  display: block;
  width: 7vw;
  padding: 0.5vw 0;
  color: #e6002d;
  text-align: center;
  border-radius: 0.5vw
}

@media screen and (max-width: 1024px) {
  header nav .hedLangWrap ul li a {
    font-size: 1.5vw;
    padding: 1vw 0;
    width: 100%;
    background-color: transparent;
    border-width: 0.2vw;
    border-radius: 0.7vw
  }
}

@media screen and (max-width: 750px) {
  header nav .hedLangWrap ul li a {
    font-size: 2.5vw;
    padding: 2vw 0;
    border-width: 0.4vw;
    width: 20vw;
    border-radius: 2vw
  }
}

header nav .hedLangWrap ul li.active a {
  background-color: #e8c54e;
  pointer-events: none
}

@media screen and (max-width: 1024px) {
  header nav .hedLangWrap ul li.active a {
    background-color: #e6002d;
    color: #fff
  }
}

header h1 {
  width: 9vw;
  position: absolute;
  top: 50%;
  left: 2.5vw;
  transform: translateY(-50%);
  transition: all 0.5s;
  z-index: 1;
  font-size: 0
}

@media screen and (max-width: 1024px) {
  header h1 {
    width: 11vw
  }
}

@media screen and (max-width: 750px) {
  header h1 {
    width: 18vw;
    left: 5vw
  }
}

@media screen and (min-width: 1025px) {
  header.smsPos {
    height: 70px;
    width: 850px;
    top: 0;
    left: 50%;
    border-radius: 0 0 12px 12px;
    background-color: #d70161;
    transform: translateX(-50%)
  }

  header.smsPos nav {
    width: 90%;
    right: 50%;
    transform: translate(50%, -50%)
  }

  header.smsPos nav li {
    margin-left: 20px
  }

  header.smsPos nav li a {
    font-size: 14px;
    padding-left: 12px
  }

  header.smsPos nav li a::before {
    border-width: 4px 0 4px 8px
  }

  header.smsPos h1 {
    opacity: 0;
    pointer-events: none
  }
}

.hedSnsWrap {
  position: absolute;
  z-index: 1;
  top: 7vw;
  right: 0;
  display: flex;
  align-items: center
}

@media screen and (max-width: 750px) {
  .hedSnsWrap {
    right: 18vw;
    transform: translateY(-50%)
  }
}

.hedSnsWrap p {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: 1.5vw;
  line-height: 1.5em;
  -webkit-text-stroke-width: 0.25vw;
  font-weight: 400;
  margin-right: 0.5vw
}

@media screen and (max-width: 750px) {
  .hedSnsWrap p {
    font-size: 2.5vw;
    -webkit-text-stroke-width: 0;
    line-height: 1.2em;
    margin-right: 2vw;
    font-weight: 600;
    color: #e6002d
  }
}

.hedSnsWrap p b {
  font-family: "Noto Sans JP", sans-serif;
  position: absolute;
  display: flex;
  -webkit-text-stroke-width: 0;
  z-index: 20;
  color: #d70161;
  font-weight: 400;
  font-size: 1.5vw
}

@media screen and (max-width: 750px) {
  .hedSnsWrap p b {
    display: none
  }
}

.hedSnsWrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 11vw
}

@media screen and (max-width: 750px) {
  .hedSnsWrap ul {
    width: 28vw
  }
}

.hedSnsWrap ul li {
  width: 30%
}

.menu-btn {
  position: absolute;
  top: 50%;
  right: 2.5vw;
  transform: translateY(-50%);
  display: flex;
  height: 4vw;
  width: 6vw;
  justify-content: center;
  align-items: center;
  z-index: 90
}

@media screen and (max-width: 750px) {
  .menu-btn {
    right: 5vw;
    height: 6vw;
    width: 8vw
  }
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 0.4vw;
  width: 6vw;
  border-radius: 0.4vw;
  background-color: #e6002d;
  position: absolute;
  opacity: 1;
  transition: all 0.5s
}

@media screen and (max-width: 750px) {

  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    width: 8vw;
    height: 0.8vw
  }
}

.menu-btn span:before {
  bottom: 1.2vw;
  transition: all 0.5s
}

@media screen and (max-width: 750px) {
  .menu-btn span:before {
    bottom: 2.1vw
  }
}

.menu-btn span:after {
  top: 1.2vw;
  transition: all 0.4s
}

@media screen and (max-width: 750px) {
  .menu-btn span:after {
    top: 2.1vw
  }
}

@media screen and (min-width: 1025px) {
  .menu-btn {
    display: none
  }
}

#menu-btn-check {
  display: none
}

@media screen and (max-width: 1024px) {

  #menu-btn-check:checked~.menu-btn span,
  #menu-btn-check:checked~.menu-btn span:before,
  #menu-btn-check:checked~.menu-btn span:after {
    background-color: rgba(0, 0, 0, 0)
  }

  #menu-btn-check:checked~.menu-btn span:before {
    bottom: 0;
    transform: rotate(45deg);
    background-color: #e6002d
  }

  #menu-btn-check:checked~.menu-btn span:after {
    top: 0;
    transform: rotate(-45deg);
    background-color: #e6002d
  }

  #menu-btn-check:checked~nav {
    right: 0
  }
}

.component {
  width: 100vw;
  height: 100vh;
  position: fixed;
  pointer-events: none;
  z-index: 1001
}

.component a {
  display: flex;
  width: 100vw;
  height: 100vh
}

.component.active {
  pointer-events: all
}

.component.active .popWrap {
  opacity: 1
}

.component .popWrap {
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: 1001;
  padding: 2vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 1vw;
  opacity: 0;
  transition: opacity 0.5s
}

@media screen and (max-width: 750px) {
  .component .popWrap {
    padding: 4vw;
    display: block;
    width: 95%;
    border-radius: 2.5vw
  }
}

.component .popWrap dl {
  width: 49%
}

@media screen and (max-width: 750px) {
  .component .popWrap dl {
    width: 100%
  }
}

.component .popWrap dl.wid {
  width: 100%
}

.component .popWrap dl dt {
  background-color: #e6002d;
  padding: 0.3vw 0
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dt {
    padding: 1vw 0
  }
}

.component .popWrap dl dt p {
  font-size: 1.2vw;
  text-align: center;
  color: #fff;
  font-weight: 500
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dt p {
    font-size: 3vw
  }
}

.component .popWrap dl dt p span,
.component .popWrap dl dt p .menu-btn span:before,
.menu-btn .component .popWrap dl dt p span:before,
.component .popWrap dl dt p .menu-btn span:after,
.menu-btn .component .popWrap dl dt p span:after {
  font-size: 0.9vw
}

@media screen and (max-width: 750px) {

  .component .popWrap dl dt p span,
  .component .popWrap dl dt p .menu-btn span:before,
  .menu-btn .component .popWrap dl dt p span:before,
  .component .popWrap dl dt p .menu-btn span:after,
  .menu-btn .component .popWrap dl dt p span:after {
    font-size: 2.5vw
  }
}

.component .popWrap dl dd {
  padding: 1vw
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd {
    padding: 2vw 0
  }
}

.component .popWrap dl dd p {
  font-size: 1.1vw
}

.component .popWrap dl dd p b {
  font-size: 1.1vw;
  color: #e6002d
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd p {
    font-size: 3vw
  }
}

.component .popWrap dl dd ul.indTx li {
  font-size: 1.1vw;
  text-indent: -0.5em;
  padding-left: 0.5em
}

.component .popWrap dl dd ul.indTx li b {
  font-size: 1.1vw;
  color: #e6002d
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.indTx li {
    font-size: 3vw
  }
}

.component .popWrap dl dd ul.graph {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #e6002d;
  margin: 1vw 0
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.graph {
    border: 0.4vw solid #e6002d
  }
}

.component .popWrap dl dd ul.graph li {
  width: 14.3%;
  height: 3.5vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 1.1vw;
  font-weight: 400;
  text-align: center;
  border-right: 1px dotted #e6002d;
  border-bottom: 1px dotted #e6002d;
  color: #e6002d
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.graph li {
    font-size: 3vw;
    height: 8vw;
    width: 25%
  }
}

.component .popWrap dl dd ul.graph li.active {
  background-color: #e6002d;
  color: #fff;
  font-weight: 500
}

.component .popWrap dl dd ul.graph li:nth-child(7n) {
  width: 14.2%;
  border-right: none
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.graph li:nth-child(7n) {
    width: 25%;
    border-right: 1px dotted #e6002d
  }
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.graph li:nth-child(4n) {
    border-right: none
  }
}

.component .popWrap dl dd ul.graph li:nth-last-of-type(-n+7) {
  border-bottom: none
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.graph li:nth-last-of-type(-n+7) {
    border-bottom: 1px dotted #e6002d
  }
}

@media screen and (max-width: 750px) {
  .component .popWrap dl dd ul.graph li:nth-last-of-type(-n+4) {
    border-bottom: none
  }
}

.component .popWrap dl dd ul.graph li span,
.component .popWrap dl dd ul.graph li .menu-btn span:before,
.menu-btn .component .popWrap dl dd ul.graph li span:before,
.component .popWrap dl dd ul.graph li .menu-btn span:after,
.menu-btn .component .popWrap dl dd ul.graph li span:after {
  width: 100%;
  display: block;
  font-size: 1vw
}

@media screen and (max-width: 750px) {

  .component .popWrap dl dd ul.graph li span,
  .component .popWrap dl dd ul.graph li .menu-btn span:before,
  .menu-btn .component .popWrap dl dd ul.graph li span:before,
  .component .popWrap dl dd ul.graph li .menu-btn span:after,
  .menu-btn .component .popWrap dl dd ul.graph li span:after {
    font-size: 2.3vw
  }
}

.component .popWrap dl:last-of-type dd {
  padding-bottom: 0
}

.component .popWrap .closeBt a {
  z-index: 9994;
  width: 3vw;
  height: 3vw;
  position: fixed;
  right: -1vw;
  top: -1vw;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
  background-color: #e6002d;
  border-radius: 100%;
  border: 2px solid #fff
}

@media screen and (max-width: 750px) {
  .component .popWrap .closeBt a {
    width: 8vw;
    height: 8vw;
    top: -9vw
  }
}

.component .popWrap .closeBt a::before,
.component .popWrap .closeBt a::after {
  content: "";
  display: block;
  width: 80%;
  height: 3px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto 0
}

.component .popWrap .closeBt a::before {
  transform: translate(-50%, -50%) rotate(45deg)
}

.component .popWrap .closeBt a::after {
  transform: translate(-50%, -50%) rotate(-45deg)
}

article {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  top: 12vw
}

@media screen and (max-width: 750px) {
  article {
    top: 20vw
  }
}

section.waveContent {
  margin: 0 0 10vw 0
}

section.waveContent:last-of-type {
  margin-bottom: 0
}

section .waveWrap {
  height: 4.5vw;
  position: relative
}

@media screen and (max-width: 750px) {
  section .waveWrap {
    height: 7vw
  }
}

section .waveWrap canvas {
  position: absolute;
  padding: 0;
  opacity: 0.8
}

section .waveWrap.top canvas {
  bottom: 0
}

section .waveWrap.bottom canvas {
  top: 0
}

section .content {
  background-color: rgba(255, 255, 255, 0.8);
  overflow-x: hidden
}

section .inner {
  width: 84%;
  margin: auto;
  padding: 5vw 0
}

@media screen and (max-width: 750px) {
  section .inner {
    width: 92%
  }
}

section .inner .hedCont {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

@media screen and (max-width: 750px) {
  section .inner .hedCont {
    display: block
  }
}

section .inner .hedCont .product {
  width: 36%
}

@media screen and (max-width: 750px) {
  section .inner .hedCont .product {
    width: 63%;
    margin: auto
  }

  section .inner .hedCont .product img {
    width: 90%;
    margin: auto;
    display: block
  }
}

section .inner .hedCont .product a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vw;
  width: 100%;
  color: #e6002d;
  font-size: 2vw;
  font-weight: 900;
  text-decoration: none;
  background-color: #fff;
  border-radius: 10vw;
  border: 8px double #e6002d;
  margin-top: 2vw
}

@media screen and (max-width: 750px) {
  section .inner .hedCont .product a {
    height: 14vw;
    font-size: 4vw;
    margin-top: 6vw
  }
}

section .inner .hedCont ul {
  width: 62%;
  position: relative
}

@media screen and (max-width: 750px) {
  section .inner .hedCont ul {
    width: 100%;
    height: 80vw;
    margin: auto;
    margin-top: 7vw
  }
}

section .inner .hedCont ul li {
  width: 47%;
  aspect-ratio: 1;
  position: absolute
}

section .inner .hedCont ul li .bubble {
  background-color: #fff;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 4vw 1vw #e6002d, inset 0 0 3vw 1.5vw #e6002d;
  box-shadow: 0 0 4vw 1vw #e6002d, inset 0 0 3vw 1.5vw #e6002d
}

@media screen and (max-width: 750px) {
  section .inner .hedCont ul li .bubble {
    -webkit-box-shadow: 0 0 8vw 2vw #e6002d, inset 0 0 6vw 3vw #e6002d;
    box-shadow: 0 0 8vw 2vw #e6002d, inset 0 0 6vw 3vw #e6002d
  }
}

section .inner .hedCont ul li .bubble a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #e6002d;
  font-size: 2vw;
  font-weight: 900
}

@media screen and (max-width: 750px) {
  section .inner .hedCont ul li .bubble a {
    font-size: 4vw
  }
}

section .inner .hedCont ul li .bubble:hover {
  animation: purun 0.8s linear 0s 1
}

section .inner .hedCont ul li:nth-child(1) {
  top: 0;
  left: 0
}

section .inner .hedCont ul li:nth-child(2) {
  top: 0;
  right: 0
}

section .inner .hedCont ul li:nth-child(3) {
  bottom: 7vw;
  left: 50%;
  transform: translateX(-50%)
}

section .inner .hedCont ul li.reverse .bubble {
  background-color: #eb6164;
  -webkit-box-shadow: 0 0 4vw 1vw #e6002d, inset 0 0 3vw 1.5vw #fff;
  box-shadow: 0 0 4vw 1vw #e6002d, inset 0 0 3vw 1.5vw #fff
}

@media screen and (max-width: 750px) {
  section .inner .hedCont ul li.reverse .bubble {
    -webkit-box-shadow: 0 0 8vw 2vw #e6002d, inset 0 0 6vw 3vw #fff;
    box-shadow: 0 0 8vw 2vw #e6002d, inset 0 0 6vw 3vw #fff
  }
}

section .inner .hedCont ul li.reverse .bubble a {
  color: #fff
}

section .inner .hedCont.algItmCent {
  align-items: center
}

section .inner .hedCont.algItmCent ul {
  height: 29vw
}

@media screen and (max-width: 750px) {
  section .inner .hedCont.algItmCent ul {
    height: 50vw
  }
}

section .inner .contTitle {
  background-color: #e6002d;
  width: 100%;
  font-size: 2.5vw;
  font-weight: 600;
  padding: 1vw 1.8vw;
  border-radius: 5vw;
  color: #F7F28B;
  margin-bottom: 3vw
}

@media screen and (max-width: 750px) {
  section .inner .contTitle {
    font-size: 4.5vw;
    padding: 3vw 3vw;
    border-radius: 10vw
  }
}

section .inner .contentWrap .lead {
  color: #e6002d;
  font-size: 1.9vw;
  font-weight: 400
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .lead {
    font-size: 4vw;
    text-align: center
  }
}

section .inner .contentWrap .cont1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 {
    display: block
  }
}

section .inner .contentWrap .cont1 .leftWrap {
  width: 47%;
  position: relative
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .leftWrap {
    width: 67%;
    margin: auto;
    margin-top: 8vw
  }
}

section .inner .contentWrap .cont1 .leftWrap .img {
  background-color: #000;
  border-radius: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center
}

section .inner .contentWrap .cont1 .leftWrap .tag {
  width: 35%;
  position: absolute;
  top: -1vw;
  left: 0
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .leftWrap .tag {
    width: 40%;
    top: -4vw;
    left: -1vw
  }
}

section .inner .contentWrap .cont1 .rightWrap {
  width: 47%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap {
    width: 100%;
    margin-top: 5vw
  }
}

section .inner .contentWrap .cont1 .rightWrap .graph {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 3vw 0
}

section .inner .contentWrap .cont1 .rightWrap .graph .circle1 {
  width: 27%;
  background-color: #e6002d;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 100%;
  font-size: 1.2vw;
  font-weight: 900;
  color: #ffde00;
  text-align: center
}

section .inner .contentWrap .cont1 .rightWrap .graph .circle1.en {
  font-size: 1vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap .graph .circle1 {
    font-size: 3.2vw;
    width: 33%
  }
}

section .inner .contentWrap .cont1 .rightWrap .graph .triangle {
  width: 52%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap .graph .triangle {
    width: 40%;
    height: 20vw;
    position: relative
  }

  section .inner .contentWrap .cont1 .rightWrap .graph .triangle img {
    height: 100%
  }
}

section .inner .contentWrap .cont1 .rightWrap .graph .circle2 {
  width: 17%;
  background-color: #f5869b;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 100%;
  font-size: 1.2vw;
  font-weight: 900;
  color: #fff;
  text-align: center
}

section .inner .contentWrap .cont1 .rightWrap .graph .circle2.en {
  font-size: 1vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap .graph .circle2 {
    font-size: 3.2vw;
    width: 23%
  }
}

section .inner .contentWrap .cont1 .rightWrap ul.molecule {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

section .inner .contentWrap .cont1 .rightWrap ul.molecule li {
  width: 32%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap ul.molecule li {
    width: 33%
  }
}

section .inner .contentWrap .cont1 .rightWrap ul.molecule li .image {
  border-radius: 100%;
  overflow: hidden;
  border: 0.2vw solid #e6002d
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap ul.molecule li .image {
    border: 0.5vw solid #e6002d
  }
}

section .inner .contentWrap .cont1 .rightWrap ul.molecule li p {
  font-size: 1.2vw;
  text-align: center;
  font-weight: 400
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont1 .rightWrap ul.molecule li p {
    font-size: 3.2vw
  }
}

section .inner .contentWrap .cont2 {
  position: relative;
  margin-top: 3vw
}

section .inner .contentWrap .cont2 .comp5 {
  width: 53%;
  margin: auto;
  padding: 13vw 0 5vw 0
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 .comp5 {
    width: 85%;
    padding: 20vw 0 20vw 0
  }
}

section .inner .contentWrap .cont2 .mainCp {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 .mainCp {
    position: static;
    transform: translateX(0);
    width: 100%
  }
}

section .inner .contentWrap .cont2 .mainCp .eTit {
  color: #e6002d;
  font-weight: 800;
  font-size: 1.7vw;
  text-align: center
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 .mainCp .eTit {
    text-align: left;
    font-size: 3.5vw
  }
}

section .inner .contentWrap .cont2 .mainCp .eTit span,
section .inner .contentWrap .cont2 .mainCp .eTit .menu-btn span:before,
.menu-btn section .inner .contentWrap .cont2 .mainCp .eTit span:before,
section .inner .contentWrap .cont2 .mainCp .eTit .menu-btn span:after,
.menu-btn section .inner .contentWrap .cont2 .mainCp .eTit span:after {
  display: none
}

@media screen and (max-width: 750px) {

  section .inner .contentWrap .cont2 .mainCp .eTit span,
  section .inner .contentWrap .cont2 .mainCp .eTit .menu-btn span:before,
  .menu-btn section .inner .contentWrap .cont2 .mainCp .eTit span:before,
  section .inner .contentWrap .cont2 .mainCp .eTit .menu-btn span:after,
  .menu-btn section .inner .contentWrap .cont2 .mainCp .eTit span:after {
    display: inline;
    margin-right: 0.5vw;
    font-size: 4vw;
    font-weight: 500
  }
}

section .inner .contentWrap .cont2 .mainCp .eBod {
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 .mainCp .eBod {
    font-size: 3vw;
    text-align: left
  }
}

section .inner .contentWrap .cont2 ul.exp {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp {
    position: static
  }
}

section .inner .contentWrap .cont2 ul.exp li {
  position: absolute
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp li {
    position: static;
    margin-top: 8vw
  }
}

section .inner .contentWrap .cont2 ul.exp li .eTit {
  color: #e6002d;
  font-weight: 800;
  font-size: 1.5vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp li .eTit {
    font-size: 3.5vw
  }
}

section .inner .contentWrap .cont2 ul.exp li .eTit span,
section .inner .contentWrap .cont2 ul.exp li .eTit .menu-btn span:before,
.menu-btn section .inner .contentWrap .cont2 ul.exp li .eTit span:before,
section .inner .contentWrap .cont2 ul.exp li .eTit .menu-btn span:after,
.menu-btn section .inner .contentWrap .cont2 ul.exp li .eTit span:after {
  display: none
}

@media screen and (max-width: 750px) {

  section .inner .contentWrap .cont2 ul.exp li .eTit span,
  section .inner .contentWrap .cont2 ul.exp li .eTit .menu-btn span:before,
  .menu-btn section .inner .contentWrap .cont2 ul.exp li .eTit span:before,
  section .inner .contentWrap .cont2 ul.exp li .eTit .menu-btn span:after,
  .menu-btn section .inner .contentWrap .cont2 ul.exp li .eTit span:after {
    display: inline;
    margin-right: 0.5vw;
    font-size: 4vw;
    font-weight: 500
  }
}

section .inner .contentWrap .cont2 ul.exp li .eBod {
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.5em
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp li .eBod {
    font-size: 3vw
  }
}

section .inner .contentWrap .cont2 ul.exp li:nth-child(1) {
  top: 10vw;
  right: 2vw;
  width: 22%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp li:nth-child(1) {
    width: 100%
  }
}

section .inner .contentWrap .cont2 ul.exp li:nth-child(2) {
  top: 31.5vw;
  width: 22%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp li:nth-child(2) {
    width: 100%
  }
}

section .inner .contentWrap .cont2 ul.exp li:nth-child(3) {
  width: 22%;
  top: 45vw;
  right: 2vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 ul.exp li:nth-child(3) {
    width: 100%
  }
}

section .inner .contentWrap .cont2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont2 svg {
    height: 115vw
  }
}

section .inner .contentWrap .cont2 ul.nums {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

section .inner .contentWrap .cont2 ul.nums li {
  position: absolute;
  font-size: 5vw;
  font-weight: 500;
  color: #e6002d
}

section .inner .contentWrap .cont2 ul.nums li:nth-child(1) {
  top: 0;
  left: 43.5vw
}

section .inner .contentWrap .cont2 ul.nums li:nth-child(2) {
  top: 7.5vw;
  right: 0
}

section .inner .contentWrap .cont2 ul.nums li:nth-child(3) {
  top: 99.5vw;
  left: 0
}

section .inner .contentWrap .cont2 ul.nums li:nth-child(4) {
  top: 107vw;
  left: 55vw
}

section .inner .contentWrap .cont3 .secretList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 5vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList {
    flex-flow: column;
    margin-bottom: 15vw
  }

  section .inner .contentWrap .cont3 .secretList:last-of-type {
    margin-bottom: 0
  }
}

section .inner .contentWrap .cont3 .secretList .graphs {
  width: 50%;
  border-radius: 1vw;
  padding: 2vw;
  position: relative
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs {
    width: 100%;
    border-radius: 3vw;
    padding: 4vw
  }
}

section .inner .contentWrap .cont3 .secretList .graphs.pink {
  background-color: rgba(230, 0, 45, 0.5)
}

section .inner .contentWrap .cont3 .secretList .graphs.white {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #e6002d
}

section .inner .contentWrap .cont3 .secretList .graphs .tag {
  position: absolute;
  top: 2vw;
  left: 2vw;
  width: 23%
}

section .inner .contentWrap .cont3 .secretList .graphs .ribon {
  position: absolute;
  width: 68%;
  right: -5vw;
  top: -3.3vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs .ribon {
    right: -10vw;
    top: -6vw
  }
}

section .inner .contentWrap .cont3 .secretList .graphs .mgTit {
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  font-size: 2vw;
  line-height: 1.5em;
  -webkit-text-stroke-width: 0.4vw;
  font-weight: 500;
  margin-bottom: 0.6vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs .mgTit {
    font-size: 4.3vw;
    -webkit-text-stroke-width: 1vw;
    margin-bottom: 1.5vw
  }
}

section .inner .contentWrap .cont3 .secretList .graphs .mgTit b {
  position: absolute;
  display: flex;
  -webkit-text-stroke-width: 0;
  z-index: 20;
  color: #e6002d;
  font-weight: 500
}

section .inner .contentWrap .cont3 .secretList .graphs .mgBod {
  font-size: 1.5vw;
  font-weight: 400;
  color: #fff
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs .mgBod {
    font-size: 4vw
  }
}

section .inner .contentWrap .cont3 .secretList .graphs .cups {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs .cups {
    margin-top: 6vw
  }
}

section .inner .contentWrap .cont3 .secretList .graphs .cups li {
  width: 45%;
  position: relative
}

section .inner .contentWrap .cont3 .secretList .graphs .cups li p {
  width: 70%;
  height: 3vw;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #e6002d;
  text-align: center;
  position: absolute;
  top: -1vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5vw;
  font-weight: 500
}

section .inner .contentWrap .cont3 .secretList .graphs .cups li p.en {
  height: 5vw;
  top: -2vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs .cups li p {
    height: 7vw;
    font-size: 3.5vw;
    border-radius: 1.5vw
  }
}

section .inner .contentWrap .cont3 .secretList .graphs .cups li .image {
  overflow: hidden;
  border-radius: 100%
}

section .inner .contentWrap .cont3 .secretList .graphs .cups li:nth-child(1)::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5vw 0 1.5vw 2.3vw;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  right: -3.2vw;
  transform: translateY(-50%)
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .graphs .cups li:nth-child(1)::after {
    border-width: 4vw 0 4vw 4.5vw;
    right: -6.5vw
  }
}

section .inner .contentWrap .cont3 .secretList .mTxt {
  width: 48%
}

section .inner .contentWrap .cont3 .secretList .mTxt.long {
  width: 100%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .mTxt {
    width: 100%;
    margin-bottom: 3vw
  }
}

section .inner .contentWrap .cont3 .secretList .mTxt .mTit {
  color: #e6002d;
  font-size: 2.2vw;
  font-weight: 500;
  display: flex;
  position: relative;
  align-items: center;
  text-shadow: 0.2vw 0.2vw 0.2vw #FFFFFF, -0.2vw 0.2vw 0.2vw #FFFFFF, 0.2vw -0.2vw 0.2vw #FFFFFF, -0.2vw -0.2vw 0.2vw #FFFFFF;
  margin-bottom: 1vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .mTxt .mTit {
    font-size: 4.8vw
  }
}

section .inner .contentWrap .cont3 .secretList .mTxt .mTit::before {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background-image: url("../../img/bbpt.png");
  background-size: contain;
  width: 6vw;
  height: 6vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .mTxt .mTit::before {
    width: 11vw;
    height: 11vw;
    margin-right: 1vw
  }
}

section .inner .contentWrap .cont3 .secretList .mTxt .mBod {
  font-size: 1.5vw;
  font-weight: 500;
  line-height: 1.8em
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList .mTxt .mBod {
    font-size: 3.5vw
  }
}

section .inner .contentWrap .cont3 .secretList:nth-child(2n) .graphs {
  order: 1
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList:nth-child(2n) .graphs {
    order: 2
  }
}

section .inner .contentWrap .cont3 .secretList:nth-child(2n) .mTxt {
  order: 2
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont3 .secretList:nth-child(2n) .mTxt {
    order: 1
  }
}

section .inner .contentWrap .cont3 .secretList:nth-child(2n+1) .graphs {
  order: 2
}

section .inner .contentWrap .cont3 .secretList:nth-child(2n+1) .mTxt {
  order: 1
}

section .inner .contentWrap .cont4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 2vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 {
    display: block
  }
}

section .inner .contentWrap .cont4 ul.usualTx {
  width: 67%
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualTx {
    width: 100%
  }
}

section .inner .contentWrap .cont4 ul.usualTx li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualTx li {
    align-items: center;
    margin-bottom: 4vw
  }
}

section .inner .contentWrap .cont4 ul.usualTx li:last-of-type {
  margin-bottom: 0
}

section .inner .contentWrap .cont4 ul.usualTx li .illust {
  width: 22%
}

section .inner .contentWrap .cont4 ul.usualTx li .discTx {
  width: 76%
}

section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step {
  color: #e6002d;
  font-size: 3.4vw;
  font-weight: 700;
  border-bottom: 0.25vw solid #e6002d;
  line-height: 0.7em;
  margin-bottom: 0.2vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step {
    font-size: 7vw;
    border-bottom: 0.7vw solid #e6002d;
    margin-bottom: 0.5vw
  }
}

section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step span,
section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step .menu-btn span:before,
.menu-btn section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step span:before,
section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step .menu-btn span:after,
.menu-btn section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step span:after {
  font-size: 1.6vw;
  font-weight: 400;
  margin-right: 0.3vw
}

@media screen and (max-width: 750px) {

  section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step span,
  section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step .menu-btn span:before,
  .menu-btn section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step span:before,
  section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step .menu-btn span:after,
  .menu-btn section .inner .contentWrap .cont4 ul.usualTx li .discTx p.step span:after {
    font-size: 3.5vw
  }
}

section .inner .contentWrap .cont4 ul.usualTx li .discTx p.uBod {
  color: #e6002d;
  border-top: 0.15vw solid #e6002d;
  font-size: 1.8vw;
  font-weight: 500
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualTx li .discTx p.uBod {
    border-top: 0.4vw solid #e6002d;
    font-size: 3.4vw
  }
}

section .inner .contentWrap .cont4 ul.usualTx li .discTx p.uBod cap {
  display: block;
  color: #000;
  font-size: 1.3vw;
  font-weight: 400;
  padding-left: 1em;
  text-indent: -1em
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualTx li .discTx p.uBod cap {
    font-size: 2.7vw
  }
}

section .inner .contentWrap .cont4 ul.usualImg {
  width: 31%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualImg {
    width: 100%;
    margin-top: 5vw
  }
}

section .inner .contentWrap .cont4 ul.usualImg li {
  width: 49.5%;
  margin-bottom: 0.2vw
}

@media screen and (max-width: 750px) {
  section .inner .contentWrap .cont4 ul.usualImg li {
    width: 33%;
    margin-bottom: 0.3vw
  }
}

.recipeBn {
  width: 84%;
  margin: 0 auto 10vw auto
}

@media screen and (max-width: 750px) {
  .recipeBn {
    width: 92%
  }
}

.recipeBn a {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  text-decoration: none;
  border: 0.2vw solid #fff;
  border-radius: 25vw;
  padding: 1% 1.5% 1% 4%;
  -webkit-box-shadow: 0 0 1.5vw 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 1.5 0 rgba(0, 0, 0, 0.6);
  background-image: -webkit-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: -moz-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: -o-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: linear-gradient(92deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%)
}

@media screen and (max-width: 750px) {
  .recipeBn a {
    padding: 2% 2% 2% 5%;
    border: 0.4vw solid #fff
  }
}

.recipeBn a ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 50%
}

@media screen and (max-width: 750px) {
  .recipeBn a ul {
    width: 58%
  }
}

.recipeBn a ul li {
  width: 32%;
  overflow: hidden;
  border-radius: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center
}

.recipeBn a ul li img {
  object-fit: cover;
  height: 100%
}

@media screen and (max-width: 750px) {
  .recipeBn a ul li {
    width: 33%
  }
}

.recipeBn a p {
  font-size: 2.5vw;
  color: #e6002d;
  font-weight: 600;
  text-decoration: none;
  width: 50%
}

@media screen and (max-width: 750px) {
  .recipeBn a p {
    font-size: 4.3vw;
    letter-spacing: -0.2vw;
    width: 40%;
    line-height: 1.3em
  }
}

footer {
  width: 97%;
  height: 7.5vw;
  background-image: -webkit-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: -moz-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: -o-linear-gradient(358deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  background-image: linear-gradient(92deg, #e8c54e 0%, #f7f28b 50.45%, #e8c54e 100%);
  border-radius: 1vw;
  margin: auto;
  margin-bottom: 2vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 2.5vw
}

@media screen and (max-width: 750px) {
  footer {
    display: block;
    height: auto;
    padding: 3vw;
    border-radius: 3vw
  }
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  width: 70%
}

@media screen and (max-width: 750px) {
  footer ul {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 2vw
  }
}

footer ul li {
  margin-right: 2vw
}

footer ul li:first-child {
  margin-bottom: 0.6vw
}

@media screen and (max-width: 750px) {
  footer ul li {
    margin-right: 0;
    width: 100%;
    margin-bottom: 3vw
  }

  footer ul li:first-child {
    margin-bottom: 3vw
  }
}

footer ul li a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1vw;
  color: #e6002d;
  text-decoration: none;
  position: relative;
  font-weight: 400;
  padding-left: 1.3vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1em
}

@media screen and (max-width: 750px) {
  footer ul li a {
    justify-content: center;
    align-items: center;
    border: 1px solid #e6002d;
    text-align: center;
    font-size: 3.2vw;
    height: 12vw;
    border-radius: 1.5vw
  }
}

footer ul li a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5vw 0 0.5vw 0.8vw;
  border-color: transparent transparent transparent #e6002d;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%)
}

@media screen and (max-width: 1024px) {
  footer ul li a::before {
    border-width: 0.7vw 0 0.7vw 1vw
  }
}

@media screen and (max-width: 750px) {
  footer ul li a::before {
    position: static;
    transform: translateY(0);
    margin-right: 1vw;
    border-width: 1vw 0 1vw 1.6vw
  }
}

footer p {
  font-family: "Noto Sans JP", sans-serif;
  color: #e6002d;
  font-size: 1.1vw;
  font-weight: 500
}

@media screen and (max-width: 750px) {
  footer p {
    font-size: 3.5vw;
    text-align: center
  }
}

.SnsWrap {
  width: 100%;
  margin: 5vw 0
}

@media screen and (max-width: 750px) {
  .SnsWrap {
    margin: 10vw 0
  }
}

.SnsWrap .inner {
  width: 25%;
  margin: auto
}

@media screen and (max-width: 750px) {
  .SnsWrap .inner {
    width: 70%
  }
}

.SnsWrap .inner p {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: 1.5vw;
  line-height: 1.5em;
  font-weight: 400;
  margin-bottom: 1vw
}

@media screen and (max-width: 750px) {
  .SnsWrap .inner p {
    font-size: 4.5vw;
    margin-bottom: 3vw;
    /* -webkit-text-stroke-width: 1vw */
  }
}

.SnsWrap .inner p b {
  font-family: "Noto Sans JP", sans-serif;
  position: absolute;
  display: none;
  -webkit-text-stroke-width: 0;
  z-index: 20;
  color: #d70161;
  font-weight: 400
}

.SnsWrap .inner p.red {
  color: #e6002d
}

.SnsWrap .inner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.SnsWrap .inner ul li {
  width: 25%
}

@media screen and (max-width: 750px) {
  .SnsWrap .inner ul li {
    width: 20%
  }
}

.SnsWrap .inner ul li a {
  height: 100%
}

@media screen and (min-width: 1025px) {
  .onlyPC {
    display: block
  }
}

@media screen and (max-width: 1024px) {
  .onlyPC {
    display: none
  }
}

@media screen and (max-width: 750px) {
  .onlyPC {
    display: none
  }
}

@media screen and (min-width: 1025px) {
  .onlyTB {
    display: none
  }
}

@media screen and (max-width: 1024px) {
  .onlyTB {
    display: block
  }
}

@media screen and (max-width: 750px) {
  .onlyTB {
    display: none
  }
}

@media screen and (min-width: 1025px) {
  .onlySP {
    display: none
  }
}

@media screen and (max-width: 1024px) {
  .onlySP {
    display: none
  }
}

@media screen and (max-width: 750px) {
  .onlySP {
    display: block
  }
}

@media screen and (min-width: 1025px) {
  .onlyPCTB {
    display: block
  }
}

@media screen and (max-width: 1024px) {
  .onlyPCTB {
    display: block
  }
}

@media screen and (max-width: 750px) {
  .onlyPCTB {
    display: none
  }
}

@media screen and (min-width: 1025px) {
  .onlyPCSP {
    display: block
  }
}

@media screen and (max-width: 1024px) {
  .onlyPCSP {
    display: none
  }
}

@media screen and (max-width: 750px) {
  .onlyPCSP {
    display: block
  }
}

@media screen and (min-width: 1025px) {
  .onlyTBSP {
    display: none
  }
}

@media screen and (max-width: 1024px) {
  .onlyTBSP {
    display: block
  }
}

@media screen and (max-width: 750px) {
  .onlyTBSP {
    display: block
  }
}

@media screen and (min-width: 1025px) {
  .onlyPC-il {
    display: inline
  }
}

@media screen and (max-width: 1024px) {
  .onlyPC-il {
    display: none
  }
}

@media screen and (max-width: 750px) {
  .onlyPC-il {
    display: none
  }
}

@media screen and (min-width: 1025px) {
  .onlyTB-il {
    display: none
  }
}

@media screen and (max-width: 1024px) {
  .onlyTB-il {
    display: inline
  }
}

@media screen and (max-width: 750px) {
  .onlyTB-il {
    display: none
  }
}

@media screen and (min-width: 1025px) {
  .onlySP-il {
    display: none
  }
}

@media screen and (max-width: 1024px) {
  .onlySP-il {
    display: none
  }
}

@media screen and (max-width: 750px) {
  .onlySP-il {
    display: inline
  }
}

@media screen and (min-width: 1025px) {
  .onlyPCTB-il {
    display: inline
  }
}

@media screen and (max-width: 1024px) {
  .onlyPCTB-il {
    display: inline
  }
}

@media screen and (max-width: 750px) {
  .onlyPCTB-il {
    display: none
  }
}

@media screen and (min-width: 1025px) {
  .onlyPCSP-il {
    display: inline
  }
}

@media screen and (max-width: 1024px) {
  .onlyPCSP-il {
    display: none
  }
}

@media screen and (max-width: 750px) {
  .onlyPCSP-il {
    display: inline
  }
}

@media screen and (min-width: 1025px) {
  .onlyTBSP-il {
    display: none
  }
}

@media screen and (max-width: 1024px) {
  .onlyTBSP-il {
    display: inline
  }
}

@media screen and (max-width: 750px) {
  .onlyTBSP-il {
    display: inline
  }
}

@keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%)
  }

  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%)
  }

  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%)
  }

  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%)
  }

  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%)
  }

  100% {
    transform: scale(1, 1) translate(0%, 0%)
  }
}

article#menu-page {
  top: 0
}

article#menu-page section.rpMenu {
  width: 100%;
  margin: auto
}

article#menu-page section.rpMenu .upper {
  width: 100%;
  padding: 15vw 6vw 0 6vw;
  position: relative
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper {
    padding: 25vw 4vw 0 4vw
  }
}

article#menu-page section.rpMenu .upper .menuBack {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  height: 100%
}

article#menu-page section.rpMenu .upper .menuBack .image {
  width: 100%;
  height: 100%
}

article#menu-page section.rpMenu .upper .menuBack .image img {
  height: 100%;
  object-fit: cover;
  opacity: 0.2
}

article#menu-page section.rpMenu .upper .menuBack .grd {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 7vw;
  z-index: 1;
  background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%)
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .menuBack .grd {
    height: 14vw
  }
}

article#menu-page section.rpMenu .upper .titleTx {
  border-bottom: 0.3vw solid #e6002d;
  margin-bottom: 2vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .titleTx {
    border-bottom: 0.6vw solid #e6002d
  }
}

article#menu-page section.rpMenu .upper .titleTx p.sub {
  font-size: 1.5vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .titleTx p.sub {
    font-size: 4vw
  }
}

article#menu-page section.rpMenu .upper .titleTx p.main {
  font-size: 2.3vw;
  font-weight: 700;
  color: #e6002d;
  border-bottom: 0.2vw solid #e6002d;
  margin-bottom: 0.2vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .titleTx p.main {
    font-size: 5vw;
    border-bottom: 0.4vw solid #e6002d;
    margin-bottom: 0.4vw
  }
}

article#menu-page section.rpMenu .upper p.lead {
  font-size: 1.7vw;
  font-weight: 400;
  word-break: break-word;
  margin-bottom: 1vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper p.lead {
    font-size: 3.5vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 5vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap {
    display: block;
    margin-top: 3vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap .vis {
  width: 64%;
  border-radius: 1vw;
  overflow: hidden
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .vis {
    border-radius: 2vw;
    width: 100%
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material {
  width: 34%
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material {
    width: 100%;
    margin-top: 3vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material ul {
  margin-bottom: 3vw
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.1vw dotted #000;
  margin-bottom: 0.8vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material ul li {
    margin-bottom: 3vw;
    border-bottom: 0.3vw dotted #000
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li p.lt {
  font-size: 1.1vw;
  font-weight: 500;
  flex: 1
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material ul li p.lt {
    font-size: 4vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li p.rt {
  font-size: 1.1vw;
  font-weight: 500;
  text-align: right;
  word-break: break-all
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material ul li p.rt {
    font-size: 4vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li.bolds p.lt {
  color: #e6002d;
  font-weight: 700
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li.bolds p.rt {
  color: #e6002d;
  font-weight: 700
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li.thins p.lt {
  color: #777
}

article#menu-page section.rpMenu .upper .mainWrap .material ul li.thins p.rt {
  color: #777
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material ul {
    margin-bottom: 10vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material ul:last-of-type {
  margin-bottom: 0
}

article#menu-page section.rpMenu .upper .mainWrap .material .subTitle {
  font-size: 1.3vw;
  font-weight: 700;
  margin-bottom: 0.5vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material .subTitle {
    font-size: 4vw;
    margin-bottom: 2vw
  }
}

article#menu-page section.rpMenu .upper .mainWrap .material .subTitle2 {
  font-size: 1.3vw;
  font-weight: 700;
  margin-bottom: 0.5vw;
  margin-top: 1vw;
  border-bottom: 0.1vw dotted #000
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .upper .mainWrap .material .subTitle2 {
    font-size: 4vw;
    margin-bottom: 2vw
  }
}

article#menu-page section.rpMenu .process {
  width: 80%;
  margin: auto
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process {
    width: 92%
  }
}

article#menu-page section.rpMenu .process ul {
  margin-bottom: 3vw
}

article#menu-page section.rpMenu .process ul li {
  display: flex;
  align-items: center;
  margin-bottom: 3vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process ul li {
    align-items: flex-start;
    margin-bottom: 6vw
  }
}

article#menu-page section.rpMenu .process ul li:last-of-type {
  margin-bottom: 0
}

article#menu-page section.rpMenu .process ul li .num {
  background-color: #e6002d;
  aspect-ratio: 1;
  width: 4.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F7F28B;
  font-size: 2vw;
  font-weight: 600;
  border-radius: 100%;
  margin-right: 1vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process ul li .num {
    width: 9vw;
    margin-right: 3vw;
    font-size: 4.5vw
  }
}

article#menu-page section.rpMenu .process ul li p {
  font-size: 1.5vw;
  line-height: 1.7em;
  flex: 1
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process ul li p {
    font-size: 4vw
  }
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process ul {
    margin-bottom: 6vw
  }
}

article#menu-page section.rpMenu .process ul:last-of-type {
  margin-bottom: 0
}

article#menu-page section.rpMenu .process .subTitle {
  font-size: 1.3vw;
  font-weight: 700;
  border-bottom: 0.4vw double #e6002d;
  color: #e6002d;
  margin-bottom: 1vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process .subTitle {
    font-size: 4vw;
    text-align: center;
    border-bottom: 1.5vw double #e6002d;
    margin-bottom: 3vw
  }
}

article#menu-page section.rpMenu .process .contTitle {
  margin-bottom: 2vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .process .contTitle {
    margin-bottom: 5vw
  }
}

article#menu-page section.rpMenu .contTitle {
  background-color: #e6002d;
  color: #F7F28B;
  height: 4vw;
  margin-bottom: 1vw;
  display: flex;
  align-items: center;
  padding: 0 2vw;
  font-size: 1.5vw;
  font-weight: 500;
  border-radius: 5vw
}

@media screen and (max-width: 750px) {
  article#menu-page section.rpMenu .contTitle {
    font-size: 4vw;
    height: 10vw;
    padding: 0 4vw;
    margin-bottom: 3vw
  }
}

article#menu-page section.rpMenu .contTitle span,
article#menu-page section.rpMenu .contTitle .menu-btn span:before,
.menu-btn article#menu-page section.rpMenu .contTitle span:before,
article#menu-page section.rpMenu .contTitle .menu-btn span:after,
.menu-btn article#menu-page section.rpMenu .contTitle span:after {
  font-size: 1.2vw
}

@media screen and (max-width: 750px) {

  article#menu-page section.rpMenu .contTitle span,
  article#menu-page section.rpMenu .contTitle .menu-btn span:before,
  .menu-btn article#menu-page section.rpMenu .contTitle span:before,
  article#menu-page section.rpMenu .contTitle .menu-btn span:after,
  .menu-btn article#menu-page section.rpMenu .contTitle span:after {
    font-size: 3vw
  }
}

section.rpTop {
  display: flex;
  flex-wrap: wrap;
  width: 98.5%;
  margin-left: 1.5%;
  justify-content: space-between;
  align-items: center
}

@media screen and (max-width: 750px) {
  section.rpTop {
    flex-flow: column;
    width: 92%;
    margin: auto
  }
}

section.rpTop ul.btWrap {
  width: 55%
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap {
    order: 2;
    width: 100%
  }
}

section.rpTop ul.btWrap li:nth-child(2n) {
  width: 70%;
  margin-left: 30%
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li:nth-child(2n) {
    width: 100%;
    margin-left: 0
  }

  section.rpTop ul.btWrap li:nth-child(2n) .image {
    order: 2;
    margin-left: 2vw
  }

  section.rpTop ul.btWrap li:nth-child(2n) .descript {
    order: 1;
    text-align: right
  }

  section.rpTop ul.btWrap li:nth-child(2n) .descript .rpSub {
    text-align: right
  }

  section.rpTop ul.btWrap li:nth-child(2n).other {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
  }
}

section.rpTop ul.btWrap li:nth-child(2n+1) {
  width: 100%
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li:nth-child(2n+1) {
    width: 100%
  }

  section.rpTop ul.btWrap li:nth-child(2n+1) .image {
    order: 1;
    margin-right: 2vw
  }

  section.rpTop ul.btWrap li:nth-child(2n+1) .descript {
    order: 2
  }

  section.rpTop ul.btWrap li:nth-child(2n+1).other {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
  }
}

section.rpTop ul.btWrap li:nth-child(n+2) {
  margin-top: -2vw
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li:nth-child(n+2) {
    margin-top: -7vw
  }
}

section.rpTop ul.btWrap li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #000
}

section.rpTop ul.btWrap li a .image {
  width: 14.6vw;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 100%;
  margin-right: 1vw;
  -webkit-box-shadow: 0.7vw 0.7vw 0.7vw #000;
  box-shadow: 0.5vw 0.5vw 1.5vw rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center
}

section.rpTop ul.btWrap li a .image img {
  object-fit: cover;
  height: 100%
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li a .image {
    width: 38vw
  }
}

section.rpTop ul.btWrap li a .descript {
  flex: 1
}

section.rpTop ul.btWrap li a .descript .rpSub {
  font-size: 1vw;
  font-weight: 400
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li a .descript .rpSub {
    font-size: 2.5vw
  }
}

section.rpTop ul.btWrap li a .descript .rpName {
  font-size: 1.7vw;
  font-weight: 700;
  color: #e6002d
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li a .descript .rpName {
    font-size: 4.5vw
  }
}

section.rpTop ul.btWrap li.other a {
  background-color: #e6002d;
  aspect-ratio: 1;
  width: 14.6vw;
  border-radius: 100%;
  padding: 0.5vw;
  -webkit-box-shadow: 0.7vw 0.7vw 0.7vw #000;
  box-shadow: 0.5vw 0.5vw 1.5vw rgba(0, 0, 0, 0.5)
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li.other a {
    width: 38vw;
    padding: 1.3vw
  }
}

section.rpTop ul.btWrap li.other a .inner {
  width: 100%;
  border: 0.2vw solid #fff;
  border-radius: 100%;
  aspect-ratio: 1;
  position: relative
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li.other a .inner {
    border: 0.3vw solid #fff
  }
}

section.rpTop ul.btWrap li.other a .inner .texts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}

section.rpTop ul.btWrap li.other a .inner .texts .btMain {
  color: #fff;
  text-align: center;
  font-size: 1.4vw;
  font-weight: 700
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li.other a .inner .texts .btMain {
    font-size: 3.7vw
  }
}

section.rpTop ul.btWrap li.other a .inner .texts .btSub {
  color: #fff;
  text-align: center;
  font-size: 1.3vw;
  font-weight: 500
}

@media screen and (max-width: 750px) {
  section.rpTop ul.btWrap li.other a .inner .texts .btSub {
    font-size: 3.3vw
  }
}

section.rpTop .logoWrap {
  width: 42%;
  border-top-left-radius: 1vw;
  border-bottom-left-radius: 1vw;
  overflow: hidden
}

@media screen and (max-width: 750px) {
  section.rpTop .logoWrap {
    width: 100%;
    order: 1;
    border-radius: 3vw;
    margin-bottom: 10vw
  }
}

section.rpTop .logoWrap .logoSect {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 2.5vw 0
}

@media screen and (max-width: 750px) {
  section.rpTop .logoWrap .logoSect {
    padding: 5vw 0
  }
}

section.rpTop .logoWrap .logoSect .logo1 {
  width: 16.5vw
}

@media screen and (max-width: 750px) {
  section.rpTop .logoWrap .logoSect .logo1 {
    width: 37vw
  }
}

section.rpTop .logoWrap .logoSect .logo2 {
  width: 12.5vw
}

@media screen and (max-width: 750px) {
  section.rpTop .logoWrap .logoSect .logo2 {
    width: 27vw
  }
}

section.rpTop .logoWrap .logoSect p {
  aspect-ratio: 1;
  width: 5vw;
  margin: 0 1vw;
  display: block;
  position: relative
}

@media screen and (max-width: 750px) {
  section.rpTop .logoWrap .logoSect p {
    width: 12vw;
    margin: 0 2vw
  }
}

section.rpTop .logoWrap .logoSect p::after,
section.rpTop .logoWrap .logoSect p::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.1vw;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0
}

@media screen and (max-width: 750px) {

  section.rpTop .logoWrap .logoSect p::after,
  section.rpTop .logoWrap .logoSect p::before {
    height: 0.3vw
  }
}

section.rpTop .logoWrap .logoSect p::after {
  transform: rotate(-45deg)
}

section.rpTop .logoWrap .logoSect p::before {
  transform: rotate(45deg)
}

section.rpTop .logoWrap p.lead {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 1.5vw 0;
  text-align: center;
  font-size: 1.7vw;
  font-weight: 600
}

@media screen and (max-width: 750px) {
  section.rpTop .logoWrap p.lead {
    font-size: 4vw;
    padding: 3vw 0
  }
}

section.rpList {
  width: 88%;
  margin: auto;
  /* padding-top: 5vw */
}

@media screen and (max-width: 750px) {
  section.rpList {
    width: 92%
  }
}

section.rpList .titleTx {
  border-bottom: 0.3vw solid #e6002d;
  margin-bottom: 2vw
}

@media screen and (max-width: 750px) {
  section.rpList .titleTx {
    border-bottom: 0.6vw solid #e6002d;
    margin-bottom: 4vw
  }
}

section.rpList .titleTx p {
  font-size: 2.3vw;
  font-weight: 700;
  color: #e6002d;
  border-bottom: 0.2vw solid #e6002d;
  margin-bottom: 0.2vw
}

@media screen and (max-width: 750px) {
  section.rpList .titleTx p {
    font-size: 6vw;
    border-bottom: 0.4vw solid #e6002d;
    margin-bottom: 0.4vw;
    text-align: center
  }
}

section.rpList ul.rpListWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap {
    display: block
  }
}

section.rpList ul.rpListWrap li {
  width: 48%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 5vw;
  align-items: flex-start
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li {
    width: 100%
  }
}

section.rpList ul.rpListWrap li:nth-child(-n+2) {
  margin-top: 0
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li:nth-child(-n+2) {
    margin-top: 15vw
  }
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li {
    margin-top: 15vw;
    display: block
  }

  section.rpList ul.rpListWrap li:first-of-type {
    margin-top: 0
  }
}

section.rpList ul.rpListWrap li .image {
  width: 48.5%;
  overflow: hidden;
  border-radius: 0.7vw;
  -webkit-box-shadow: 0.4vw 0.4vw 0.5vw rgba(0, 0, 0, 0.3);
  box-shadow: 0.4vw 0.4vw 0.5vw rgba(0, 0, 0, 0.3)
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .image {
    width: 100%;
    border-radius: 2vw
  }
}

section.rpList ul.rpListWrap li .descript {
  width: 48%
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript {
    width: 100%;
    margin-top: 3vw
  }
}

section.rpList ul.rpListWrap li .descript .rpSub {
  font-size: 1vw;
  font-weight: 400
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript .rpSub {
    font-size: 4vw;
    text-align: center
  }
}

section.rpList ul.rpListWrap li .descript .rpName {
  font-size: 1.5vw;
  font-weight: 600;
  line-height: 1.3em;
  color: #e6002d;
  margin-bottom: 0.5vw
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript .rpName {
    font-size: 5.5vw;
    text-align: center
  }
}

section.rpList ul.rpListWrap li .descript .rpBody {
  font-size: 1.1vw;
  font-weight: 400;
  word-break: break-all;
  line-height: 1.3em
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript .rpBody {
    font-size: 4.5vw;
    text-align: center
  }
}

section.rpList ul.rpListWrap li .descript .bt {
  width: 100%;
  display: flex;
  justify-content: flex-end
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript .bt {
    justify-content: center
  }
}

section.rpList ul.rpListWrap li .descript .bt a {
  display: flex;
  width: 53%;
  background-color: #e6002d;
  color: #F7F28B;
  text-decoration: none;
  height: 2.5vw;
  justify-content: center;
  align-items: center;
  font-size: 1.1vw;
  font-weight: 500;
  border-radius: 0.5vw;
  margin-top: 1vw;
  line-height: 1em
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript .bt a {
    font-size: 4.5vw;
    height: 12vw;
    border-radius: 2.5vw;
    margin-top: 4vw
  }
}

section.rpList ul.rpListWrap li .descript .bt a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3vw 0 0.3vw 0.5vw;
  border-color: transparent transparent transparent #F7F28B;
  margin-right: 0.2em
}

@media screen and (max-width: 750px) {
  section.rpList ul.rpListWrap li .descript .bt a::before {
    border-width: 1.5vw 0 1.5vw 2vw
  }
}


/*# sourceMappingURL=recipe.css.map*/