@charset "UTF-8";
/* CSS Document */
.header, .footer { position: relative; margin: 0 auto; z-index: 100;}
.header { width: 90%; max-width: 1400px;}
.footer { width: 100%;}

*{
  margin: 0;
  padding: 0;
  font-family: "MFW-ShinMGoPr6-Medium", sans-serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
}
html {
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5em;
}
#allWrap {
  max-width: 100%;
}
.fixed-body {
  overflow: hidden;
  height: 100vh;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
/* Correct `inline-block` display not defined in IE 8/9. */
audio,
canvas,
video {
  display: inline-block;
}
/* Prevent modern browsers from displaying `audio` without controls.Remove excess height in iOS 5 devices. */
audio:not([controls]) {
  display: none;
  height: 0;
}
/* Address `[hidden]` styling not present in IE 8/9.Hide the `template` element in IE, Safari, and Firefox < 22.*/
[hidden],
template {
  display: none;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;}

a {
  text-decoration: none;
  transition: 0.5s;
}
a:hover {
  opacity: .6;
  transition: 0.5s;
}

.only_pc { display: inline-block!important;}
.only_smp { display: none!important;}

#bottom { width: 100%; height: 1px; position: absolute; bottom: 0;}

@keyframes fadeIn {
  0% { opacity: 0}
  100% { opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0}
  100% { opacity: 1}
}

#header {
  position: relative;
}
  #header::before {
    position: absolute;
    content: "";
    width: 100vw;
    height: 147px;
    background: #fff;
  }

/*++++++++++++++++++++++++++++++++++++*/
/*             Fancy Deco             */
/*++++++++++++++++++++++++++++++++++++*/
#column3_wrap {
  display: flex;
  position: relative;
  background-image: linear-gradient(#f9e4ee 0%, #eb7aaa 25%, #f9e4ee 50%, #eb7aaa 75%, #f9e4ee 100%);
  z-index: 1;
}
#side_left, #side_right {
  bottom: 0;
  width: calc((100vw - min(56.428vw, 790px)) / 2 - .5em);/* W1400pxに対してのvw */
  height: 100vh;
  z-index: 10;
}
#center {
  position: relative;
  width: min(56.428vw, 790px);
  margin: 0 auto;
  background-image: linear-gradient(#fff 0%, #f9e4ee 10%, #eb7aaa 32%, #f9e4ee 38%, #eb7aaa 69%, #f9e4ee 80%, #eb7aaa 80%, #eb7aaa 100%);
  z-index: 50;
}
#side_left {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: end;
  flex-direction: column;
  left: 0;
}
#side_right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  right: 0;
  padding-top: min(17.142vw,240px);
}

.range { position: relative;}

.follow {
  position: absolute;
  bottom: 0;
}
.follow.is-fixed {
  position: fixed;
  bottom: 0;
}

#front_img {
  padding-top: min(.5vw,7px);
}
#deco_parts {
  padding-top: .01px;
  margin-top: min(-2.928vw,-41px);
}
#product_info {
  position: relative;
  padding-bottom: min(5.5vw,77px);
  background-image: linear-gradient(#b64c96 0%, #b64c96 2%, #e75295 20%, #f2aecb 55%, #e42d89 100%);
}
  .bg_sanrio {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: auto;
  }

.copyright {
  margin: min(4.857vw,68px) 0 min(4.5514vw,63.72px);
}

.order_wrap {
  width: 73.04%;
  margin: 0 auto;
  padding: 0 0 min(3.333vw, 40px);
  background: #fff;
  border-radius: 1.3em;
}
  .order_wrap p:not([class]) {
    padding-bottom: min(3.333vw, 40px);
    padding-top: min(3.75vw, 45px);
    font-size: min(2.083vw,25px);
    text-align: center;
    font-weight: 600;
  }
  .order_wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: min(1.25vw,15px) 2.5%;
    width: 94%;
    margin: 0 auto;
    padding: 0;
  }
  .order_wrap ul li {
    display: flex;
    width: 48%;
    min-height: min(9.383vw, 137px);
    list-style: none;
  }
  .order_wrap ul li a {
    display: flex;
    align-items: center;
    padding: min(.6849vw,10px) 1.2em;
    border-radius: 1rem;
    text-decoration: none;
    background: #ffb11b;
    text-align: center;
    vertical-align: center;
    box-sizing: border-box;
  }
  .order_wrap ul li a img {
    width: 90%;
    display: block;
    margin: 0 auto;
  }
.copyAmazon {
  width: 90%;
  margin: 2em auto 0 !important;
  font-size: 80%;
  line-height: 1.3;
}


/*++++++++++++++++++++++++++++++++++++*/
/*             NAVIGATION             */
/*++++++++++++++++++++++++++++++++++++*/
#hum_menu { display: none;}

#navArea {
  display: flex;
  width: calc(100% - 200px);
  /*position: absolute;*/
  justify-content: space-between;
}
#menu_pc_wrap,
#menu_wrap {
  width: 100%;
  z-index: 3;
}
#menu_pc_scroll,
#menu_scroll {
  text-align: center;
}
#menu_pc_scroll { margin-top: min(3.714vw,52px);}

  #menu_pc_wrap ul,
  #menu_wrap ul {
    width: 80%;
    margin: 0 auto;
    list-style: none;
  }
  #menu_pc_wrap ul { width: min(12.771vw, 178.8px);}

    #menu_pc_wrap ul li,
    #menu_wrap ul li {
      position: relative;
      margin: 0;
    }
    #menu_pc_wrap ul li.child,
    #menu_wrap ul li.child { margin: .2em 0;}
    #menu_pc_wrap ul li + li { margin-top: min(1.642vw,23px);}

    #menu_pc_wrap ul li:not([class]) + li.child { margin-top: -.5em;}

      #menu_pc_wrap ul li a,
      #menu_wrap ul li a {
        position: relative;
        display: block;
        width: 100%;
        text-decoration: none;
        transition-duration: 0.2s;
      }
      #menu_pc_wrap ul li:not([class]) a:hover {
        opacity: .5;
      }
    #menu_pc_wrap ul li.child a,
    #menu_wrap ul li.child a {
      color:  #fff;
      border: none;
    }
    #menu_pc_wrap ul li.child a:hover {
      background: none;
      border: none;
      opacity: .5;
    }
#menu_pc_wrap ul li.btn_external {
  margin: .8em 0 1.1em;
}
  #menu_pc_wrap ul li.btn_external a {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding-right: 1em;
    background-image: linear-gradient(170deg, #d9ddda, #64c3de 100%);
    border: none;
    font-size: min(1.285vw, 16px);
    color: #fff;
    transition : all 0.5s ease 0s;
  }
  #menu_pc_wrap ul li.btn_external a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: min(.357vw,5px) 0 min(.357vw,5px) min(.5vw,5px);
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    right: .8em;
    bottom: 0;
    margin: auto;
  }
  #menu_pc_wrap ul li.btn_external span { font-size: 90%;}

  #menu_pc_wrap ul li.btn_external a:hover {
    background: rgb(255,255,255,.5);
    color: #64c3de;
  }
  #menu_pc_wrap ul li.btn_external a:hover::before { border-color: transparent transparent transparent #64c3de;}


.logo_heartcapsule {
  width: min(17.142vw,240px);
  height: min(10.92vw,153px);
}
  .logo_heartcapsule img {
    width: 100%;
    height: auto;
    /*animation: floating-logo 2.5s ease-in-out infinite alternate-reverse;*/
  }
  @keyframes floating-logo {
    0% { transform: translateY(-3.5%);}
    100% { transform: translateY(3.5%);}
  }



@media screen and (max-width:680px){
.only_pc { display: none!important;}
.only_smp { display: inline-block!important;}

#side_left,
.scroll_wrap,
#header::before { display: none!important;}

#column3_wrap {
  display: block;
}
#side_left,#side_right { display: none;}

#center {
  width: 100%;
  background-image: linear-gradient(#fff 0%, #f9e4ee 12%, #eb7aaa 29%, #f9e4ee 38%, #eb7aaa 69%, #f9e4ee 80%, #eb7aaa 80%, #eb7aaa 100%);
}

/* ======================
         Container
======================= */
#front_img {
  padding-top: 3vw;
}
#deco_parts {
  margin-top: -6vw;
}
#product_info {
  padding-bottom: 10.5vw;
  background-image: linear-gradient(#b64c96 0%, #b64c96 2%, #e75295 14%, #f2aecb 48%, #e42d89 100%);
}
.copyright {
  margin: 9vw 0;
}

.order_wrap {
  border-radius: .8em;
}
  .order_wrap p:not([class]) {
    padding-bottom: 5vw;
    padding-top: 5vw;
    font-size: 4vw;
  }
  .order_wrap ul {
    gap: 1.5vw 2.5%;
  }
  .order_wrap ul li a {
    min-height: 17vw;
    padding: .5em 1.2em;
    border-radius: .7em;
  }
    .copyAmazon {
      margin: 3vw auto !important;
      font-size: .4em;
    }


#hum_menu { display: block;}

#menu_wrap {
  /*display: none;*/
  position: fixed; 
  opacity: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(#eb7aaa 0%, #f9e4ee 25%, #f9e4ee 75%, #eb7aaa 100%);
  transition: all 0.3s;
  z-index: -1;
}
#menu_wrap.panelopen {
  display: block;
  opacity: 1;
  z-index: 999;
}
/* ナビゲーションの縦スクロール */
#menu_wrap.panelopen #menu_scroll {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 999; 
}

/* ======================
           Nav
======================= */
#menu_wrap ul {
  display: none;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 999;
}
#menu_wrap.panelopen ul {
  display: block;
  width: 60%;
}
#menu_wrap ul li {
  list-style: none;
  text-align: center;
  margin: 2em 0;
}
  #menu_wrap ul li.child {
    margin: .8em 0;
  }
#menu_wrap ul li.logo_heartcapsule_sp img {
  width: 95%;
  margin: 0 auto;
}

#menu_wrap ul li a {
  color: #9a85bd;
  font-size: 5.2vw;
  letter-spacing: 0.1em;
  text-decoration: none;
  /*text-transform: uppercase;*/
}
#menu_wrap ul li.child a {
  font-size: 4.7vw;
}
#menu_wrap ul li.btn_external {
  margin: 1.1em 0;
}
  #menu_wrap ul li.btn_external a {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: .7em 0;
    background-image: linear-gradient(170deg, #d9ddda, #64c3de 100%);
    border: none;
    font-size: 4.5vw;
    color: #fff;
  }
  #menu_wrap ul li.btn_external a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.4vw 0 1.4vw 1.4vw;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    right: .8em;
    bottom: 0;
    margin: auto;
  }
  #menu_wrap ul li.btn_external span { font-size: 90%;}


/* ======================
          Button
======================= */
.toggle_btn {
  position: fixed;
  top: 3vw;
  right: 3vw;
  width: min(15vw,75px);
  height: min(15vw,75px);
  background: #fff;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
  .toggle_btn.hoge_fixed {
    z-index: 9999;
    opacity: 1;
  }
  
.toggle_btn.open {
  background: #f79fc0;
}
.toggle_btn span {
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 60%;
  height: min(1.2vw, 6px);
  background: #f79fc0;
  border-radius: 2vw;
  transition: all .4s;
  }
.toggle_btn span:nth-of-type(1) { bottom: 40%;}
/*.toggle_btn span:nth-of-type(2) { top:23px;}*/
.toggle_btn span:nth-of-type(3) { top: 40%;}

.toggle_btn.open span {
  background: #fff;
}

.toggle_btn.open span:nth-of-type(1) {
  width: 65%;

  bottom: 0;
  transform: translateY(0) rotate(-45deg);
}
.toggle_btn.open span:nth-of-type(2) {
  opacity: 0;
}
.toggle_btn.open span:nth-of-type(3) {
  width: 65%;

  top: 0%;
  transform: translateY(0) rotate(45deg);
}





}