@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  font-size: 62.5%;
  width: 100%;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

body {
  background-color: #fff;
  color: #5A5A5A;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}

main {
  display: block;
  width: 100%;
  z-index: 1;
  overflow-x: hidden;
}

ul,
li {
  list-style-type: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #5A5A5A;
  transition: opacity .6s ease;
}

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

.sp-only {
  display: none!important;
}

.en {
  font-family: "Montserrat", sans-serif;
}

/* header --------------------------------------------*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.8);
}

.kv-width {
  max-width: 1840px;
  padding: 0 20px;
  margin: 0 auto;
}

.page-width {
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
}

.header-logo {
  z-index: 2;
  max-width: 31px;
  width: 100%;
}

.header-nav {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1.7rem 0;
}

.nav-pc {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.item-parent {
  position: relative;
}

.nav-flex {
  border-left: 1px solid #D1D1D1;
  padding-left: 4rem;
  display: flex;
  gap: 4rem;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.link-parent,
.nav-link {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  transition: all 0.3s ease;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .header-arrow:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin-left: 1.2rem;
    background-image: url(../images/arrow-bottom.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s;
    z-index: 1;
  }

  .item-parent:hover .header-arrow:after {
    transform: rotateX(180deg);
  }

  .dropdown-wrapper {
    display: block !important;
    position: absolute;
    top: calc(100% - 10px);
    left: 0;
    z-index: 2;
    width: 323px;
    visibility: hidden;
    opacity: 0;
  }

  .dropdown-wrapper.show {
    top: 100%;
    visibility: visible;
    opacity: 1;
    transition: ease-out, 0.4s ease-out, opacity 0.4s ease-out;
  }
}

.dropdown-inner {
  padding: 1.7rem;
  display: flex;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.9);
}

.dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dropdown-item a {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  display: block;
}

.header-logo a:hover,
.nav-link:hover,
.header-link:hover,
.dropdown-item a:hover {
  opacity: .7;
}

.hamburger,
.nav-sp {
  display: none;
}

/* kv -------------------------------------------------*/
.kv {
  position: relative;
}

.kv-back {
  width: 100%;
  height: 100vh;
  max-height: 1080px;
  min-height: 750px;
  position: relative;
}

.kv-back::before {
  /*background-color: rgba(0, 0, 0, 0.1);*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  z-index: 1;
}

.kv-back video,
.kv-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.kv-content {
  position: absolute;
  left: 0;
  top: 28%;
  width: 100%;
  z-index: 10;
}

.kv-info {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.kv-ttl {
  font-size: 3.6rem;
  font-weight: 300;
  text-shadow: 0px 0px 16px rgba(0, 0, 0, 1), -10px -10px 20px rgba(100, 116, 139, 0.4);
  color: #fff;
  line-height: 1.86;
  letter-spacing: 0.1em;
}

.kv-flex {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.kv-flex-txt {
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 1.7rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 1rem 3rem;
  min-width: 190px;
  text-align: center;
}

.kv-flex-img {
  width: 20px;
  height: 20px;
}

.kv-flex-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.kv-txt {
  font-size: 2.1rem;
  font-weight: 300;
  text-shadow: 0px 0px 16px rgba(0, 0, 0, 1), -10px -10px 20px rgba(100, 116, 139, 0.4);
  color: #fff;
  letter-spacing: 0.1em;
}

.kv-topics {
  position: absolute;
  width: 100%;
  bottom: 2.7rem;
  left: 0;
  z-index: 10;
}

.kv-topics-ttl {
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 1.2rem;
}

.kv-topics-list {
  display: flex;
  gap: 2rem;
  max-width: 580px;
}

.kv-topics-item a {
  display: flex;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.5);
  border: solid 1px #A3A3A3;
  padding: 1.2rem;
  min-width: 280px;
}

.kv-topics-item a:hover {
  opacity: .7;
}

.kv-topics-info .head {
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 1rem;
}

.kv-topics-info .txt {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1em;
}

.kv-topics-info .ttl {
  font-size: 1.2rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.66;
  letter-spacing: 0.1em;
}

.kv-topics-info .ttl .large {
  font-size: 1.8rem;
}

.kv-topics-img {
  width: 93px;
}

.kv-topics-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.kv-topics-slider .slick-track {
    margin-left: 0;
}
.kv-topics-slider .slick-list {
  margin: 0 -10px;
}
.kv-topics-slider .slick-slide {
  margin: 0 10px;
}
.topics-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 20px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
}
.topics-next::before,
.topics-next::after,
.topics-prev::before,
.topics-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.topics-next::after,
.topics-prev::after {
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.topics-next {
  right: -25px;
}
.topics-next::after {
  right: 0;
  transform: rotate(45deg);
}
.topics-prev {
  left: -25px;
}
.topics-prev::after {
  left:0;
  transform: rotate(-135deg);
}
/*  ranking-------------------------------------------------*/
.ranking{
  background-image: url(../images/bg-ranking.jpg);
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.ranking-inner{
  text-align: center;
  padding:10rem 0;
}
.ranking-head{
  font-size:2.4rem;
  font-weight: 500;
  color:#CC7466;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 2rem;
}
.ranking-ttl{
    font-size:2.6rem;
  font-weight: 400;
  color:#fff;
  letter-spacing: 0.01em;
  line-height: 1;
}
.ranking-num{
  font-family: "Noto Serif JP", serif;
    font-size:8.7rem;
  font-weight: 500;
  color:#fff;
  letter-spacing: 0.1em;
  line-height: 1;
}
.ranking-num .large{
  font-size: 12.4rem;
}
.ranking-txt{
    font-size:2.4rem;
  font-weight: 400;
  color:#fff;
  letter-spacing: 0.01em;
  margin-top:1rem;
}
/*  before and after-------------------------------------------------*/
.baa{
  background-color: #EFEFEF;
  padding:10rem 0 17.7rem;
}
.section-ttl{
  margin-bottom:10rem;
}
.main-ttl{
  font-size: 6rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.sub-ttl{
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.2;
  margin-top:2rem;
}
.baa-flex{
  display: flex;
  gap:6%;
}
.baa-info{
  width:33%;
}
.baa-img{
  width:61%;
  display: flex;
  gap:11.2rem;
  position:relative;
  height: fit-content;
}
.baa-img:after{
  position:absolute;
      content: "";
    display: inline-block;
    width: 55px;
    height: 55px;
    background-image: url(../images/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.baa-box{
  width:calc((100% - 11.2rem)/2);
  position:relative;
}
.baa-circle{
  width:90px;
  height:90px;
  line-height: 90px;
  color:#fff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  display: block;
  z-index: 10;
  position:absolute;
  top:0;
  left:-20px;
}
.baa-circle.before{
  background-color: #5A5A5A;
}
.baa-circle.after{
  background-color: #EB9A92;
}
.video-inner{
  border-radius: 999px 999px 0 0;
  overflow-y: hidden;
}
.baa-box img,
.baa-box video{
  width: 100%;
  height:100%;
  display:block;
}


.content-ttl{
    font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.68;
}
.content-txt{
      font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2;
  margin-top:2.4rem;
}
.attention{
        font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.66;
  margin-top:2.4rem;
}
.trial-flex{
  display:flex;
  flex-direction: column;
  gap:7.3rem;
  margin-top:16.9rem;
}
.trial-slider{
  display: flex;
  gap:3rem;
}
.trial-img{
  width:calc((100% - 9rem)/4);
  position:relative;
}
.trial-img:after{
  position:absolute;
      content: "";
    display: inline-block;
    width: 42px;
    height: 42px;
    background-image: url(../images/arrow-pink.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    top:50%;
    left:-25px;
    transform: translateY(-50%);
}
.trial-img:first-child:after{
content: none;
}

.trial-ttl{
  font-size:2.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom:1.6rem;
}
.trial-txt{
  font-size:1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-top:1.6rem;
}
/*  concept-------------------------------------------------*/
.concept{
  padding:12rem 0 0 0;
}
.concept-flex{
  display:flex;
  gap:2.5%;
}
.concept-info{
  width:47.5%;
}
.concept-img{
  flex: 1;
  margin-right: calc(50% - 50vw);
}
.concept-img iframe{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  pointer-events: none;
}
.concept .section-ttl{
  margin-bottom:4.5rem;
}
.second-concept{
  background-image: url(../images/bg-concept.jpg);
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top:12rem;
    padding:11.6rem 0;
}
.concept-box{
  width:50%;
  margin:0 0 0 auto;
  background-color: #fff;
  padding:5.5rem 4.5rem 5rem;
}
.concept-ttl{
  font-size:3rem;
  font-weight: 400;
  line-height:1.8;
  letter-spacing: 0.1em;
  margin-bottom:2rem;
}
.concept-txt{
  font-size:1.6rem;
  font-weight: 400;
  line-height:1.8;
  letter-spacing: 0.05em;
}
/*  story-------------------------------------------------*/
.story{
  padding:12rem 0 13.2rem;
}
.heading-ttl{
   font-size:4rem;
  font-weight: 400;
  line-height:1.8;
  letter-spacing: 0.1em;
  margin-bottom:3.2rem; 
}
.heading-txt{
   font-size:2.2rem;
  font-weight: 400;
  line-height:2;
  letter-spacing: 0.05em;
}
.story-flex{
  display: flex;
  gap:7.2%;
  margin-top:9.5rem;
}
.story-img{
  width:26.8%;
}
.story-info{
  width:66%;
}
.story-img-txt{
  text-align: center;
      font-size:1.4rem;
  font-weight: 400;
  line-height:1.7;
  letter-spacing: 0.01em;
  margin-top:2.2rem; 
}
.story-info-ttl{
    font-size:2.6rem;
  font-weight: 400;
  line-height:1.57;
  letter-spacing: 0.1em;
  margin-bottom:3.2rem; 
}
.story-info-txt{
    font-size:1.8rem;
  font-weight: 400;
  line-height:2;
  letter-spacing: 0.05em;
}
/*  feature-------------------------------------------------*/
.feature-bg{
  background-image: url(../images/bg-feature.jpg);
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding:13.4rem 0 14.6rem;
}
.feature-bg .section-ttl{
    color:#fff;
  text-align: center;
  margin:0
}
.feature-main{
  background-color: #EFEFEF;
  padding-top:8.6rem ;
  position:relative;
}
.feature-main:after{
  content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right:0;
    bottom:0;
    display: block;
    width: 100vw;
    height: 5rem;
    background-color: #fff; 
  }
.feature-img{
  position: relative;
  padding-top:2rem;
  z-index: 10;
}

.feature-head{
  display: flex;
  gap:2rem;
  align-items: flex-end;
}
.feature-num{
  width:33%;
  max-width: 157px;
}
.feature-ttl{
     font-size:7rem;
  font-weight: 300;
  line-height:1;
  letter-spacing: 0.1em;
}
.feature-ttl .small{
     font-size:1.2rem;
  font-weight: 400;
  line-height:1;
  letter-spacing: 0.05em;
  vertical-align: top;
}
.feature-list{
  display: flex;
  flex-direction: column;
  gap:4rem;
  margin-top:3.8rem;
}
.feature-item-ttl{
   font-size:2.4rem;
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0.1em;
  color:#EB968D;
  margin-bottom: 1rem;
}
.feature-item-txt{
  font-size:1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.93;
}
.feature-item-txt .small{
font-size:1rem;
}
.parallax {
  position:absolute;
  z-index: 3;

}
.parallax-img{
will-change: transform;
  transition: transform 0.3s ease-out;
}
.parallax01 {
  top: -8%;
  right: 10%;
  max-width: 358px;
  min-width:97px ;
  width: 18.64%;
}
.parallax02 {
  top: 12%;
  right: 30%;
  max-width: 115px;
  min-width: 31px;
  width: 5.98%;
}
.parallax03 {
  bottom: 17%;
  left: 60px;
  max-width: 195px;
  min-width: 79px;
  width: 10.15%;
}
/*  ingredient-------------------------------------------------*/
.ingredient{
  padding:11.6rem 0 16.6rem;
}
.ingredient-flex{
  display: flex;
  gap:8.1%;
}
.ingredient-left{
  width:38.5%;
}
.ingredient-right{
  width:53.4%;
  display: flex;
  flex-direction: column;
  gap:4rem;
  max-width: 468px;
}
.ingredient-item{
  display: flex;
  gap:2.4rem;
}
.ingredient-item-img{
  width:12rem;
}
.ingredient-item-info{
  width:calc(100% - 14.4rem);
}
.ingredient-item h4{
     font-size:2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color:#EB968D;
  margin-bottom: 0.8rem;
}
.ingredient-item p{
  font-size:1.4rem;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.05em;
}
.ingredient-over{
  display: flex;
  gap:7.1%;
  margin-top:15rem;
}
.ingredient-over.reverse{
  display: flex;
  flex-direction: row-reverse;
}
.ingredient-img{
  flex:1;
  margin-left: calc(50% - 50vw);
}
.reverse .ingredient-img{
  margin-left: 0;
  margin-right: calc(50% - 50vw);
}
.ingredient-info{
  width:42.9%;
}
.ingredient-list{
  display: flex;
  flex-wrap: wrap;
  gap:5rem 3rem;
  margin-top:4rem;
}
.ingredient-list li{
  width:calc((100% - 3rem)/2);
}
.ingredient-list h4{
font-size:1.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color:#EB968D;
  margin-bottom: 0.8rem;
}
.ingredient-list p{
font-size:1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.78;
}
.ingredient .attention{
  margin-top:8rem;
}
.ingredient .attention .right{
text-align: right;
display: block;
}
/*  fragrance-------------------------------------------------*/
.fragrance{
  background-color: #EFEFEF;
  padding:9.4rem 0 10rem;
}
.fragrance-flex{
  display: flex;
  gap:5.6%;
}
.fragrance-info{
  width:42.8%;
}
.fragrance-img{
  width:51.6%;
  padding-top:2.6rem;
}
.fragrance-list{
  display: flex;
  gap:10.3%;
  margin-top:4.8rem;
}
.fragrance-item{
  width:calc((100% - 20.6%)/3);
}
.fragrance-head{
  font-size:1.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.72;
  color:#EB968D;
  margin-bottom: 1rem;
}
.fragrance-name{
  font-size:1.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.72;
  margin-bottom: 1rem;
}
.fragrance-txt{
  font-size:1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.78;
}
/*  how to use-------------------------------------------------*/
.htu{
  padding:10rem 0 8rem;  
}

.htu-flex {
  display: flex;
  gap: 3.5%;
}

.htu-info {
  width: 43.5%;
}
.htu-slider{
  width:56.5%;
  padding-top:2.3rem;
}
.htu-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.htu-head {
font-size:4.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  color:#EB968D;
  margin-bottom: 2.8rem;
}
.htu-img{
 padding:0 3.4rem;
}
.htu-ttl {
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin:2.8rem 0 1rem;
}
.htu-dots li {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}
.htu-dots li:hover,
.htu-dots li.slick-active{
    background: #5A5A5A;
}
.htu-dots li button  {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}
.htu-dots{
  display: flex;
  gap:1.6rem;
  justify-content: center;
  margin-top:3.3rem;
}
.htu-dots li {
    background: #EFEFEF;
    width:10px;
    height:10px;
}
.htu-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.htu-arrow {
  display: block;
  position: absolute;
  top: 36%;
  width: 68px;
  height: 68px;
  background-color: #D1D1D1;
  border-radius: 999px;
  z-index: 1;
  transition: opacity 0.5s;
}
.htu-next::before,
.htu-next::after,
.htu-prev::before,
.htu-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.htu-next::after,
.htu-prev::after {
  width: 18px;
  height: 18px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.htu-next {
  right: 0;
}
.htu-next::after {
  right: 28px;
  transform: rotate(45deg);
}
.htu-prev {
  left: 0;
}
.htu-prev::after {
  left:28px;
  transform: rotate(-135deg);
}
/*  topics-------------------------------------------------*/
.topics{
  background-color: #EFEFEF;
  padding:13rem 0 12rem;
}
.topics .heading-txt,
.user .heading-txt{
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}
.topics-content{
  display: flex;
  flex-direction: column;
  gap:5rem;
  margin-top:7.3rem;
}
.topics-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:4rem;
  background-color: #fff;
  padding:3rem 9rem 3rem 4.6rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  min-height: 374px;
}
.topics-ttl{
  font-size:2.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 3.2rem;
}
.quotation-txt{
  color:#EB968D;
    font-size:2.2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.7;
  padding-left:3rem;
  position:relative;
  margin:0.5rem 0;
}
.quotation-txt:after{
  position:absolute;
      content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/quotation.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    top:5px;
    left:0;
}
.topics-img{
  max-width: 287px;
}
.topics-half{
  display: flex;
  gap:4rem;
}
.topics-half.reverse{
  flex-direction: row-reverse;
}
.topics-half-box{
  width:calc((100% - 4rem)/2);
  padding:4rem 3.7rem 5.8rem;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.topics-half-img{
  width:calc((100% - 4rem)/2);
}
.topics-half-img img{
  width:100%;
  height:100%;
  object-fit: cover;
}
/*  user-------------------------------------------------*/
.user{
  background-color: #DDDDDD;
  padding:15rem 0;
}
.user-list{
  display: flex;
  justify-content: center;
  gap:3rem;
  max-width: 898px;
  margin:7rem auto 0;
}
.user-item{
  width:calc((100% - 12rem)/5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:0 1.5rem 2.4rem;
  cursor: pointer;
}
.user-item.current{
  border-bottom: 4px solid #EB968D;
}
.user-prof{
  font-size:1.4rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-top:1rem;
}
.user-slider{
  padding:0 3.4rem;
  margin-top:3.5rem;
}
.user-problem{
  font-size:1.2rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.user-box{
  padding:3.7rem 5rem 3.7rem 2.6rem;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  display: flex!important;
  align-items: center;
  gap:4.9%;
}
.user-img{
  width:41.6%;
}
.user-info{
  width:53.5%;
}
.user-ttl{
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom:0.5rem;
}
.user-txt{
  margin-top:1rem;
}
.user-arrow {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  height: 68px;
  background-color: #EB968D;
  border-radius: 999px;
  z-index: 1;
  transition: opacity 0.5s;
}
.user-next::before,
.user-next::after,
.user-prev::before,
.user-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.user-next::after,
.user-prev::after {
  width: 18px;
  height: 18px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.user-next {
  right: 0;
}
.user-next::after {
  right: 28px;
  transform: rotate(45deg);
}
.user-prev {
  left: 0;
}
.user-prev::after {
  left:28px;
  transform: rotate(-135deg);
}
.user-slider .slick-list {
  margin: 0 -10px;
}
.user-slider .slick-slide {
  margin: 10px 10px;
}
/*  influencer-------------------------------------------------*/
.influencer{
  padding:18rem 0 16rem;
}
.influencer-flex{
  display: flex;
  gap:4.6rem;
  margin-top:4.6rem;
}
.influencer-item{
  width:calc((100% - (4.6rem * 3))/4);
}
.influencer-txt{
  padding-left:2.3rem;
  color:#EB968D;
  font-size:1.6rem;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.05em;
  margin:1.5rem 0 1rem;
  position:relative;
}
.influencer-txt:after{
  position:absolute;
      content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/quotation.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    top:5px;
    left:0;
}
.influencer-name{
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
}
/*  line up-------------------------------------------------*/
.lineup{
  background-color: #EFEFEF;
  padding:16rem 0 22rem;
}
.lineup-list{
  display: flex;
  flex-wrap: wrap;
  gap:11rem 5.75%;
  margin-top:5.6rem;
}
.lineup-item{
  width:calc((100% - (5.75% * 2))/3);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.lineup-img{
  margin-bottom: 2.5rem;
}
.lineup-info{
  flex:1;
}
.lineup-detail{
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.lineup-txt{
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.87;
  margin-top: 1.5rem;
}
.lineup-ttl{
   font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.05em; 
}
.lineup-btn{
  margin-top:2.4rem;
}
.btn{
  display: inline-block;
  background-color: #EB968D;
  color:#fff;
  border-radius: 999px;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  padding:1.3rem 5.8rem;
}
.btn:hover{
  opacity:.7;
}
.ready-btn{
  background-color: #5A5A5A;
  cursor: not-allowed;
}
.ready-btn:hover{
  opacity:1;
}
.ready-txt{
    font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.87;
  margin-top: 1.5rem;
  text-align: center;
}
/*  links-------------------------------------------------*/
.links{
  padding:11rem 0 17rem;
}
.cta{
  margin:0 auto;
  max-width: 674px;
}
.cta a{
  display:block;
}
.cta a:hover,
.link-item a:hover{
  opacity: .7;
}
.link-list{
    margin:6.6rem auto 0;
  max-width: 674px;
  display: flex;
}
.link-item{
  width:calc(100% / 5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:1.5rem;
}
.link-item a{
  display: block;
  max-width:57px ;
}
.link-txt{
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
/*  float-------------------------------------------------*/
.float{
      position: fixed;
    bottom: 27px;
    right: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 10;
    max-width: 320px;
      cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 0.3s;
}
.float:hover{
  opacity:.7;
}
/*  page top-------------------------------------------------*/
.page-top {
  position: fixed;
  right: 20px;
  bottom: 27px;
  width: 75px;
  height: 75px;
  background:#73717B;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 0.3s;
}
.page-top:before{
  content: '';
  width: 25px;
  height: 25px;
  border: 0;
  border-top: solid 2px #C5978C;
  border-right: solid 2px #C5978C;

  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  margin: auto;
}
.float.is-show,
.page-top.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top:hover {
  opacity:.7;
}
/*  footer-------------------------------------------------*/
.footer {
  background-color: #E6B1A7;
  padding: 3.5rem 0;
}
.footer-copy {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
}

/*  sp-------------------------------------------------*/
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }

  .pc-only {
    display: none!important;
  }

  .sp-only {
    display: block!important;
  }

  .header,
  .header-inner {
    height: 52px;
  }

  .header-logo {
    max-width: 23px;
  }

  .nav-pc {
    display: none;
  }

  .hamburger {
    position: absolute;
    right: 20px;
    top: 0;
    text-align: center;
    display: inline-block;
    width: 52px;
    height: 52px;
    z-index: 2;
  }

  .hamburger span {
    position: absolute;
    transition: .3s;
  }

  .hamburger span:nth-child(1),
  .hamburger span:nth-child(2) {
    background: #fff;
    height: 1px;
    right: 0;
  }

  .hamburger span:nth-child(1) {
    width: 30px;
    top: 21px;
  }

  .hamburger span:nth-child(2) {
    width: 39px;
    top: 32px;
  }

  .hamburger.bgactive span:nth-child(1) {
    transform: rotate(25deg);
    width: 32px;
    top: 25px;
  }

  .hamburger.bgactive span:nth-child(2) {
    transform: rotate(-25deg);
    width: 32px;
    top: 25px;
  }

  .nav-sp {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100vh;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    z-index: 1;
    visibility: hidden;
    overflow-y: scroll;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.95);
  }

  .nav-sp.bgactive {
    opacity: 1;
    visibility: visible;
  }

  .nav-sp-flex {
    padding: 80px 20px 30px 20px;
  }

  .nav-list-sp {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    gap: 2.4rem;
  }

  .nav-item-sp {
    border-bottom: 1px solid #5A5A5A;
    padding-bottom: 2.4rem;
  }

  .link-parent {
    justify-content: space-between;
    align-items: center;

  }

  .item-parent .link-parent .toggle {
    width: 10px;
    height: 10px;
    background-image: url(../images/arrow-bottom.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s;
  }

  .item-parent .link-parent.open .toggle {
    transform: rotateX(180deg);

  }

  .dropdown-wrapper {
    display: none;
  }

  .child-link {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.4rem 0 0 2.4rem;
    transition: all 0.3s ease;
  }
/* kv -------------------------------------------------*/


/*.kv-back video, .kv-back img {
    height: 86%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/

.kv-back {
  max-height: 75vh;
  min-height: 550px;
}
.kv-content{
  top:22%;
}
.kv-info {
  gap:1.6rem;
}

.kv-ttl {
  font-size: 1.9rem;
}
.kv-flex{
  gap:1.5rem;
}
.kv-flex-txt{
    font-size: 1.3rem;
  padding:0.8rem 2rem;
  min-width: 145px;
}
.kv-flex-img{
  width: 15px;
  height: 15px;
}
.kv-txt {
  font-size: 1.4rem;
}
.kv-topics{
  bottom:1.8rem;
  left:50%;
  transform: translateX(-50%);
  padding:0 2rem;
}
.kv-topics-ttl{
    font-size: 1.4rem;
}
.kv-topics-list{
  display: flex;
  gap:2rem;
}
/*  ranking-------------------------------------------------*/
.ranking{
  background-image: url(../images/bg-ranking-sp.jpg);
}
.ranking-inner{
  padding:16rem 0;
}
.ranking-head{
  font-size:1.5rem;
  margin-bottom: 1.2rem;
}
.ranking-ttl{
    font-size:1.6rem;
}
.ranking-num{
    font-size:5.5rem;
}
.ranking-num .large{
  font-size: 7.9rem;
}
.ranking-txt{
    font-size:1.5rem;
}
/*  before and after-------------------------------------------------*/
.baa{
  padding:3.8rem 0 5.8rem;
}
.section-ttl{
  margin-bottom:3.4rem;
}
.main-ttl{
  font-size: 3rem;
}
.sub-ttl{
  font-size: 1.4rem;
  margin-top:0.5rem;
}
.baa-flex{
  flex-direction: column-reverse;
  gap:3rem;
}
.baa-info{
  width:100%;
}
.baa-img{
  width:100%;
  gap:5.3rem;
}
.baa-img:after{
    width: 25px;
    height: 25px;
}
.baa-box{
  width:calc((100% - 5.3rem)/2);
}
.baa-circle{
  width:42px;
  height:42px;
  line-height: 42px;
  font-size: 1rem;
  left:-10px;
}
.content-ttl{
    font-size: 2rem;
}
.content-txt{
      font-size: 1.4rem;
  margin-top:1.2rem;
}
.attention{
        font-size: 1rem;
  margin-top:1.2rem;
}
.trial-flex{
  flex-direction: column-reverse;
  gap:2.5rem;
  margin-top:5.4rem;
}
.trial-slider{
  flex-wrap: wrap;
  gap:2rem;
  padding:0 3.5rem;
}
.trial-img{
  width:calc((100% - 2rem)/2);
}
.trial-img:after{
    width: 18px;
    height: 18px;
    left:auto;
    right:-23px;
}
.trial-img:first-child:after{
content: "";
}

.trial-img:nth-child(3n):after{
  display: none;
}

.trial-img:nth-child(4n):after{
  left:-13px;
  right:auto;
}
.trial-ttl{
  font-size:2rem;
  margin-bottom:1.2rem;
}
.trial-txt{
   font-size:1rem;
  margin-top:1.2rem;
}
/*  concept-------------------------------------------------*/
.concept{
  padding:4.4rem 0 0 0;
}
.concept-flex{
  flex-direction: column;
  gap:4.4rem;
}
.concept-info{
  width:100%;
}
.concept-img{
  flex: 1;
  margin-right: -20px;
  margin-left: -20px;
}
.concept .section-ttl{
  margin-bottom:3.4rem;
}
.second-concept{
    margin-top:5rem;
    padding:10rem 0;
}
.concept-box{
  width:100%;
  padding:3rem 1.8rem 4rem;
}
.concept-ttl{
  font-size:1.7rem;
  margin-bottom:1.9rem;
}
.concept-txt{
  font-size:1.2rem;
}
/*  story-------------------------------------------------*/
.story{
  padding:6rem 0 5.6rem;
}
.heading-ttl{
   font-size:2rem;
  margin-bottom:1.6rem; 
}
.heading-txt{
   font-size:1.4rem;
}
.story-flex{
  flex-direction: column;
  align-items: center;
  gap:3rem;
  margin-top:3rem;
}
.story-img{
  width:67.7%;
}
.story-info{
  width:100%;
}
.story-img-txt{
      font-size:1.2rem;
  margin-top:2rem; 
}
.story-info-ttl{
    font-size:2rem;
  margin-bottom:1.6rem; 
}
.story-info-txt{
    font-size:1.4rem;
}
/*  feature-------------------------------------------------*/
.feature-bg{
    padding:7.6rem 0 8.2rem;
}
.feature-main{
  padding-top:3.6rem;
}
.feature-main:after{
    height: 2rem;
  }
.feature-head{
  display: flex;
  gap:2rem;
  align-items: flex-end;
}
.feature-num{
  width:68px;
}
.feature-ttl{
     font-size:2.8rem;
}
.feature-ttl .small{
     font-size:0.8rem;
}
.feature-list{
  gap:2.2rem;
  margin-top:1.3rem;
}
.feature-item-ttl{
   font-size:1.6rem;
  margin-bottom: 0.7rem;
}
.feature-item-txt{
  font-size:1.2rem;
}
.parallax01 {
  top: -8%;
  right: -1%;
}
.parallax02 {
  top: -2%;
  right: 25%;
}
.parallax03 {
  bottom: 0;
  left: 0;
}
/*  ingredient-------------------------------------------------*/
.ingredient{
  padding:5rem 0 9.6rem;
}
.ingredient-flex{
  flex-direction: column;
  gap:5.7rem;
}
.ingredient-left{
  width:100%;
}
.ingredient-right{
  width:100%;
  gap:3.2rem;
}
.ingredient-item{
  gap:1.1rem;
}
.ingredient-item-img{
  width:10rem;
}
.ingredient-item-info{
  width:calc(100% - 11.1rem);
}
.ingredient-item h4{
     font-size:1.6rem;
  margin-bottom: 0.5rem;
}
.ingredient-item p{
  font-size:1.2rem;
}
.ingredient-over{
  flex-direction: column;
  gap:4.5rem;
  margin-top:6rem;
}
.ingredient-over.reverse{
  flex-direction: column;
}
.ingredient-img{
  margin-left: -20px;
  margin-right: -20px;
}
.reverse .ingredient-img{
  margin-left: -20px;
  margin-right: -20px;
}
.ingredient-info{
  width:100%;
}
.ingredient-list{
  gap:3.7rem 2.3rem;
  margin-top:2.2rem;
}
.ingredient-list li{
  width:calc((100% - 2.3rem)/2);
}
.ingredient-list h4{
font-size:1.6rem;
}
.ingredient-list p{
font-size:1.2rem;
}
.ingredient .attention{
  margin-top:6.4rem;
}
/*  fragrance-------------------------------------------------*/
.fragrance{
  padding:6.7rem 0 10rem;
}
.fragrance-flex{
  flex-direction: column;
  gap:2.8rem;
}
.fragrance-info{
  width:100%;
}
.fragrance-img{
  width:100%;
  padding-top:0;
}
.fragrance-list{
  flex-direction: column;
  gap:2.8rem;
  margin-top:5.3rem;
}
.fragrance-item{
  width:100%;
}
.fragrance-head{
  margin-bottom: 0.5rem;
}
.fragrance-name{
  font-size:1.6rem;
  margin-bottom: 0.5rem;
}
.fragrance-txt{
  font-size:1.2rem;
}
/*  how to use-------------------------------------------------*/
.htu{
  padding:5rem 0 ;  
}

.htu-flex {
  flex-direction: column;
  gap: 2.2rem;
}

.htu-info {
  width: 100%;
}
.htu-slider{
  width:100%;
  padding-top:0;
}
.htu-head {
font-size:2.4rem;
  margin-bottom: 1.6rem;
}
.htu-img{
 padding:0 1.7rem;
}
.htu-ttl {
  font-size: 1.6rem;
  margin:1.6rem 0 0.5rem;
}
.htu-dots li {
    width: 7px;
    height: 7px;
}
.htu-dots{
  margin-top:2.6rem;
}
.htu-arrow {
  top: 26%;
  width: 34px;
  height: 34px;
}
.htu-next::after,
.htu-prev::after {
  width: 8px;
  height: 8px;
}

.htu-next::after {
  right: 13px;
}
.htu-prev::after {
  left:13px;
}
/*  topics-------------------------------------------------*/
.topics{
  padding:6rem 0;
}
.topics .heading-txt,
.user .heading-txt{
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.topics-content{
  gap:3.5rem;
  margin-top:4.1rem;
}
.topics-box{
  flex-direction: column;
  align-items: flex-start;
  gap:2rem;
  padding:3.3rem 2.3rem 4.2rem;
  min-height: none;
}
.topics-ttl{
  font-size:1.8rem;
  margin-bottom: 1.8rem;
}
.quotation-txt{
    font-size:1.4rem;
  padding-left:2.1rem;
}
.quotation-txt:after{
    width: 14px;
    height: 14px;
    top:3px;
}
.topics-img{
  margin:0 auto;
  text-align: center;
}
.topics-half{
  flex-direction: column;
}
.topics-half.reverse{
  flex-direction: column-reverse;
}
.topics-half-box{
  width:100%;
padding:3.3rem 2.3rem 4.2rem;
}
.topics-half-img{
  width:100%;
}
/*  user-------------------------------------------------*/
.user{
  padding:6rem 0 9rem;
}
.user-list{
  gap:1.2rem;
  margin:4.6rem auto 0;
}
.user-item{
  width:calc((100% - 4.8rem)/5);
  padding:0 0 1rem;
}
.user-slider{
  padding:0;
  margin-top:4.7rem;
}
.user-box{
  padding:2.4rem 2rem 4rem;
  flex-direction: column;
  gap:1.2rem;
}
.user-img{
  width:100%;
}
.user-info{
  width:100%;
}
.user-ttl{
  font-size: 1.8rem;
}
.user-arrow {
  width: 40px;
  height: 40px;
}
.user-next::after,
.user-prev::after {
  width: 9px;
  height: 9px;
}

.user-next {
  right: -20px;
}
.user-next::after {
  right: 18px;
}
.user-prev {
  left: -20px;
}
.user-prev::after {
  left:18px;
}
/*  influencer-------------------------------------------------*/
.influencer{
  padding:6rem 0 8rem;
}
.influencer-flex{
  flex-wrap: wrap;
  gap:3.2rem;
  margin-top:3.2rem;
}
.influencer-item{
  width:calc((100% - 3.2rem)/2);
}
.influencer-txt{
  padding-left:1.8rem;
  font-size:1.2rem;
  margin:1rem 0 1.5rem;
}
.influencer-txt:after{
    width: 12px;
    height: 12px;
    top:3px;
}
.influencer-name{
  font-size: 1rem;
}
/*  line up-------------------------------------------------*/
.lineup{
  padding:6rem 0 8rem;
}
.lineup-list{
  flex-direction: column;
  gap:4.4rem;
  margin-top:3.6rem;
}
.lineup-item{
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: left;
  gap:3.5%;
}
.lineup-img{
  margin-bottom: 0;
  width:46.2%;
}
.lineup-info{
  flex:auto;
  width:50.3%;
}
.lineup-detail{
  font-size: 1rem;
}
.lineup-txt{
  font-size: 1.2rem;
  margin-top: 0.5rem;
}
.lineup-ttl{
   font-size: 1.6rem;
}
.lineup-btn{
  margin-top:3.2rem;
}
/*  links-------------------------------------------------*/
.links{
  padding:6rem 0 12rem;
}

.link-list{
    margin:3.4rem auto 0;
    gap:2.8rem;
}
.link-item{
  width:calc((100% - (2.8rem*4))/ 5);
}
/*  float-------------------------------------------------*/
.float{
    bottom: 20px;
    right: 100px;
    max-width: 258px;
}
/*  page top-------------------------------------------------*/
.page-top {
  bottom: 20px;
  width: 60px;
  height: 60px;
}
.page-top:before{
  width: 20px;
  height: 20px;
  top: 27px;
}
}