@charset "UTF-8";
/* ==================================================
  import
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"); /*Noto Sans JP*/
@import url("https://use.typekit.net/znh8izg.css"); /* Poppins */
/* ==================================================
  Mixins / Functions
================================================== */
/* ---- Media Query ---- */
/* ---- VW (SP基準) ---- */
/* ==================================================
  Variables
================================================== */
/* ---- color ---- */
/* ---- font ---- */
/* ---- layout ---- */
/* ---- font-size ---- */
/* ==================================================
  Base
================================================== */
html {
  font-size: 100%;
}

body {
  font-family: "poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(12 / 16 * 1rem);
  line-height: 2;
  color: #111;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  body {
    font-size: calc(14 / 16 * 1rem);
  }
}
body img,
body video,
body svg {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Utility ---- */
.pc {
  display: none;
}

.sp {
  display: block;
}

@media screen and (min-width: 769px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}
/* ---- CMS:header ---- */
.ftool-wrapper p {
  margin-bottom: 0;
}

/* ==================================================
  Animation
================================================== */
.fadein {
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
}

.fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fadein2 {
  opacity: 0;
  transform: none;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}

.fadein2.is-visible {
  opacity: 1;
}

.fadein {
  opacity: 0;
  transition: all 1s ease;
}

.fadein.scrollin {
  opacity: 1;
}

.fadeinL {
  opacity: 0;
  transform: translate(-40px, 0);
  transition: all 1s ease;
}

.fadeinL.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadeinR {
  opacity: 0;
  transform: translate(40px, 0);
  transition: all 1s ease;
}

.fadeinR.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ==================================================
  Layout
================================================== */
.lp-container {
  width: 100%;
  opacity: 0;
  animation: fadeIn 1.3s ease 0.15s forwards;
}
/* ==================================================
  Main Visual
================================================== */
.mv {
  position: relative;
  padding-top: calc(24 / 390 * 100vw);
}
@media screen and (min-width: 769px) {
  .mv {
    padding-top: calc(60 / 16 * 1rem);
  }
}
.mv__content {
  width: calc(360 / 390 * 100vw);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: calc(12 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .mv__content {
    margin-bottom: calc(20 / 16 * 1rem);
  }
}
.mv__heading {
  line-height: 1;
}
.mv__heading .title {
  font-size: calc(32 / 390 * 100vw);
  font-family: "poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.64px;
}
@media screen and (min-width: 769px) {
  .mv__heading .title {
    font-size: calc(52 / 1280 * 100vw);
  }
}
.mv__heading .subTitle {
  font-size: calc(10 / 390 * 100vw);
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .mv__heading .subTitle {
    font-size: calc(12 / 1280 * 100vw);
  }
}
.mv__logo {
  width: calc(50 / 390 * 100vw);
}
@media screen and (min-width: 769px) {
  .mv__logo {
    width: calc(80 / 1280 * 100vw);
  }
}
.mv__slider {
  width: 100%;
  overflow: hidden;
}
.mv__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: mv-slide 22s linear infinite;
  will-change: transform;
}
@media screen and (min-width: 769px) {
  .mv__track {
    animation: mv-slide 21s linear infinite;
  }
}
.mv__slide {
  flex-shrink: 0;
  width: 80vw;
}
@media screen and (min-width: 769px) {
  .mv__slide {
    width: 28vw;
  }
}
.mv__slide img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes mv-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.mv .mv__heading[data-color=pink] {
  color: #FF93C2;
}
.mv .mv__heading[data-color=purple] {
  color: #78357B;
}
.mv .mv__heading[data-color=blue] {
  color: #0A39D2;
}
.mv .mv__heading[data-color=yellow] {
  color: #FAE3A0;
}
.mv .mv__heading[data-color=red] {
  color: #FC191D;
}

/* ==================================================
  Content
================================================== */
:root {
  --space-m: 50px;
}
@media screen and (min-width: 769px) {
  :root {
    --space-m: 160px;
  }
}

.lead {
  font-size: calc(11 / 16 * 1rem);
  text-align: center;
  margin: calc(80 / 16 * 1rem) 0 calc(170 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .lead {
    font-size: calc(12 / 16 * 1rem);
    margin: calc(130 / 16 * 1rem) 0 calc(220 / 16 * 1rem);
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: calc(250 / 16 * 1rem);
  margin-bottom: calc(180 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .content {
    width: 982px;
    margin-inline: auto;
    gap: calc(320 / 16 * 1rem);
    margin-bottom: calc(240 / 16 * 1rem);
  }
}
.content div {
  position: relative;
}
.content__block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(80 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .content__block {
    width: 982px;
    margin-inline: auto;
    gap: calc(120 / 16 * 1rem);
  }
}
.content__block.pink {
  color: #FF93C2;
}
.content__block.pink .content__main .heading {
  left: calc(17 / 390 * 100vw);
  top: calc(-69 / 390 * 100vw);
}
.content__block.pink .content__main .text {
  top: calc(300 / 390 * 100vw);
  left: 38.4%;
}
.content__block.pink .content__main .colorBox::after {
  background-color: #FF93C2;
}
.content__block.blue {
  color: #0A39D2;
}
.content__block.blue .content__main .heading {
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  top: calc(-69 / 390 * 100vw);
}
.content__block.blue .content__main .text {
  top: calc(377 / 390 * 100vw);
  right: 10.2%;
  width: 36.6%;
}
.content__block.blue .content__main .colorBox::after {
  background-color: #0A39D2;
}
.content__block.yellow {
  color: #9D9D99;
}
.content__block.yellow .content__main .heading {
  text-align: right;
  right: calc(17 / 390 * 100vw);
  top: calc(-20 / 390 * 100vw);
  color: #FAE3A0;
}
.content__block.yellow .content__main .text {
  top: calc(278 / 390 * 100vw);
  right: 11.5%;
}
.content__block.yellow .content__main .colorBox::after {
  background-color: #FAE3A0;
}
.content__block.red {
  color: #FC191D;
}
.content__block.red .content__main .heading {
  left: 0;
  right: 0;
  margin: auto;
  top: calc(-69 / 390 * 100vw);
  text-align: center;
}
.content__block.red .content__main .text {
  top: calc(383 / 390 * 100vw);
  right: 4.6%;
}
.content__block.red .content__main .colorBox::after {
  background-color: #FC191D;
}
.content__block.purple {
  color: #78357B;
}
.content__block.purple .content__main .heading {
  left: calc(17 / 390 * 100vw);
  top: calc(-69 / 390 * 100vw);
}
.content__block.purple .content__main .text {
  bottom: calc(35 / 390 * 100vw);
  right: 4.6%;
}
.content__block.purple .content__main .colorBox::after {
  background-color: #78357B;
}
@media screen and (min-width: 769px) {
  .content__block.pink .content__main .heading {
    left: calc(30 / 16 * 1rem);
    top: calc(-83 / 16 * 1rem);
  }
  .content__block.pink .content__main .text {
    top: calc(330 / 16 * 1rem);
  }
  .content__block.blue .content__main .heading {
    top: calc(-83 / 16 * 1rem);
  }
  .content__block.blue .content__main .text {
    top: calc(420 / 16 * 1rem);
  }
  .content__block.yellow .content__main .heading {
    right: calc(-30 / 16 * 1rem);
    top: calc(-23 / 16 * 1rem);
  }
  .content__block.yellow .content__main .text {
    top: calc(310 / 16 * 1rem);
  }
  .content__block.red .content__main .heading {
    top: calc(-83 / 16 * 1rem);
  }
  .content__block.red .content__main .text {
    top: calc(425 / 16 * 1rem);
  }
  .content__block.purple .content__main .heading {
    left: calc(-28 / 16 * 1rem);
    top: calc(-78 / 16 * 1rem);
  }
  .content__block.purple .content__main .text {
    top: calc(515 / 16 * 1rem);
    bottom: auto;
  }
}
.content__inner {
  display: flex;
  flex-direction: column;
  gap: calc(80 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .content__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: calc(120 / 16 * 1rem);
         column-gap: calc(120 / 16 * 1rem);
  }
}
@media screen and (min-width: 769px) {
  .content__main {
    width: 100%;
  }
}
.content__main .heading {
  position: absolute;
  font-family: "poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(60 / 16 * 1rem);
  font-weight: 800;
  line-height: 84%;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .content__main .heading {
    font-size: calc(70 / 16 * 1rem);
  }
}
.content__main .text {
  width: 58.9%;
  position: absolute;
  z-index: 10;
}
.content__makeup {
  width: calc(264 / 390 * 100vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: calc(14 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .content__makeup {
    width: 100%;
    margin-top: calc(160 / 16 * 1rem);
  }
}
.content__makeup .heading {
  padding: calc(10 / 16 * 1rem) 0;
  background-color: #F3F3F3;
}
@media screen and (min-width: 769px) {
  .content__makeup .heading {
    padding: calc(16 / 16 * 1rem) 0;
  }
}
.content__makeup .heading p {
  line-height: 1.46;
  text-align: center;
}
.content__makeup .heading p:nth-child(1) {
  font-size: calc(10 / 16 * 1rem);
}
.content__makeup .heading p:nth-child(2) {
  font-size: calc(13 / 16 * 1rem);
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .content__makeup .heading p {
    line-height: 1.6;
  }
  .content__makeup .heading p:nth-child(1) {
    font-size: calc(11 / 16 * 1rem);
  }
  .content__makeup .heading p:nth-child(2) {
    font-size: calc(14 / 16 * 1rem);
  }
}
.content__makeup .text {
  font-size: calc(10 / 16 * 1rem);
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .content__makeup .text {
    font-size: calc(11 / 16 * 1rem);
  }
}
@media screen and (min-width: 769px) {
  .content .other1 {
    width: 580px;
    margin-left: calc(60 / 16 * 1rem);
  }
}
.content .w300 {
  width: calc(300 / 390 * 100vw);
}
@media screen and (min-width: 769px) {
  .content .w300 {
    width: 400px;
  }
}
.content .w260 {
  width: calc(260 / 390 * 100vw);
}
@media screen and (min-width: 769px) {
  .content .w260 {
    width: 430px;
    margin: 0 70px;
  }
}
@media screen and (min-width: 769px) {
  .content .img1-4 {
    margin: -230px 0 0 0;
  }
}
@media screen and (min-width: 769px) {
  .content .img-sub {
    width: 620px;
    margin-inline: auto;
  }
}
.content .is-right {
  margin-left: auto;
}
.content .credits {
  position: relative;
  width: 100%;
  margin: calc(15 / 16 * 1rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media screen and (min-width: 769px) {
  .content .credits {
    width: 100%;
    margin-top: calc(20 / 16 * 1rem);
    gap: 8px;
  }
}
@media screen and (min-width: 769px) {
  .content .credits.credit1 {
    width: 500px;
    margin-right: 420px;
  }
}
.content .credits.mr {
  padding-right: calc(15 / 16 * 1rem);
}
.content .credits.w360 {
  width: calc(360 / 390 * 100vw);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .content .credits.w360 {
    width: 100%;
  }
}
.content .credits .item-d-none {
  display: none;
}
.content .credits__block {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  word-break: break-word;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  font-size: calc(11 / 16 * 1rem);
}
.content .credits__block span {
  font-size: calc(10 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .content .credits__block {
    font-size: calc(12 / 16 * 1rem);
  }
  .content .credits__block span {
    font-size: calc(11 / 16 * 1rem);
  }
}
.content .credits__buy {
  transition: all 0.3s ease;
}
.content .credits__buy:hover {
  opacity: 0.6;
}
.footer {
  position: relative;
  width: calc(350 / 390 * 100vw);
  margin-inline: auto;
  padding-bottom: calc(20 / 16 * 1rem);
  color: #78357B;
  font-family: "poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  .footer {
    width: calc(100% - 120px);
  }
}
.footer__inner {
  position: relative;
  z-index: 10;
  padding-top: calc(30 / 16 * 1rem);
  /*@include pc{
    height: auto;
  }*/
}
.footer__staff {
  line-height: 1.9;
  text-align: center;
  margin-bottom: calc(80 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .footer__staff {
    font-size: calc(13 / 16 * 1rem);
    margin-bottom: calc(120 / 16 * 1rem);
  }
}
.footer__logo {
  width: calc(80 / 16 * 1rem);
  margin-bottom: calc(30 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .footer__logo {
    width: calc(120 / 16 * 1rem);
    margin-bottom: calc(60 / 16 * 1rem);
  }
}
.footer__link {
  font-size: calc(13 / 16 * 1rem);
  line-height: 2.1;
  margin-bottom: calc(30 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .footer__link {
    font-size: calc(14 / 16 * 1rem);
  }
}
.footer__link li a {
  text-decoration: underline;
}
.footer__link li a:hover {
  text-decoration: none;
}
.footer__copy {
  font-size: calc(10 / 16 * 1rem);
}
@media screen and (min-width: 769px) {
  .footer__copy {
    font-size: calc(11 / 16 * 1rem);
  }
}

.swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* colorBox */
.colorBox {
  position: relative;
}

.colorBox::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #000;
  transition: width 0.9s cubic-bezier(0.43, 0.05, 0.17, 1) 0.15s;
}

.active.colorBox::after {
  width: 0;
}/*# sourceMappingURL=style.css.map */