@charset "utf-8";

:root {
  --font-ja: "Noto Sans JP", sans-serif;
  --text-primary: #441616;
  --c-primary: #660000;
  --c-primary2: #441616;
}

/*----------------------------------------------
  base
------------------------------------------------*/
html {
  font-size: 62.5%;
  font-family: var(--font-ja);
}

img {
  width: 100%;
  pointer-events: none;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../img/background.jpg) no-repeat center center / cover;
  background-color: rgba(255, 255, 255, 0.85);
  background-blend-mode: lighten;
}

body {
  color: var(--text-primary);
  font-size: 1.6rem;
  font-weight: 600;
}

section {
  text-align: center;
}

.ib {
  display: inline-block;

}

.h2-img,
.h2-pointimg {
  width: min(90vw, 54rem);
  padding: 18rem 0 0;
  margin: 0 auto 3rem;
}

@media screen and (max-width:900px) {
  .h2-pointimg {
    padding: 10rem 0 0;
  }

}

@media screen and (max-width:400px) {
  .h2-img {
    padding-top: calc(470 / 1024* 100vw);
    margin-bottom: calc(80 / 1024* 100vw);
  }

  .h2-pointimg {
    padding-top: calc(250 / 1024* 100vw);
  }
}

.inline-block {
  display: inline-block;
}



/*----------------------------------------------
  header
------------------------------------------------*/
.header_pc,
.header_sp {
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 100;
  width: 100%;
  background: var(--c-primary);
}

.header_pc {
  display: flex;
  height: 6.5rem;
  padding: 0 5rem;
}

.header_Logo img {
  width: min(50vw, 15rem);
}

.headerNav__list {
  display: flex;
  align-items: center;
}

.headerNav__list__item {
  position: relative;
  margin-right: 3rem;
  padding: 1rem 0;
  font-weight: 800;
}

.headerNav_list_sns {
  width: 5rem;
  margin-left: 1rem;
}

.headerNav__list__item::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  border-radius: 2rem;
  background: var(--c-primary2);
  transform: scale(0, 1);
  transition: .3s;
}

.headerNav__list__item:hover::after {
  transform: scale(1, 1);
}

.headerNav__list li a {
  color: #fff;
}

/*-header-sp-*/
.header_sp {
  display: none;
  padding: 0.5rem 1rem;
}

input[type="checkbox"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.header_hamburger {
  position: fixed;
  top: 5px;
  right: 15px;
  height: 3rem;
}

.header_hamburger_btn {
  display: flex;
  position: relative;
  top: 0;
  z-index: 100;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
}

.header_hamburger_btn span {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  content: "";
  width: 3rem;
  height: 0.4rem;
  margin: 0 auto;
  background-color: #fff;
  /* background-color: var(--c-primary2); */
  border-radius: 2rem;
}

.header_hamburger_btn span:nth-of-type(1) {
  top: 10px;
  transition: all 0.5s;
}

.header_hamburger_btn span:nth-of-type(2) {
  top: 20px;
  transition: all 0.2s;
}

.header_hamburger_btn span:nth-of-type(3) {
  top: 30px;
  transition: all 0.5s;
}

input[type="checkbox"]:checked+.header_hamburger_btn span:nth-of-type(1) {
  top: 40px;
  transform: rotate(45deg);
}

input[type="checkbox"]:checked+.header_hamburger_btn span:nth-of-type(2) {
  opacity: 0;
}

input[type="checkbox"]:checked+.header_hamburger_btn span:nth-of-type(3) {
  top: 40px;
  transform: rotate(-45deg);
}

.header_hamburger_nav {
  position: fixed;
  top: 0px;
  right: -120%;
  width: 100%;
  height: 100%;
  padding: 7.5rem 0 0;
  list-style: none;
  overflow-y: scroll;
  background: var(--c-primary);
  color: var(--text-primary);
  transition: all 0.5s;
  text-align: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.header_hamburger_nav::-webkit-scrollbar {
  display: none;
}

.hamburger_nav_item1 {
  width: 70vw;
  margin: 3rem auto;
  padding-bottom: 2rem;
  border-bottom: dotted 3px #C68E0C;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}

.hamburger_nav_item1:hover {
  opacity: 0.6;
}

input[type="checkbox"]:checked~.header_hamburger_nav {
  right: 0;
}

.headerNav_sns {
  width: 6rem;
  margin: 0 auto 10px;
}

.hamburger_nav_logo,
.hamburger_nav_copyright01 {
  width: 18rem;
  margin: 0 auto;
}

.hamburger_nav_bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 20px;
  color: #fff;
}

@media screen and (max-width:900px) {
  .header_pc {
    display: none;
  }

  .header_sp {
    display: block;
  }

  .about br {
    display: none;
  }
}

@media screen and (max-height:600px) {
  .hamburger_nav_bottom {
    position: relative;
    padding-top: 20px;
  }
}


/*----------------------------------------------
  mv
------------------------------------------------*/
.mv-inner {
  background-color: rgba(254, 175, 81, 0.1);
  background-blend-mode: multiply;
}

.mv-pc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85vw;
  max-width: 1920px;
  margin: 0 auto 60px;
  padding: 8rem 0 4rem 3rem;
}

.mv-sp {
  display: none;
}

.mv-pcleft {
  width: min(35vw, 50rem);
  padding: 5rem 0rem 5rem 0rem;
}

.mv-pcleft p {
  padding-block: 10px 20px;
  font-size: 3.2rem;
  font-weight: bold;
}

.mvMoominLogo {
  width: 60%;
}

.mv-pcright {
  width: 90rem;
}

.mvPackageImg {
  width: 60%;
}

.contentVolume {
  margin-top: 8px;
}


.mv-LETTU {
  position: absolute;
  top: 80px;
  right: 50px;
  width: 20rem;
  transition: all 0.6s ease 0s;
}

.mv-LETTU:hover {
  transition: .3s;
  transform: scale(1.05, 1.05);
}

.mv-moomin {
  display: flex;
  /* opacity: 0; */
  animation: opacity 1s ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* @keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
} */



@keyframes yura {

  0%,
  100% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

.mv-moomin02 {
  width: 50vw;
  max-width: 900px;
  padding-bottom: calc(40 / 1024* 100vw);
  animation: yura 3s ease-in-out infinite;
}


@media screen and (max-width:1600px) {
  .mv-pc {
    padding: 8rem 0 4rem 2rem;
  }

  .mv-moomin01 {
    margin-top: 10rem;
  }


}

@media screen and (max-width:1400px) {
  .mv-LETTU {
    width: 15rem;
  }
}

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

  .mv-sp {
    display: block;
    padding-top: 46px;
  }

  .mv-sptop {
    position: relative;
    width: 100%;
    padding: 6rem 0 0;

  }

  .mv-sptop-LETTU {
    width: 14rem;
    margin: 0 0 0 auto;
    margin-right: calc(40 / 1024* 100vw);
  }

  .mv-moomin {
    justify-content: center;
    padding: 0 0 15rem;
    margin: 0 auto;
    margin-top: calc(-60 / 1024* 100vw);
    ;
  }

  .mv-moomin01 {
    width: 36.5vw;
    margin-top: 0;
  }

  .mv-moomin02 {
    width: 80vw;
    padding-bottom: calc(80 / 1024* 100vw);
  }

  .mv-sptop-package {
    position: absolute;
    bottom: -150px;
    left: 0;
    right: 0;
    width: clamp(16rem, 70vw, 180px);
    margin: 0 auto;
  }

  .mv-spbottom-logo {
    padding: 20rem 0 5rem;
    width: 80vw;
    margin: 0 auto;
  }

  .mv-spbottom-logo img {
    max-width: 80vw;
  }

  .mv-mainText {
    font-weight: bold;
    font-size: 32px;
    margin-top: 8px;
  }
}

@media screen and (max-width:768px) {
  .mv-sptop-package {
    bottom: -130px;

  }

  .mv-spbottom-logo {
    padding: 18rem 0 5rem;
  }

  .infoProductName {
    font-size: 2.4rem;
  }
}

@media screen and (max-width:400px) {
  .mv-sptop-LETTU {
    width: 30vw;
    margin: 0 0 0 auto;
    margin-right: calc(100 / 1024* 100vw);
  }

  .mv-moomin {
    padding-bottom: calc(310 / 1024* 150vw);
  }

  .mv-sptop-package {
    bottom: calc(-265 / 1024* 100vw);
    width: 45vw;
  }

  .mv-spbottom-logo {
    padding-top: calc(340 / 1024* 100vw);
    width: 80vw;
  }

  .about-title img {
    width: 12rem;
  }

  .about-title p {
    font-size: 2.4rem;
    margin-top: 10px;
  }
}


/*----------------------------------------------
  about
------------------------------------------------*/
.about {
  width: min(90vw, 107rem);
  margin: 0 auto;
  padding: 6rem 0 7rem 0;
  background: url(../img/background-leaf.png) bottom/contain no-repeat;
  background-blend-mode: lighten;
}

.about-title {
  width: min(90vw, 55rem);
  margin: 0 auto;
  padding-bottom: 2rem;
}




.about-p-inner {
  width: 80rem;
  margin: 0 auto;
  padding: 0.3rem 2rem 0;
  background-image: url(../img/dotted.png);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 6.5rem;
}

.about-marker {
  padding: 0.5rem;
  background: linear-gradient(rgba(255, 243, 78, 0.5), rgba(255, 243, 78, 0.5)) 0 100%/0 100% no-repeat;
  transition: 1s;
}

.about-marker.marker-on {
  background-size: 100% 100%;
}

.about-p2 {
  margin: 0 auto;
  padding: 1.5rem 0;
  font-size: 1.4rem;
}

.about-title {
  font-weight: bold;
  font-size: 3.4rem;
}

about-title img {
  font-size: 2.4rem;
}

@media screen and (max-width:1024px) {
  .about-p-inner {
    width: 65rem;
    padding: 0 0.5rem;
    background-image: url(../img/dotted-sp.png);
    background-size: 10px 42px;
    font-size: 1.5rem;
    line-height: 4.2rem;
  }

  .about-p2 {
    width: 80vw;
    font-size: 1.1rem;
    line-height: 2rem;
  }
}

@media screen and (max-width:768px) {
  .about-p-inner {
    width: min(85vw, 50rem);
    text-align: left;
  }

  .about {
    margin: 0 auto;
    background-image: none;
  }
}

@media screen and (max-width:400px) {
  .about-p2 {
    width: 75vw;
    text-align: left;
    font-size: 3vw;
  }
}

/*----------------------------------------------
  point
------------------------------------------------*/
.point {
  position: relative;
  margin-top: 20rem;
  background-color: rgb(175 187 62 / 40%);
  background-blend-mode: multiply;
  padding-bottom: 20px;
}

.point::before {
  content: "";
  position: absolute;
  left: 0;
  top: -40px;
  width: 100%;
  height: 4rem;
  background: linear-gradient(45deg, rgb(175 187 62 / 40%) 50%, transparent 52%),
    linear-gradient(315deg, rgb(175 187 62 / 40%) 50%, transparent 52%);
  background-size: 85px 85px;
}

.moomin01 {
  position: absolute;
  top: -200px;
  right: 180px;
  z-index: 20;
  width: 38rem;
}

.cap {
  font-size: 12px;
}
.kome{
  position: relative;
  top: -5px;
  font-size: 11px;
}

.point-inner {
  position: relative;
  width: min(90vw, 110rem);
  margin: 0 auto 15rem;
}

.point-innerbox {
  width: 95rem;
  margin: 5rem 0;
  padding: 5rem;
  border-radius: 2rem;
  background: #fff;
  box-shadow: rgba(141, 129, 83, 0.5) 0 8px 0;
  opacity: 0;
}

.point-innerbox:nth-child(2) {
  margin-right: 0;
  margin-left: auto;
}

.point-innerbox-flex {
  display: flex;
}

.point-innerbox-left img {
  width: 12rem;
}

.point-innerbox-left {
  padding: 0 2rem;
}

.point-right01 {
  padding: 11rem 2rem 0 2rem;
}

.point-right02 {
  padding: 2.5rem 2rem 0 2rem;
}

.point-innerbox-right,
.point-innerbox-left {
  width: 50%;
}

.point-innerbox-p {
  text-align: left;
}

.reference {
  padding-left: 2rem;
  font-size: 1.4rem;
  line-height: 3.5rem;
}

.point-innerbox-h3 {
  margin: 3rem 0;
  /* font-size: 3.2rem; */
  font-size: 2.2rem;
  font-weight: 800;

}

.border02 {
  background-image: url(../img/dotted02.png);
}

.point-p {
  padding: 0.5rem 0 0.2rem;
  line-height: 3.5rem;
}

/*point-bottom*/
.moomin02 {
  position: absolute;
  left: -100px;
  bottom: -250px;
  z-index: 20;
  width: min(90vw, 18rem);
  transform-origin: center bottom;
  animation: yurayura 3s ease-in-out infinite;
}

@keyframes yurayura {

  0%,
  100% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
  }
}

.point-image img {
  width: 100%;
  height: 40rem;
  object-fit: cover;
  object-position: center 60%;
}

.infoProductName {
  font-weight: bold;
  font-size: 2.4rem;
}


.itemabout_right {
  text-align: left;
}

@media screen and (max-width:1400px) {
  .moomin02 {
    left: 0;
  }

  .infoProductName {
    font-size: 3.2rem;
  }

}

@media screen and (max-width:1280px) {
  .moomin01 {
    right: 30px;
  }
}

@media screen and (max-width:1024px) {
  .point-inner {
    margin: 0 auto 3rem;
  }

  .point-innerbox {
    width: 70rem;
    margin: 5rem auto;
    padding: 5rem;
  }

  .point-innerbox:nth-child(2) {
    margin: 5rem auto;
  }

  .point-innerbox-flex {
    flex-direction: column;
  }

  .point-innerbox-right,
  .point-innerbox-left {
    width: 100%;
  }

  .order1 {
    order: 1;
  }

  .order2 {
    order: 2;
  }

  .point-right01 {
    padding: 0px 2rem 3rem 2rem;
    width: 80%;
    margin: 0 auto;
  }

  .point-right02 {
    padding: 0px 2rem 0rem 2rem;
    width: 80%;
    margin: 0 auto;
  }

  .point-innerbox-left img {
    width: 8rem;
  }

  .point-image img {
    object-position: center;
    height: 30rem;
  }

  .moomin02 {
    bottom: -380px;
    right: 0;
    margin: 0 auto;
  }
}

@media screen and (max-width:900px) {
  .moomin01 {
    width: 30rem;
    right: 0;
    left: 0;
    margin: 0 auto;
  }
}

@media screen and (max-width:768px) {
  .point-innerbox-h3 {
    margin: 2rem 0 3.5rem;
    font-size: 2.4rem;
  }

  .point-innerbox {
    width: min(90vw, 50rem);
    padding: 5rem 1rem;
  }

  .reference {
    width: min(80vw, 25.5rem);
    margin: 1rem auto 0;
    padding-left: 0;
    font-size: 1.1rem;
    line-height: 2rem;
  }

  .point-right01,
  .point-right02 {
    width: 100%;
  }
}

@media screen and (max-width:400px) {
  .moomin01 {
    width: 80vw;
    top: calc(-550 / 1024* 100vw);
  }

  .point {
    margin-top: calc(450 / 1024* 100vw);
  }

  .reference {
    width: 75vw;
    font-size: 3vw;
  }
}

/*----------------------------------------------
movie
------------------------------------------------*/
.movie {
  position: relative;
  padding: 19rem 0 18rem;
  background: url(../img/background-movie.jpg) no-repeat center center / cover;
}

.moomin03 {
  position: absolute;
  z-index: 20;
  top: 30px;
  right: 170px;
  width: 38rem;
}

.movie-button {
  width: min(80vw, 45rem);
  height: 7rem;
  margin-top: 3rem;
  border-radius: 5rem;
  background-color: #fff;
  font-weight: 800;
  font-size: 2rem;
  transition: all 0.6s ease 0s;
}

.movie-button:hover {
  cursor: pointer;
  transform: scale(1.05, 1.05);
}

.movie-body iframe {
  width: 31.5rem;
  height: 56rem;
}

@media screen and (max-width:1280px) {
  .moomin03 {
    right: 30px;
  }
}

@media screen and (max-width:900px) {
  .moomin03 {
    top: -100px;
    right: 0;
    left: 0;
    width: min(90vw, 30rem);
    margin: 0 auto;
  }

  .movie {
    padding: 0 0 20rem;
  }
}

@media screen and (max-width:768px) {
  .movie-button {
    height: 5rem;
    font-size: 1.6rem;
  }

  .movie-body iframe {
    width: 360px;
    height: 640px;
  }
}

@media screen and (max-width:400px) {
  .movie {
    padding-bottom: calc(600 / 1024* 100vw);
  }

  .movie-body iframe {
    width: 90vw;
    height: 160vw;
  }

  .moomin03 {
    width: 80vw;
    top: calc(-290 / 1024* 100vw);
  }

  .movie-button {
    height: calc(140 / 1024* 100vw);
    font-size: min(4vw, 1.6rem);
  }
}

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

------------------------------------------------*/
.recipe {
  position: relative;
  padding: 19rem 0 18rem;
  background: repeating-linear-gradient(90deg, #FEEAB2, #FEEAB2 20px, #FFEEB5 20px, #FFEEB5 40px);
}

.moomin04 {
  position: absolute;
  top: 30px;
  left: 170px;
  z-index: 20;
  width: 38rem;
}

.recipe-imagebox {
  display: flex;
  justify-content: space-between;
  width: min(95vw, 63rem);
  margin: 0 auto;
}

.recipe-image {
  width: min(90vw, 30rem);
  box-shadow: rgba(74, 63, 7, 0.3) 0 3px 10px;
  margin-bottom: 3rem;
  background-color: #fff;
  opacity: 0;
}

.recipe-button {
  width: min(80vw, 45rem);
  height: 7rem;
  border-radius: 55rem;
  background-color: var(--c-primary2);
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  transition: all 0.6s ease 0s;
}

.recipe-imagebox a:hover {
  opacity: 0.7;
}

.recipe-button:hover {
  cursor: pointer;
  transform: scale(1.05, 1.05);
}

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

  /*
  .moomin04 {
    left: 30px;
  }
  */
  .moomin04 {
    right: 30px;
  }
}

@media screen and (max-width:900px) {
  .moomin04 {
    top: -100px;
    left: 0;
    right: 0;
    width: 30rem;
    margin: 0 auto;
  }

  .recipe {
    padding: 0 0 18rem;
  }
}

@media screen and (max-width:768px) {
  .recipe-imagebox {
    flex-direction: column;
    align-items: center;
  }

  .recipe-button {
    height: 5rem;
    font-size: 1.6rem;
  }
}

@media screen and (max-width:400px) {
  .moomin04 {
    width: 80vw;
    top: calc(-290 / 1024* 100vw);
  }

  .recipe-button {
    height: calc(140 / 1024* 100vw);
    font-size: min(4vw, 1.6rem);
  }

  .recipe {
    padding-bottom: calc(300 / 1024* 100vw);
  }

  .recipe-image {
    margin-bottom: calc(100 / 1024* 100vw);
  }
}

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

------------------------------------------------*/
.itemabout {
  margin-top: 20rem;
}

.itemabout_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96rem;
  margin: 0 auto;
  padding: 3rem;
  border: solid 5px var(--c-primary2);
  border-radius: 2rem;
  background: #fff;
}

.itemabout_left {
  width: 30rem;
  padding-right: 10rem;
}

.itemabout-right-img {
  width: min(60vw, 25rem);
}

.itemabout-right-p {
  padding-top: 2rem;
  text-align: left;
  line-height: 2rem;
}

.itemabout-h2 {
  margin-bottom: 2rem;
  font-size: 3.6rem;
  font-weight: 800;
}

@media screen and (max-width:1024px) {
  .itemabout_box {
    width: 70rem;
    padding: 5rem;
  }

  .itemabout_left {
    width: 30rem;
    padding-right: 5rem;
  }
}

@media screen and (max-width:768px) {
  .itemabout {
    margin-top: 10rem;
  }

  .itemabout_left {
    width: min(40vw, 25rem);
    padding-right: 10rem;
  }

  .itemabout_box {
    flex-direction: column;
    align-items: center;
    width: min(90vw, 40rem);
    padding: 5rem 2rem;
  }

  .itemabout_left {
    margin: 0 auto 2rem;
    padding-right: 0;
  }

  .itemabout-right-p {
    font-size: 1.5rem;
  }

  .itemabout-right-img {
    margin: 0 auto;
  }
}

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

------------------------------------------------*/
.company {
  margin: 15rem auto;
}

.company_box {
  display: flex;
  justify-content: center;
  width: 96rem;
  margin: 0 auto;
  padding: 5rem;
  border: solid 5px var(--c-primary2);
  border-radius: 2rem;
  background: #fff;
  text-align: left;
}

.company_left {
  width: 40rem;
  padding: 3rem 5rem 0 2.5rem;
}

.company-right-p {
  text-align: left;
  line-height: 3.5rem;
}

.company-button {
  width: min(100%, 35rem);
  height: 5rem;
  margin-top: 2.5rem;
  color: #fff;
  border-radius: 5rem;
  background-color: var(--c-primary2);
  font-weight: 800;
  text-align: center;
  transition: all 0.6s ease 0s;
  font-size: min(5vw, 1.6rem)
}

.company-button:hover {
  cursor: pointer;
  transform: scale(1.05, 1.05);
}

.company-h2 {
  margin-bottom: 2rem;
  font-size: 3.6rem;
  font-weight: 800;
}

@media screen and (max-width:1024px) {
  .company_box {
    width: 70rem;
  }

  .company_left {
    width: 40rem;
    padding: 7rem 2.5rem 0 0;
  }
}

@media screen and (max-width:768px) {
  .company_box {
    flex-direction: column;
    align-items: center;
    width: min(90vw, 40rem);
    padding: 5rem;
    text-align: center;
  }

  .company_left {
    width: min(60vw, 20rem);
    padding: 5rem 0;
  }
}

@media screen and (max-width:768px) {
  .company_box {
    padding: 5rem 2rem;
  }
}

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

------------------------------------------------*/
.onlineshop-h2 {
  width: min(80vw, 55rem);
  margin: 0 auto 3rem;
}

.onlineshop-link {
  display: flex;
  align-items: center;
  width: min(60vw, 60rem);
  margin: 5rem auto 0;
}

.onlineshop-link-button {
  cursor: pointer;
  transition: all 0.6s ease 0s;
}

.onlineshop-link-button:hover {
  transform: translateY(-10px);
  transition: .3s;
}

@media screen and (max-width:768px) {
  .onlineshop-link {
    flex-direction: column;
  }

  .onlineshop-link-button:hover {
    transform: translateY(0);
  }
}

@media screen and (max-width:400px) {
  .onlineshop-p {
    font-size: 1.5rem;
  }
}

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

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

.series {
  margin: 10rem 0 0;
}

.moomin05 {
  width: min(80vw, 22rem);
  margin: 0 auto;
}

.series-h2 {
  width: min(90vw, 71rem);
  margin: 0 auto;
}

.series-banner {
  display: flex;

  /*2個目公開時に非表示↓*/
  justify-content: center;
  /*2個目公開時に表示
  justiy-content: space-between;
  */

  align-items: center;
  width: min(90vw, 93rem);
  margin: 0 auto;
}

.series-banner a {
  transition: opacity .2s;
}

.series-banner a:hover {
  opacity: 0.7;
}

.series-banner-image {
  width: 49%;
  margin-top: 2rem;
}

@media screen and (max-width:768px) {
  .series-banner {
    flex-direction: column;
  }

  .series-banner-image {
    width: 80vw;
    margin-top: 2rem;
  }
}

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

------------------------------------------------*/
.footer-h2 {
  width: min(90vw, 40rem);
  margin: 0 auto;
}

footer {
  position: relative;
  background-color: #FCF5DF;
  text-align: center;
}

.footer {
  position: relative;
  width: min(90vw, 1000px);
  margin: 10rem auto 0;
  padding: 10rem 0 43rem;
}

footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: -40px;
  background: linear-gradient(45deg, #FCF5DF 50%, transparent 52%),
    linear-gradient(315deg, #FCF5DF 50%, transparent 52%);
  background-size: 85px 85px;
  width: 100%;
  height: 4rem;
}

.footer-sns {
  display: flex;
  justify-content: space-between;
  width: min(90vw, 16rem);
  margin: 2rem auto 3rem;
}

.footer-sns-img {
  width: min(40vw, 6.5rem);
}

.footer-contact {
  width: min(70vw, 30rem);
  height: 5rem;
  border-radius: 5rem;
  background-color: #FF7C09;
  color: #fff;
  text-align: center;
  font-weight: 800;
  transition: all 0.6s ease 0s;
}

.footer-contact:hover {
  cursor: pointer;
  transform: scale(1.05, 1.05);
}

.footer-bottom {
  position: relative;
  padding: 15rem 0 3rem;
  background-color: #fff;
}

.footer-bottom-logo {
  width: min(50vw, 19rem);
  margin: 0 auto;
}

.moomin06 {
  position: absolute;
  bottom: -130px;
  left: 0;
  right: 0;
  z-index: 50;
  width: 70rem;
  margin: 0 auto;
}

.copyright {
  width: min(90vw, 15rem);
  margin: 1.5rem auto 0.5rem;
}

.footer_pagetop {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 50px;
  z-index: 2;
  width: 8rem;
  height: 8rem;
  margin: auto;
  background: var(--c-primary2);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: .3s;
}

.footer_pagetop_arrow {
  width: 0;
  height: 0;
  border-bottom: 25px solid #fff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transition: .3s;
}

.footer_pagetop:hover {
  opacity: 0.8;
}

.mitake-copyright {
  font-size: 1.2rem;
  font-weight: 500;
}

@media screen and (max-width:768px) {
  .moomin06 {
    bottom: -75px;
    width: min(90vw, 40rem);
  }

  .footer {
    padding: 10rem 0 25rem;
  }

  .footer_pagetop {
    top: 115px;
    right: 20px;
    width: 5rem;
    height: 5rem;
  }

  .footer_pagetop_arrow {
    border-bottom: 15px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }

  .footer-bottom {
    padding: 90px 0 30px;
  }

}

@media screen and (max-width:400px) {
  .moomin06 {
    bottom: calc(-170 / 1024* 100vw);
  }

  .footer {
    padding: 100px 0 200px;
  }

  .footer_pagetop {
    right: 20px;
  }

  .footer-contact {
    height: calc(140 / 1024* 100vw);
    font-size: 4vw;
  }
}

/*----------------------------------------------
  アニメーション
------------------------------------------------*/
.moomin01,
.moomin03,
.moomin04 {
  opacity: 0;
}


.moomin01.inview,
.moomin03.inview,
.moomin04.inview {
  animation-name: moomin-fade-in;
  animation-duration: .3s;
  animation-timing-function: ease-in;
  animation-delay: .3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.point-innerbox.inview,
.recipe-image.inview {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-timing-function: ease-in;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes moomin-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}