@font-face {
  font-family: yusei;
  src: url(../font/YuseiMagic-Regular.ttf) format(truetype);
}
@keyframes jelly {
  0%, 100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
html, body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

main {
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  main {
    font-size: 14px;
  }
}
main .fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
main .fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}
main .page-top {
  display: none !important;
}
main .common-header {
  position: relative;
}
main * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
main *:hover {
  text-decoration: none !important;
}
main a {
  transition: 0.3s;
}
main html, main body, main div, main span, main object, main iframe, main h1, main h2, main h3, main h4, main h5, main h6, main p, main blockquote, main pre, main abbr, main address, main cite, main code, main del, main dfn, main em, main img, main ins, main kbd, main q, main samp, main strong, main sub, main sup, main var, main b, main i, main dl, main dt, main dd, main ol, main ul, main li, main fieldset, main form, main label, main legend, main table, main caption, main tbody, main tfoot, main thead, main tr, main th, main td, main article, main aside, main canvas, main details, main figcaption, main figure, main footer, main header, main hgroup, main menu, main nav, main section, main main, main summary, main time, main mark, main audio, main video, main a, main input, main textarea {
  box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
}
main img {
  max-width: 100%;
}
main .header {
  background: url(../img/bg_hero.svg) center no-repeat;
  position: relative;
}
main .header::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(-5deg);
  position: absolute;
  height: 400px;
  left: -30%;
  top: 20%;
  z-index: -1;
  background: rgba(255, 222, 180, 0.3);
}
main .header .inner {
  position: relative;
  padding: 0 20px;
  max-width: 1220px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .header .inner .left_area {
  margin-top: 150px;
}
@media screen and (max-width: 768px) {
  main .header .inner .left_area {
    width: 45%;
    margin-top: 0;
    padding: 20px 0;
  }
  main .header .inner .left_area .head_copy {
    width: 150px;
  }
}
main .header .inner .left_area .item_set {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  main .header .inner .left_area .item_set {
    gap: 10px;
  }
  main .header .inner .left_area .item_set img {
    width: 70px;
  }
}
main .header .inner .right_area {
  margin-left: -100px;
}
@media screen and (max-width: 768px) {
  main .header .inner .right_area {
    width: 60%;
    margin-left: -10px;
  }
}
main nav {
  margin-top: 40px;
  padding: 0 20px;
}
@media screen and (max-width: 768px) {
  main nav {
    margin-top: 20px;
    padding: 0 10px;
  }
}
main nav ul {
  margin: 0 auto;
  max-width: 1220px;
  padding: 30px 20px;
  background: #EF0B79;
  border-radius: 80px;
  display: flex;
  justify-content: center;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  main nav ul {
    padding: 5px;
    flex-wrap: wrap;
    gap: 5px;
    border-radius: 20px;
  }
}
main nav ul li {
  list-style: none;
}
@media screen and (max-width: 768px) {
  main nav ul li {
    width: 32%;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
  }
}
main nav ul li a {
  text-decoration: none;
  display: block;
  line-height: 1;
  color: #fff !important;
  font-size: 20px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  main nav ul li a {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 14px;
  }
}
main nav ul li a:hover {
  animation: jelly 0.6s ease;
}
main .area01 {
  background: url(../img/bg_area01.svg) top center no-repeat;
  position: relative;
}
main .area01::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(5deg);
  position: absolute;
  height: 500px;
  left: -30%;
  top: 20%;
  z-index: -1;
  background: rgba(235, 215, 244, 0.5);
}
@media screen and (max-width: 768px) {
  main .area01::after {
    top: inherit;
    bottom: 0;
    background: #E4CFFF;
  }
}
main .area01 .head_area {
  text-align: center;
}
main .area01 .head_area .eng_title {
  font-family: yusei;
  font-size: 30px;
  color: #fff;
  background: url(../img/bg_title_block_en01.svg) left center no-repeat;
  background-size: contain;
  max-width: 182px;
  height: 44px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin: 0 auto -20px;
  padding-right: 350px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area01 .head_area .eng_title {
    margin: 0 auto -50px;
    padding-right: 220px;
    font-size: 16px;
    width: 90px;
    background-size: 30%;
  }
}
main .area01 .head_area h2 {
  font-family: yusei;
  font-size: 60px;
  color: #fff;
  background: url(../img/bg_title_block_01.svg) center no-repeat;
  font-weight: normal;
  background-size: cover;
  max-width: 400px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
@media screen and (max-width: 768px) {
  main .area01 .head_area h2 {
    font-size: 20px;
    max-width: 170px;
    background-size: 100%;
  }
}
main .area01 .head_area p {
  text-align: center;
  font-weight: bold;
  color: #9A5EE5;
  margin-top: 20px;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  main .area01 .head_area p {
    margin: 0;
    font-size: 14px;
  }
}
main .area01 .item_area {
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  main .area01 .item_area {
    margin-top: 20px;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
}
main .area01 .item_area .itembox {
  width: 30%;
  border: solid 10px #F81F8D;
  padding: 20px 20px 40px;
  text-align: center;
  background: #fff;
}
@media screen and (max-width: 768px) {
  main .area01 .item_area .itembox {
    width: auto;
    padding: 15px;
    letter-spacing: -0.1em;
    border: solid 5px #F81F8D;
  }
  main .area01 .item_area .itembox .photo_area img {
    width: 50%;
  }
}
main .area01 .item_area .itembox h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  main .area01 .item_area .itembox h3 {
    font-size: 16px;
    margin-top: 0;
  }
  main .area01 .item_area .itembox h3 br {
    display: none;
  }
}
main .area01 .item_area .itembox p {
  margin-top: 20px;
  text-align: left;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  main .area01 .item_area .itembox p {
    margin-top: 10px;
  }
}
main .area01 .item_area .itembox a {
  max-width: 60%;
  display: block;
  margin: 20px auto 0;
  background: #F81F8D;
  border: solid 2px #F81F8D;
  color: #fff;
  font-weight: bold;
  border-radius: 40px;
  line-height: 1;
  font-size: 16px;
  padding: 15px 20px;
}
@media screen and (max-width: 768px) {
  main .area01 .item_area .itembox a {
    margin: 10px auto 0;
    white-space: nowrap;
    width: auto !important;
  }
}
main .area01 .item_area .itembox a:hover {
  color: #F81F8D;
  background: #fff;
}
main .area01 .item_area .itembox:last-child {
  border: solid 10px #5186C8;
}
@media screen and (max-width: 768px) {
  main .area01 .item_area .itembox:last-child {
    border: solid 5px #5186C8;
  }
}
main .area02 {
  background: url(../img/bg_area02.svg) top center no-repeat;
  padding: 0 0 40px;
  position: relative;
}
main .area02::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(-5deg);
  position: absolute;
  height: 800px;
  left: -30%;
  top: 10%;
  z-index: -1;
  background: rgba(255, 222, 180, 0.5);
}
main .area02 .head_area {
  text-align: center;
}
main .area02 .head_area .eng_title {
  font-family: yusei;
  font-size: 30px;
  color: #fff;
  background: url(../img/bg_title_block_en02.svg) left center no-repeat;
  background-size: contain;
  max-width: 182px;
  height: 44px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin: 0 auto -20px;
  padding-right: 350px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area02 .head_area .eng_title {
    margin: 0 auto -50px;
    padding-right: 220px;
    font-size: 16px;
    width: 90px;
    background-size: 30%;
  }
}
main .area02 .head_area h2 {
  font-family: yusei;
  font-size: 60px;
  color: #fff;
  background: url(../img/bg_title_block_02.svg) center no-repeat;
  font-weight: normal;
  background-size: cover;
  max-width: 400px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
@media screen and (max-width: 768px) {
  main .area02 .head_area h2 {
    font-size: 20px;
    max-width: 170px;
    background-size: 100%;
  }
}
main .area02 .head_area p {
  text-align: center;
  font-weight: bold;
  color: #D26600;
  margin-top: 20px;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  main .area02 .head_area p {
    margin-top: 0;
    font-size: 14px;
  }
  main .area02 .head_area p br {
    display: none;
  }
}
main .area02 .item_area {
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area {
    margin: 20px auto;
    gap: 20px;
  }
}
main .area02 .item_area .itembox {
  width: 40%;
  border: solid 3px #F81F8D;
  padding: 20px 40px 40px;
  text-align: center;
  background: #fff;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox {
    padding: 20px;
    width: auto;
  }
  main .area02 .item_area .itembox .photo_area img {
    width: 50%;
  }
}
main .area02 .item_area .itembox:nth-child(2) {
  border: solid 3px #5186C8;
}
main .area02 .item_area .itembox:nth-child(2) .use_case {
  border-radius: 10px;
  padding: 20px;
  border: dashed 2px #7DB7FF;
  background: rgba(81, 134, 200, 0.05);
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox:nth-child(2) .use_case {
    padding: 10px;
  }
}
main .area02 .item_area .itembox:nth-child(2) .use_case h4 {
  text-align: center;
  color: #5186C8;
  font-size: 20px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox:nth-child(2) .use_case h4 {
    font-size: 16px;
  }
}
main .area02 .item_area .itembox h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox h3 {
    font-size: 16px;
    margin-top: 0;
  }
}
main .area02 .item_area .itembox p {
  margin-top: 20px;
  text-align: left;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox p {
    margin-top: 10px;
  }
}
main .area02 .item_area .itembox .use_case {
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  border: dashed 2px #FFA0A8;
  background: rgba(255, 72, 87, 0.05);
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox .use_case {
    padding: 10px;
  }
}
main .area02 .item_area .itembox .use_case h4 {
  text-align: center;
  color: #FF4857;
  font-size: 20px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox .use_case h4 {
    font-size: 16px;
  }
}
main .area02 .item_area .itembox .use_case p {
  margin: 10px 0 0;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  main .area02 .item_area .itembox .use_case p {
    font-size: 12px;
  }
}
main .area02 .item_area .banner_area {
  text-align: center;
}
main .area02 .item_area .banner_area p {
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #FF6B35;
  padding: 12px 24px;
  border-radius: 20px;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: 0 3px 8px rgba(255, 107, 53, 0.3);
  margin-bottom: 20px;
}
main .area02 .item_area .banner_area p::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 12px 10px 0 10px;
  border-style: solid;
  border-color: #FF6B35 transparent transparent transparent;
}
main .margin_photo img {
  display: block;
  margin: 0 auto;
}
main .area03 {
  background: url(../img/bg_area03.svg) top center no-repeat;
  padding: 0 0 40px;
  position: relative;
}
main .area03::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(5deg);
  position: absolute;
  height: 900px;
  left: -30%;
  top: 15%;
  z-index: -1;
  background: rgba(217, 244, 215, 0.5);
}
main .area03 .head_area {
  text-align: center;
  margin-bottom: 130px;
}
@media screen and (max-width: 768px) {
  main .area03 .head_area {
    margin-bottom: 70px;
  }
}
main .area03 .head_area .eng_title {
  font-family: yusei;
  font-size: 30px;
  color: #fff;
  background: url(../img/bg_title_block_en03.svg) left center no-repeat;
  background-size: contain;
  max-width: 130px;
  height: 44px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin: 0 auto -10px;
  padding-right: 470px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area03 .head_area .eng_title {
    margin: 0 auto -35px;
    padding-right: 220px;
    font-size: 16px;
    width: 90px;
    background-size: 30%;
  }
}
main .area03 .head_area h2 {
  font-family: yusei;
  font-size: 60px;
  color: #fff;
  background: url(../img/bg_title_block_03.svg) center no-repeat;
  font-weight: normal;
  background-size: cover;
  max-width: 680px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
@media screen and (max-width: 768px) {
  main .area03 .head_area h2 {
    font-size: 20px;
    max-width: 250px;
    background-size: 100%;
  }
}
main .area03 .head_area p {
  text-align: center;
  font-weight: bold;
  color: #43AF3D;
  margin-top: 20px;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  main .area03 .head_area p {
    margin-top: 0;
    font-size: 16px;
  }
}
main .area03 .item_area {
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area {
    gap: 20px;
  }
}
main .area03 .item_area .itembox {
  width: 40%;
  border: solid 3px #F81F8D;
  padding: 20px 40px 40px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox {
    width: auto;
    padding: 20px 15px;
  }
}
main .area03 .item_area .itembox .head_area {
  margin: -130px 0 30px;
  position: relative;
  display: flex;
  align-items: end;
  gap: 20px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox .head_area {
    margin: -80px 0 20px;
    gap: 5px;
  }
}
main .area03 .item_area .itembox .head_area h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 13px;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox .head_area h3 {
    font-size: 14px;
  }
}
main .area03 .item_area .itembox .head_area img {
  display: block;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox .head_area img {
    width: 30%;
  }
}
main .area03 .item_area .itembox .head_area::after {
  content: "";
  display: block;
  width: 100%;
  height: 60px;
  background: #F81F8D;
  position: absolute;
  bottom: 0;
  left: 0;
}
main .area03 .item_area .itembox:nth-child(2) {
  border: solid 3px #5186C8;
}
main .area03 .item_area .itembox:nth-child(2) .head_area::after {
  background: #5186C8;
}
main .area03 .item_area .itembox:nth-child(2) .use_case {
  border-radius: 10px;
  padding: 20px;
  border: dashed 2px #7DB7FF;
  background: rgba(81, 134, 200, 0.05);
}
main .area03 .item_area .itembox:nth-child(2) .use_case h4 {
  text-align: center;
  color: #5186C8;
  font-size: 20px;
  line-height: 1;
}
main .area03 .item_area .itembox ol li {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox ol li {
    margin-bottom: 10px;
    gap: 10px;
  }
}
main .area03 .item_area .itembox ol li span {
  background: #FFD726;
  color: #333;
  font-weight: bold;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
main .area03 .item_area .itembox ol li p {
  margin: 3px 0 0;
  line-height: 1.5;
}
main .area03 .item_area .itembox ol li p strong {
  display: block;
}
main .area03 .item_area .itembox p {
  margin-top: 20px;
  text-align: left;
  line-height: 1.8;
}
main .area03 .item_area .itembox .point {
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  border: dashed 2px #FFA0A8;
  background: #FFFAE6;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox .point {
    padding: 20px 10px;
  }
}
main .area03 .item_area .itembox .point h4 {
  text-align: center;
  color: #FF4857;
  font-size: 20px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  main .area03 .item_area .itembox .point h4 {
    font-size: 16px;
  }
}
main .area03 .item_area .itembox .point ul li {
  color: #333;
  padding-left: 40px;
  background: url(../img/icon_point1.svg) left top no-repeat;
  margin-top: 20px;
}
main .area03 .item_area .itembox .point ul li strong {
  display: block;
  margin-bottom: 5px;
}
main .area03 .item_area .itembox:last-child .point {
  border: dashed 2px #7DB7FF;
}
main .area03 .item_area .itembox:last-child .point h4 {
  color: #5186C8;
}
main .area03 .item_area .itembox:last-child .point ul li {
  background: url(../img/icon_point2.svg) left top no-repeat;
}
main .area04 {
  background: url(../img/bg_area04.svg) top center no-repeat;
  padding: 0 0 40px;
  position: relative;
}
main .area04::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(-5deg);
  position: absolute;
  height: 550px;
  left: -30%;
  top: 15%;
  z-index: -1;
  background: rgba(255, 222, 180, 0.5);
}
main .area04 .head_area {
  text-align: center;
  margin-bottom: 40px;
}
main .area04 .head_area .eng_title {
  font-family: yusei;
  font-size: 30px;
  color: #fff;
  background: url(../img/bg_title_block_en04.svg) left center no-repeat;
  background-size: contain;
  max-width: 130px;
  height: 44px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin: 0 auto -10px;
  padding-right: 470px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area04 .head_area .eng_title {
    margin: 0 auto -40px;
    padding-right: 220px;
    font-size: 16px;
    width: 90px;
    background-size: 30%;
  }
}
main .area04 .head_area h2 {
  font-family: yusei;
  font-size: 60px;
  color: #fff;
  background: url(../img/bg_title_block_04.svg) center no-repeat;
  font-weight: normal;
  background-size: cover;
  max-width: 550px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
@media screen and (max-width: 768px) {
  main .area04 .head_area h2 {
    font-size: 20px;
    max-width: 240px;
    background-size: 100%;
  }
}
main .area04 .head_area p {
  text-align: center;
  font-weight: bold;
  color: #C66000;
  margin-top: 20px;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  main .area04 .head_area p {
    margin-top: 0;
    font-size: 16px;
  }
}
main .area04 .recipe_list ul {
  max-width: 1220px;
  padding: 0 20px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  main .area04 .recipe_list ul {
    gap: 10px;
    justify-content: center;
  }
}
main .area04 .recipe_list ul li {
  align-items: end;
  border: solid 2px #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px #bbb;
}
main .area04 .recipe_list ul li:hover {
  border: solid 2px #FFB24D;
}
main .area04 .recipe_list ul li a {
  width: 260px;
  height: 210px;
  display: block;
  display: flex;
  position: relative;
  padding: 10px;
}
@media screen and (max-width: 768px) {
  main .area04 .recipe_list ul li a {
    width: 135px;
    height: 110px;
  }
}
main .area04 .recipe_list ul li a h3 {
  padding: 0 0 10px;
  color: #fff;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  text-align: center;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  main .area04 .recipe_list ul li a h3 {
    height: 100%;
    font-size: 13px;
  }
}
main .area04 .recipe_list ul li a div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.3s;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
main .area04 .recipe_list ul li a div img {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.3);
}
main .area04 .recipe_list ul li a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 80%);
  z-index: 1;
}
main .area04 .recipe_list ul li a:hover div {
  transform: scale(1.1);
}
main .area04 .recipe_list ul li a:hover h3 {
  text-decoration: none !important;
}
main .area04 .recipe_link {
  margin-top: 40px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  main .area04 .recipe_link {
    margin-top: 20px;
  }
}
main .area04 .recipe_link a {
  display: inline-block;
  background: #FF148A;
  border: solid 2px #FF148A;
  line-height: 1;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 40px;
  color: #fff;
  font-weight: bold;
  border-radius: 40px;
}
@media screen and (max-width: 768px) {
  main .area04 .recipe_link a {
    font-size: 16px;
    padding: 10px 40px;
  }
}
main .area04 .recipe_link a:hover {
  background: #fff;
  color: #FF148A;
}
main .area05 {
  background: url(../img/bg_area05.svg) top center no-repeat;
  padding: 0 0 40px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area05 {
    padding: 0;
  }
}
main .area05::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(5deg);
  position: absolute;
  height: 600px;
  left: -30%;
  top: 20%;
  z-index: -1;
  background: rgba(235, 215, 244, 0.5);
}
main .area05 .head_area {
  text-align: center;
  margin-bottom: 130px;
}
@media screen and (max-width: 768px) {
  main .area05 .head_area {
    margin-bottom: 50px;
  }
}
main .area05 .head_area .eng_title {
  font-family: yusei;
  font-size: 30px;
  color: #fff;
  background: url(../img/bg_title_block_en05.svg) left center no-repeat;
  background-size: contain;
  max-width: 130px;
  height: 44px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin: 0 auto -10px;
  padding-right: 470px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area05 .head_area .eng_title {
    margin: 0 auto -40px;
    padding-right: 220px;
    font-size: 16px;
    width: 90px;
    background-size: 30%;
  }
}
main .area05 .head_area h2 {
  font-family: yusei;
  font-size: 60px;
  color: #fff;
  background: url(../img/bg_title_block_05.svg) center no-repeat;
  font-weight: normal;
  background-size: cover;
  max-width: 550px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
@media screen and (max-width: 768px) {
  main .area05 .head_area h2 {
    font-size: 20px;
    max-width: 240px;
    background-size: 100%;
  }
}
main .area05 .item_area {
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area {
    margin-top: 0;
    display: block;
  }
}
main .area05 .item_area .itembox {
  width: 40%;
  border: solid 3px #F81F8D;
  padding: 20px 40px 40px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox {
    width: auto;
    padding: 20px;
  }
  main .area05 .item_area .itembox:first-child {
    margin-bottom: 80px;
  }
}
main .area05 .item_area .itembox .head_area {
  margin: -130px 0 30px;
  position: relative;
  display: flex;
  align-items: end;
  gap: 20px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .head_area {
    margin: -80px 0 30px;
  }
}
main .area05 .item_area .itembox .head_area h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 13px;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .head_area h3 {
    font-size: 16px;
  }
}
main .area05 .item_area .itembox .head_area img {
  display: block;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .head_area img {
    width: 50px;
  }
}
main .area05 .item_area .itembox .head_area::after {
  content: "";
  display: block;
  width: 100%;
  height: 60px;
  background: #F81F8D;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .head_area::after {
    height: 50px;
  }
}
main .area05 .item_area .itembox:nth-child(2) {
  border: solid 3px #5186C8;
}
main .area05 .item_area .itembox:nth-child(2) .head_area::after {
  background: #5186C8;
}
main .area05 .item_area .itembox:nth-child(2) .use_case {
  border-radius: 10px;
  padding: 20px;
  border: dashed 2px #7DB7FF;
  background: rgba(81, 134, 200, 0.05);
}
main .area05 .item_area .itembox:nth-child(2) .use_case h4 {
  text-align: center;
  color: #5186C8;
  font-size: 20px;
  line-height: 1;
}
main .area05 .item_area .itembox .photo_text, main .area05 .item_area .itembox .text_photo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .area05 .item_area .itembox .photo_text .photo_area, main .area05 .item_area .itembox .text_photo .photo_area {
  width: 180px;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .photo_text .photo_area, main .area05 .item_area .itembox .text_photo .photo_area {
    width: 160px;
  }
}
main .area05 .item_area .itembox .photo_text .text_area, main .area05 .item_area .itembox .text_photo .text_area {
  width: 280px;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .photo_text .text_area, main .area05 .item_area .itembox .text_photo .text_area {
    width: 240px;
  }
}
main .area05 .item_area .itembox .photo_text .text_area h4, main .area05 .item_area .itembox .text_photo .text_area h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .photo_text .text_area h4, main .area05 .item_area .itembox .text_photo .text_area h4 {
    font-size: 15px;
    margin-bottom: 5px;
  }
}
main .area05 .item_area .itembox .text_photo {
  margin-top: 40px;
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  main .area05 .item_area .itembox .text_photo {
    margin-top: 10px;
  }
}
main .area05 .item_area .itembox:last-child .point {
  border: dashed 2px #7DB7FF;
}
main .area05 .item_area .itembox:last-child .point h4 {
  color: #5186C8;
}
main .area05 .item_area .itembox:last-child .point ul li {
  background: url(../img/icon_point2.svg) left top no-repeat;
}
main .area06 {
  background: url(../img/bg_area06.svg) top center no-repeat;
  padding: 0 0 40px;
  position: relative;
}
main .area06::after {
  content: "";
  display: block;
  width: 200vw;
  transform: rotate(-5deg);
  position: absolute;
  height: 900px;
  left: -30%;
  top: 100px;
  z-index: -1;
  background: rgba(255, 237, 222, 0.5);
}
main .area06 .head_area {
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  main .area06 .head_area {
    margin-bottom: 20px;
  }
}
main .area06 .head_area .eng_title {
  font-family: yusei;
  font-size: 30px;
  color: #fff;
  background: url(../img/bg_title_block_en06.svg) left center no-repeat;
  background-size: contain;
  max-width: 110px;
  height: 44px;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin: 0 auto -10px;
  padding-right: 370px;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .area06 .head_area .eng_title {
    margin: 0 auto -40px;
    padding-right: 220px;
    font-size: 16px;
    width: 90px;
    background-size: 30%;
  }
}
main .area06 .head_area h2 {
  font-family: yusei;
  font-size: 60px;
  color: #fff;
  background: url(../img/bg_title_block_06.svg) center no-repeat;
  font-weight: normal;
  background-size: cover;
  max-width: 455px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
@media screen and (max-width: 768px) {
  main .area06 .head_area h2 {
    font-size: 20px;
    max-width: 240px;
    background-size: 100%;
  }
}
main .area06 .head_area p {
  text-align: center;
  font-weight: bold;
  color: #C66000;
  margin-top: 20px;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  main .area06 .head_area p {
    margin-top: 0;
    font-size: 16px;
  }
}
main .area06 .faq_list {
  max-width: 1020px;
  padding: 0 20px;
  margin: auto;
}
main .area06 .faq_list ul li {
  margin-top: 20px;
  border-radius: 10px;
  background: #fff;
  border: solid 2px #fff;
  padding: 30px;
  box-shadow: 0 0 15px #ccc;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li {
    padding: 15px;
  }
}
main .area06 .faq_list ul li.open {
  border: solid 3px #F58560;
  background: #FFFDF4;
}
main .area06 .faq_list ul li div span {
  display: block;
  border-radius: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li div span {
    margin-left: 0;
    font-size: 12px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
main .area06 .faq_list ul li div.q_area {
  display: flex;
  position: relative;
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li div.q_area {
    align-items: center;
  }
}
main .area06 .faq_list ul li div.q_area span {
  background: #F58560;
}
main .area06 .faq_list ul li div.q_area p {
  margin-top: 15px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li div.q_area p {
    margin: 0;
    width: 95%;
  }
}
main .area06 .faq_list ul li div.q_area::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-right: 3px solid #F58560;
  border-bottom: 3px solid #F58560;
  transition: transform 0.3s ease;
}
main .area06 .faq_list ul li div.a_area {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: dashed 2px #ccc;
  margin-top: 0;
  padding-top: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease, padding-top 0.4s ease;
}
main .area06 .faq_list ul li div.a_area span {
  background: #FFD726;
  color: #000;
  display: inline-block;
  border-radius: 40px;
  font-size: 20px;
  font-weight: bold;
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 60px;
  vertical-align: top;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li div.a_area span {
    margin-left: 0;
    font-size: 16px;
    width: 30px;
    height: 30px;
  }
}
main .area06 .faq_list ul li div.a_area div {
  max-width: 780px;
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li div.a_area div {
    margin-left: 0;
    margin-top: 10px;
  }
}
main .area06 .faq_list ul li div.a_area div img {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li div.a_area div img {
    margin-top: 20px;
  }
}
main .area06 .faq_list ul li.open .q_area::after {
  transform: translateY(-50%) rotate(225deg);
}
main .area06 .faq_list ul li.open .a_area {
  max-height: 2000px;
  opacity: 1;
  margin-top: 30px;
  padding-top: 30px;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_list ul li.open .a_area {
    margin-top: 15px;
    padding-top: 15px;
  }
}
main .area06 .faq_link {
  margin-top: 40px;
  text-align: center;
}
main .area06 .faq_link a {
  display: inline-block;
  background: #FF148A;
  border: solid 2px #FF148A;
  line-height: 1;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 40px;
  color: #fff;
  font-weight: bold;
  border-radius: 40px;
}
@media screen and (max-width: 768px) {
  main .area06 .faq_link a {
    font-size: 16px;
    padding: 10px 40px;
  }
}
main .area06 .faq_link a:hover {
  background: #fff;
  color: #FF148A;
}
main .illust_area01 .inner,
main .illust_area02 .inner,
main .illust_area03 .inner,
main .illust_area04 .inner,
main .illust_area05 .inner,
main .illust_area06 .inner {
  max-width: 1220px;
  padding: 0 20px;
  margin: 0 auto;
}
main .illust_area01 .inner img,
main .illust_area02 .inner img,
main .illust_area03 .inner img,
main .illust_area04 .inner img,
main .illust_area05 .inner img,
main .illust_area06 .inner img {
  display: block;
}
main .illust_area01 .inner {
  margin: 60px auto -70px;
}
@media screen and (max-width: 768px) {
  main .illust_area01 .inner {
    margin-top: 30px;
  }
}
main .illust_area01 .inner img {
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  main .illust_area01 .inner img {
    width: 30%;
  }
}
main .illust_area02 .inner {
  margin: 0 auto -50px;
}
main .illust_area03 .inner {
  margin: 0 auto -50px;
}
@media screen and (max-width: 768px) {
  main .illust_area03 .inner {
    margin: 0 auto;
  }
}
main .illust_area04 .inner {
  margin: 60px auto -80px;
}
@media screen and (max-width: 768px) {
  main .illust_area04 .inner {
    margin: 30px auto -40px;
  }
}
main .illust_area05 .inner {
  margin: 60px auto -80px;
}
@media screen and (max-width: 768px) {
  main .illust_area05 .inner {
    margin: 0 auto -20px;
  }
}
main .back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: #EF0B79;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 5px 20px rgba(239, 11, 121, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  main .back-to-top {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
  }
}
main .back-to-top svg {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 768px) {
  main .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}
main .back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
main .back-to-top:hover {
  background: #F81F8D;
  box-shadow: 0 8px 25px rgba(248, 31, 141, 0.5);
  transform: translateY(-3px);
}
main .back-to-top:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(248, 31, 141, 0.4);
}/*# sourceMappingURL=style.css.map */