@charset "UTF-8";

:root {
  --rate: 46.8rem / 780;
  --font-lp_eng01: "hanken-grotesk", sans-serif;
  --font-lp_eng02: "erotique", sans-serif;
  --font-lp_jpn: "fot-tsukumin-pr6n", sans-serif;
  --color_pink01: #f6d1de;
  --color_pink02: #eda0ba;
  --color_gray01: #aab4be;
  --color_black:#000000;
  --color_white: #ffffff;
}

/*--------------------------------
            CSS Animation
--------------------------------*/

.ef1 {
  opacity: 0;
  -webkit-animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
  animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-repeat: none;
  mask-repeat: none;
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  transform: translateZ(0);
  transition: -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.4s linear;
}

.ef1.active {
  animation: opa1 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  -webkit-mask-position: center 0;
  mask-position: center 0;
  animation-delay: .5s;
}

.ef2,
.ef2-delay,
.ef2 li {
  opacity: 0;
  translate: 0 5svh;
  transition: opacity 1.8s ease, translate 1.5s ease !important;
}

.ef2-delay {
  transition: opacity 1.8s 0.5s ease, translate 1.5s 0.5s ease;
}

.ef2.active,
.ef2-delay.active,
.ef2.active li {
  opacity: 1;
  translate: 0 0 !important;
}

.ef2.active li:nth-child(1) { transition-delay: 0s !important; }
.ef2.active li:nth-child(2) { transition-delay: 0.2s !important; }
.ef2.active li:nth-child(3) { transition-delay: 0.4s !important; }
.ef2.active li:nth-child(4) { transition-delay: 0.6s !important; }
.ef2.active li:nth-child(5) { transition-delay: 0.8s !important; }
.ef2.active li:nth-child(6) { transition-delay: 1.0s !important; }
.ef2.active li:nth-child(7) { transition-delay: 1.2s !important; }

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*--------------------------------
                共 通
 --------------------------------*/

main,#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
  max-width: 100%;
}

#FooterWrap,
.archive_area{
  position: relative;
  z-index: 0;
  background-color: var(--color_white);
  z-index: 999;
}

#footer {
  margin-top: 0;
}

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 100;
}
#lp_contents *{
  box-sizing: border-box;
}
#lp_contents{
  font-family: 'Lato', 'ryo-gothic-plusn', sans-serif;
  font-feature-settings: "palt";
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  background: linear-gradient(to top, #000000, #141e28);
}
#lp_contents .sp_only { 
  display: none;
}
#lp_contents img {
  width: 100%;
  display: block;
  height: auto;
  image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;
}
#lp_contents a { 
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.5s;
  color: inherit;
}
#lp_contents a:hover {
  opacity: .8
}
#lp_contents ul li,
#lp_contents ol li {
  list-style: none;
}
#lp_contents section {
  position: relative;
}
#lp_contents .lp_inner{
  background-color: var(--color_black);
}

#lp_contents .sec {
  position: relative;
}

#lp_contents .link_none {
  pointer-events: none;
  display: inline-block;
  display: -webkit-inline-box;
}

/*------------ Text ------------*/
#lp_contents h1,
#lp_contents h2,
#lp_contents h3,
#lp_contents h4 {
  padding: 0;
  float: none;
  font-weight: normal; 
}

#lp_contents p {
  display: block;
  margin: 0;
  font-family: 'Lato', 'ryo-gothic-plusn', sans-serif;
  font-feature-settings: "palt";
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 2;
}
#lp_contents sup{
  font-size: 70%;
  margin-top: -0.6rem;
}
#lp_contents .note{
  display: inline-block;
  font-size: calc(20 * (var(--rate)));
  line-height: 2;
}
#lp_contents .bold{
  font-weight: bold;
}

#lp_contents a {
  color: var(--color_pink01);
  text-decoration: underline;
}

#lp_contents a,
#lp_contents .accordion_btn {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

/*============================
BG
============================*/
#lp_contents .look_block {
  position: relative;
  margin-top: calc(250 * (var(--rate)));
}

#lp_contents .look_block:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(780 * (var(--rate)));
  height: calc(2900 * (var(--rate)));
  content: "";
  z-index: 0;
}

#lp_contents .look_block.look01:before {
  top: calc(1300 * (var(--rate)));
  background: url(../img/bg02.png) no-repeat;
  background-size: 100%;
}

#lp_contents .look_block.look02:before {
  top: calc(1290 * (var(--rate)));
  background: url(../img/bg03.png) no-repeat;
  background-size: 100%;
}

#lp_contents .lead_area {
  position: relative;
}

#lp_contents .lead_area:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(360 * (var(--rate)));
  background: url(../img/bg01.png) no-repeat;
  background-size: 100%;
  width: calc(780 * (var(--rate)));
  height: calc(2000 * (var(--rate)));
  content: "";
  z-index: -1;
}

/*============================
MV
============================*/
#lp_contents .sec_mv {
  position: relative;
}

#lp_contents .sec_mv h1 {
  position: absolute;
  top: calc(415 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  width: calc(780 * (var(--rate)));
  z-index: 5;
}


#lp_contents .lead_area {
  margin-top: calc(-87 * (var(--rate)));
}

#lp_contents .lead {
  margin-top: calc(50 * (var(--rate)));
  font-family: var(--font-lp_jpn);
  font-size: calc(32 * (var(--rate)));
  letter-spacing: 0.1em;
  color: var(--color_pink01);
}

#lp_contents .lead_area .lead:first-of-type {
  margin-top: 0;
}

#lp_contents .scroll_area {
  display: flex;
  gap: calc(58 * (var(--rate)));
  margin-top: calc(230 * (var(--rate)));
}

#lp_contents .scroll_item_img {
  width: calc(500 * (var(--rate)));
}

#lp_contents .scroll_arrow_blk {
  position: relative;
  height: calc(330 * (var(--rate)));
  margin-top: calc(175 * (var(--rate)));
}

#lp_contents .scroll_arrow_blk:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(2 * (var(--rate)));
  height: 100%;
  background-color: var(--color_pink01);
  animation: arrow 3s infinite;
  transform-origin: center right;
  content: "";
}

@keyframes arrow {
  0% {
    scale: 1 1;
    transform-origin: center bottom;
  }
  49% {
    scale: 1 0;
    transform-origin: center bottom;
  }
  50% {
    transform-origin: center top;
  }
  51% {
    scale: 1 0;
    transform-origin: center top;
  }
  100% {
    scale: 1 1;
    transform-origin: center top;
  }
}

#lp_contents .scroll_arrow {
  position: absolute;
  right: calc(-26 * (var(--rate)));
  bottom: calc(-1 * (var(--rate)));
  width: calc(26 * (var(--rate)));
}

#lp_contents .scroll_text {
  position: absolute;
  top: 0;
  right: calc(-80 * (var(--rate)));
  font-family: var(--font-lp_eng02);
  font-size: calc(44 * (var(--rate)));
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--color_pink01);
  letter-spacing: 0;
}

/*============================
Look
============================*/
#lp_contents .look_block {
  margin-top: calc(250 * (var(--rate)));
}

#lp_contents .look_visual_area {
  position: relative;
  z-index: 5;
}

#lp_contents .look_visual_text {
  position: absolute;
  top: calc(203 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

#lp_contents .look_block h2 {
  width: calc(780 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .look_visual_subtitle {
  margin-top: calc(40 * (var(--rate)));
  font-family: var(--font-lp_jpn);
  font-size: calc(28 * (var(--rate)));
  color: var(--color_pink01);
  line-height: 1.5;
}

#lp_contents .look_block .look_visual_catch {
  margin-top: calc(30 * (var(--rate)));
  font-family: var(--font-lp_jpn);
  font-size: calc(50 * (var(--rate)));
  letter-spacing: 0.1em;
  color: var(--color_pink01);
  text-align: center;
}

#lp_contents .product_area {
  position: relative;
  margin-top: calc(130 * (var(--rate)));
  z-index: 3;
}

#lp_contents .product_area::before,
#lp_contents .product_area::after {
  position: absolute;
  top: calc(-310 * (var(--rate)));
  display: block;
  width: calc(2 * (var(--rate)));
  height: calc(3000 * (var(--rate)));
  background: url(../img/decor_line.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 0;
}

@-moz-document url-prefix() {
  #lp_contents .product_area::before,
  #lp_contents .product_area::after {
    background-position-y: calc(-210 * (var(--rate)));

}
}

#lp_contents .product_area::before {
  left: calc(20 * (var(--rate)));
}

#lp_contents .product_area::after {
  right: calc(20 * (var(--rate)));
}

#lp_contents .product_catch {
  font-family: var(--font-lp_jpn);
  font-size: calc(46 * (var(--rate)));
  letter-spacing: 0.1em;
  color: var(--color_pink01);
  text-align: center;
}

#lp_contents .product_img {
  width: calc(380 * (var(--rate)));
  margin: calc(55 * (var(--rate))) auto 0;
}

#lp_contents .product_name {
  font-size: calc(26 * (var(--rate)));
  margin-top: calc(55 * (var(--rate)));
  color: var(--color_pink01);
  letter-spacing: 0.05em;
}

#lp_contents .product_detail {
  width: calc(620 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
  color: var(--color_gray01);
  text-align: left;
}

#lp_contents .other_product_area {
  position: relative;
  margin-top: calc(100 * (var(--rate)));
}

#lp_contents .other_product_area h4 {
  font-family: var(--font-lp_eng02);
  font-size: calc(50 * (var(--rate)));
  color: var(--color_pink01);
  letter-spacing: 0;
}

#lp_contents .other_product_list {
  margin-top: calc(50 * (var(--rate)));
}

#lp_contents .other_product_list li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(55 * (var(--rate))) auto 0;
  width: calc(620 * (var(--rate)));
  gap: calc(60 * (var(--rate)));
}

#lp_contents .other_product_list li:first-of-type {
  margin-top: 0;
}

#lp_contents .other_product_img {
  width: calc(200 * (var(--rate)));
}

#lp_contents .other_product_text {
  width: calc(360 * (var(--rate)));
}

#lp_contents .other_product_name {
  font-size: calc(26 * (var(--rate)));
  text-align: left;
  line-height: 2;
}

#lp_contents .other_product_detail {
  margin-top: calc(20 * (var(--rate)));
  color: var(--color_gray01);
  text-align: left;
}

#lp_contents .visual_area02 {
  margin-top: calc(135 * (var(--rate)));
}

#lp_contents .use_area {
  margin-top: calc(130 * (var(--rate)));
}

#lp_contents .use_area h3 {
  font-family: var(--font-lp_eng02);
  font-size: calc(68 * (var(--rate)));
  color: var(--color_pink01);
  letter-spacing: 0;
}

#lp_contents .use_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(30 * (var(--rate)));
  row-gap: calc(35 * (var(--rate)));
  width: calc(670 * (var(--rate)));
  margin: calc(80 * (var(--rate))) auto 0;
}

#lp_contents .use_item_img {
  width: calc(200 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .use_item_name {
  margin-top: calc(18 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  line-height: 1.4;
}

#lp_contents .accordion {
  position: relative;
  margin-top: calc(106 * (var(--rate)));
}

#lp_contents .accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .8s;
}

#lp_contents .open > .accordion_wrap {
  grid-template-rows: 1fr;
}

#lp_contents .accordion_inner {
  position: relative;
  padding-bottom: calc(110 * (var(--rate)));
  min-height: calc(215 * (var(--rate)));
  overflow: hidden;
}

#lp_contents .accordion_inner::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(300 * (var(--rate)));
  background: linear-gradient(transparent, var(--color_black));
  content: "";
  z-index: 3;
}

#lp_contents .open .accordion_inner::before {
  display: none;
}

#lp_contents .accordion_btn_area {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: calc(-60 * (var(--rate)));
  z-index: 5;
}

#lp_contents .accordion_btn {
  position: relative;
  width: calc(750 * (var(--rate)));
  margin: 0 auto;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

#lp_contents .accordion_btn span {
  position: absolute;
  left: 50%;
  bottom: calc(60 * (var(--rate)));
  transform: translateX(-50%);
  font-family: var(--font-lp_eng01);
  font-size: calc(30 * (var(--rate)));
  color: var(--color_pink01);
}

#lp_contents .open .accordion_btn span {
  bottom: calc(0 * (var(--rate)));
}

#lp_contents .accordion_btn span:before,
#lp_contents .accordion_btn span:after {
  position: absolute;
  top: 50%;
  left: calc(-28 * (var(--rate)));
  display: block;
  width: calc(20 * (var(--rate)));
  height: calc(2.5 * (var(--rate)));
  background-color: var(--color_pink01);
  transform: translateX(-50%) rotate(0deg);
  content: "";
}

#lp_contents .accordion_btn span:after {
  transform: translateX(-50%) rotate(90deg);
}

#lp_contents .open .accordion_btn .to_close:after {
  transform: translateX(-50%) rotate(0deg);
}

#lp_contents .accordion_btn .to_open,
#lp_contents .open .accordion_btn .to_close {
  display: block;
}

#lp_contents .accordion_btn .to_close,
#lp_contents .open .accordion_btn .to_open {
  display: none;
}

#lp_contents .look_step {
  width: calc(706 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .look_step li {
  margin-top: calc(34 * (var(--rate)));
  color: var(--color_gray01);
  font-size: calc(26 * (var(--rate)));
  text-align: left;
  line-height: 2;
  letter-spacing: 0.05em;
}

#lp_contents .look_step li:first-of-type {
  margin-top: 0;
}

#lp_contents .look_step li a {
  display: inline;
}

/* look2 */
#lp_contents .look02 .look_visual_subtitle,
#lp_contents .look02 .look_visual_catch {
  color: var(--color_pink02);
}

/*============================
Btn
============================*/
#lp_contents .btn_all_wrap {
  padding-top: calc(200 * (var(--rate)));
}

#lp_contents .btn_all {
  width: calc(780 * (var(--rate)));
  margin: 0 auto;
}

/*============================
Artist
============================*/
#lp_contents .artist {
  padding: calc(200 * (var(--rate))) 0;
}

#lp_contents .artist_img {
  width: calc(460 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .artist_name {
  margin-top: calc(30 * (var(--rate)));
  font-family: var(--font-lp_eng02);
  font-size: calc(60 * (var(--rate)));
  color: var(--color_pink01);
  letter-spacing: 0;
}

#lp_contents .artist_instagram a {
  display: flex;
  gap: calc(22 * (var(--rate)));
  width: calc(258 * (var(--rate)));
  justify-content: center;
  margin: 0 auto;
  text-decoration: none;
}

#lp_contents .artist_instagram img {
  width: calc(40 * (var(--rate)));
}

#lp_contents .artist_instagram span {
  display: block;
  font-size: calc(30 * (var(--rate)));
  text-align: left;
  color: var(--color_pink01);
}

#lp_contents .artist_profile {
  width: calc(620 * (var(--rate)));
  margin: calc(36 * (var(--rate))) auto 0;
  font-size: calc(26 * (var(--rate)));
  line-height: 2;
  text-align: left;
  color: var(--color_gray01);
}


/*--------------------------------
            Layout  PC
--------------------------------*/
@media screen and (min-width: 768px){

  #lp_contents .grid_area{
    display: grid;
    grid-template-columns: 1fr 46.8rem 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  #lp_contents .grid_area .full_area {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    place-items: center;
    pointer-events: all;
    height: 100vh;
  }

  #lp_contents .left_area {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
    align-items: center;
  }

  #lp_contents .left_area a {
    width: 33rem;
    margin: 0 auto;
  }

  #lp_contents .lp_inner {
    grid-column: 2;
    width: 46.8rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }

  #lp_contents .right_area{
    top: 0;
    grid-column: 3;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

  #lp_contents .pc_nav li {
    width: 14rem;
    margin-top: 5rem;
  }

  #lp_contents .pc_nav li:first-of-type {
    margin-top: 0;
  }

  #lp_contents .pc_nav li a {
    position: relative;
    width: 14rem;
  }

  #lp_contents .pc_nav li a:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.4rem;
    width: 100%;
    height: 0.1rem;
    background: var(--color_pink01);
    transform: scale(0, 1);
    transform-origin: left;
    transition: 0.4s;
  }

  #lp_contents .pc_nav li a:hover:before {
    transform: scale(1);
  }

  #lp_contents .campaign_title {
    margin-top: 4.5rem;
    font-family: var(--font-lp_eng01);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color_pink01);
  }

}


/*--------------------------------
            Responsive
 --------------------------------*/

@media screen and (max-width: 1400px){
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}



/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

  html {
    font-size: calc(10 * (100vw / 468));
  }

  .page-share-btn{
    height: 0;
  }

  #share{
    z-index: 100 !important;
    bottom: calc(200 * (100vw / 780)) !important;
  }

  #FooterWrap {
    margin-top: -7rem;
  }

  #lp_contents .sp_only{display: block;}
  #lp_contents .pc_only{display: none;}
  #lp_contents a:hover{opacity: 1}


  #lp_contents .sp_nav {
    display: flex;
    position: fixed;
    transform: translateX(-50%) translateY(100%);
    visibility: hidden;
    bottom: 0;
    left:50%;
    width: 100%;
    z-index: -2;
    background-color: var(--color_black);
  }
  #lp_contents .sp_nav.hidden {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    z-index: 100;
  }
  #lp_contents .sp_nav.visible {
    transition: all 0.6s 0.2s ease;
    transform: translateX(-50%) translateY(100%);
    z-index: -2;
  }

  #lp_contents .sp_nav ul {
    display: flex;
    border-top: var(--color_gray01) solid calc(2 * (var(--rate)));
    width: 100%;
    height: calc(120 * (var(--rate)));
  }

  #lp_contents .sp_nav ul li {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #lp_contents .sp_nav ul li {
    border-right: var(--color_gray01) solid calc(2 * (var(--rate)));
  }

  #lp_contents .sp_nav ul li:last-of-type {
    border-right: none;
  }

  #lp_contents .sp_nav ul li a {
    font-family: var(--font-lp_eng02);
    font-size: calc(50 * (var(--rate)));
    font-weight: 500;
    color: var(--color_pink01);
    text-decoration: none;
  }

}