@charset "UTF-8";
/* CSS Document */
body {
  /*font-family: 'M PLUS Rounded 1c', sans-serif;*/
  /*font-family: 'M PLUS 1p', sans-serif;*/
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: 400;
  background: #fefefe;
  /*background:url("../images/bg_body.jpg") center top repeat;
  background-attachment: fixed;
  background-size:cover;*/
}
body a {
  color: #4fb6ac;
}
body a:hover {
  text-decoration: none;
}

.container {
  background: #fff;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

body img {
  width: 100%;
  height: auto;
}

.bx-bgpk {
  background: #ffe1e8;
}

.footer {
  padding: 18px 0 24px;
  text-align: center;
}
.footer p {
  text-align: center;
  font-size: 0.8rem;
  padding-bottom: 1.2rem;
}
.footer .copy {
  margin: 0rem 0 1.5rem;
  font-size: 1rem;
}
.footer .copy img {
  margin-bottom: 1rem;
}
.footer a {
  color: #000;
}

canvas#BG {
  display: none;
}

.btn--viewMore {
  padding: 2.6em 5%;
  text-align: center;
}

@media (min-width: 641px) {
  /* PC用 */
  .container {
    width: 750px;
    margin: 0 auto;
  }
  .footer p.copy {
    font-size: 0.7rem;
  }
}
@media (max-width: 640px) {
  /* SP用 */
  .container img {
    width: 100%;
    height: auto;
  }
  .footer {
    padding: 18px 0 20px;
  }
}
/* anc
-------------------------------------------------- */
.ul--anc01 {
  display: flex;
  justify-content: space-between;
  padding: 20% 5% 5%;
  background: url("../images/bg_lineup.png") center top no-repeat;
  background-size: 100% auto;
}
.ul--anc01 li {
  width: 31%;
}

.title {
  margin-top: -2.5%;
}

@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* sheet
-------------------------------------------------- */
.item ul {
  display: flex;
  justify-content: center;
  margin: 0 3%;
}
.item ul li {
  width: 67%;
}
.item ul li a img {
  display: inline-block;
  transition: 0.5s;
}
.item ul li a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.sheet .moon {
  padding-bottom: 4.6em;
  background: #fdfcdb url("../images/bg_04.png") center top no-repeat;
  background-size: 100% auto;
}
.sheet .maca {
  padding-bottom: 4.6em;
  background: #fdf2f4 url("../images/bg_05.png") center top no-repeat;
  background-size: 100% auto;
}
.sheet .relax {
  padding-bottom: 4.6em;
  background: #def5f9 url("../images/bg_06.png") center top no-repeat;
  background-size: 100% auto;
}
.sheet .blue {
  padding-bottom: 4.6em;
  background: #bbdaff url("../images/bg_06.png") center top no-repeat;
  background-size: 100% auto;
}

.mist .moon, .gel .moon, .clip .moon {
  background: #fdfcdb url("../images/bg_04.png") center top no-repeat;
  background-size: 100% auto;
}

.mist .maca, .gel .maca, .clip .maca {
  background: #fdf2f4 url("../images/bg_05.png") center top no-repeat;
  background-size: 100% auto;
}

.mist .relax, .gel .relax, .clip .relax {
  background: #def5f9 url("../images/bg_06.png") center top no-repeat;
  background-size: 100% auto;
}

.mist .blue, .gel .blue, .clip .blue {
  background: #bbdaff url("../images/bg_06.png") center top no-repeat;
  background-size: 100% auto;
}

.clip--detail {
  position: relative;
  padding: 0.1em 0 3em;
}

.clip .ttl {
  margin: 0 0 1.6em;
}
.clip .itemImage {
  position: absolute;
  left: 5%;
  top: 11em;
  width: 20%;
}
.clip .maca .itemImage {
  top: 15.5em;
}
.clip .relax .itemImage {
  top: 12em;
}
.clip .moon .itemImage, .clip .relax .itemImage {
  left: auto;
  right: 5%;
}
.clip .icn--new {
  position: absolute;
  right: 7.1%;
  top: 12em;
  width: 18%;
  z-index: 6;
}
.clip .ul--buyBtn01 {
  margin: 4.7em 0 1.1em;
}

.clip--detail .moreItem {
  margin: 0 0 1.2em;
  text-align: center;
}
.clip--detail .moreItem a {
  color: #000;
  font-weight: 700;
}

.item.gel {
  margin-top: -13%;
  position: relative;
  z-index: 1;
}
.item.gel .gel_img1 {
  position: relative;
  z-index: 1;
}
.item.gel .gel_img2 {
  position: relative;
  z-index: 2;
  margin-top: -3%;
}
.item.mist {
  position: relative;
  z-index: 2;
}
.item .ul--clip01 {
  margin: 0;
  padding: 10% 4% 15%;
}
.item .ul--clip01 li {
  width: 31%;
}
.item .moon .ul--clip01 {
  background: #fdfcdb;
}
.item .maca .ul--clip01 {
  background: #fdf2f4;
}
.item .relax .ul--clip01 {
  background: #def5f9;
}

.clip .sime {
  margin: 6% 4% 13%;
}

@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* cp--bnr
-------------------------------------------------- */
.scrollanime {
  opacity: 0;
}

.fadeInUp {
  animation-name: fadeInDown;
  animation-delay: 0s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  transform: translateY(50px);
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.updown {
  transform: translateY(-100px);
}

.downup {
  transform: translateY(100px);
}

.tooltip-container {
  position: static;
}

.tooltip-trigger {
  cursor: pointer;
}

.moon .freg, .maca .freg, .relax .freg {
  position: relative;
  z-index: 1;
}
.moon .ul--buyBtn01, .maca .ul--buyBtn01, .relax .ul--buyBtn01 {
  position: relative;
  z-index: 2;
}

.moon .btn_tip {
  background-color: #00a6b0;
}
.moon .tooltip:before {
  background-color: #00a6b0;
}

.maca .btn_tip {
  background-color: #f93b73;
}
.maca .tooltip:before {
  background-color: #f93b73;
}

.relax .btn_tip {
  background-color: #ffc333;
}
.relax .tooltip:before {
  background-color: #ffc333;
}

.tooltip {
  position: absolute;
  visibility: hidden;
  color: #fff;
  max-width: 250px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
  /* triangle dimension */
  --b: 3.5em;
  --h: 1em;
  --p: 50%;
  --r: 1.2em;
  padding: 5px;
  z-index: 13;
}
@media (min-width: 641px) {
  .tooltip {
    /* PC用 */
    width: 280px;
    margin-left: 25%;
  }
}
@media (max-width: 640px) {
  .tooltip {
    /* SP用 */
    margin: 0 20%;
  }
}
.tooltip.btn_tip {
  margin-top: 14px;
}
.tooltip.text_tip {
  margin-top: 14px;
}
.tooltip ul {
  padding: 0px;
  margin: 0px 0 0 0;
  display: block;
}
.tooltip ul li {
  width: 100%;
  padding: 0px;
  margin-bottom: 5px;
}
.tooltip ul li:last-child {
  margin-bottom: 0;
}
.tooltip ul li a {
  transition: opacity 0.5s;
}
.tooltip ul li a:hover {
  opacity: 0.5;
}

.tooltip:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--h)) 0 0;
  background-image: inherit;
  clip-path: polygon(min(60%, var(--p) + var(--b) / 2) var(--h), var(--p) 0, max(40%, var(--p) - var(--b) / 2) var(--h), 50% 50%);
}

.tooltip.show {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* cp
-------------------------------------------------- */
.cp--btn {
  padding: 6% 8% 10%;
}

@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* lineup--innner
-------------------------------------------------- */
@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* btn--lineup
-------------------------------------------------- */
@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* bottom--banner 
-------------------------------------------------- */
@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* 
-------------------------------------------------- */
@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}
/* 
-------------------------------------------------- */
@media (min-width: 641px) {
  /* PC用 */
}
@media (max-width: 640px) {
  /* SP用 */
}/*# sourceMappingURL=lp_001.css.map */