@charset "UTF-8";
:root {
  --white: #fff;
  --black: #000;
  --text-main: #171818;
  --bg-main: #fff;
  --line-color: #000;
  --font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic, "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
  --font-en: "big-caslon-fb", serif;
  --font-Acumin: "acumin-pro", sans-serif;
  --pc-width: 1400;
  --tb-width: 768;
  --sp-width: 750;
}

/*----------共通設定 pc----------*/
* {
  font-feature-settings: "palt";
}

* > #st240508BASIC {
  font-family: var(--font);
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 62.5%;
}

/*----------共通設定 tablet----------*/
@media only screen and (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/*----------共通設定 sp----------*/
@media only screen and (max-width: 767px) {
  html {
    font-size: 1.3333333333vw;
  }
  .main-area .main-inner {
    width: 100%;
    max-width: calc(750 * (100vw/750));
    padding: 0;
  }
}
/*----------LP normalize SP----------*/
#st240508BASIC {
  font-family: var(--font);
}
#st240508BASIC * {
  box-sizing: border-box;
}
#st240508BASIC img {
  height: auto;
  opacity: 1;
  width: 100%;
}
#st240508BASIC a {
  text-decoration: none;
}
#st240508BASIC p, #st240508BASIC ul, #st240508BASICol, #st240508BASICdl {
  margin: 0;
  list-style: none;
}
@media only screen and (max-width: 767px) {
  #st240508BASIC .section__inner {
    max-width: 100%;
  }
  #st240508BASIC .pc_only {
    display: none;
  }
  #st240508BASIC .sp_only {
    display: block;
  }
}

/*----------LP normalize PC----------*/
@media only screen and (min-width: 768px) {
  #Wrap {
    width: 100% !important;
  }
  .main-area .main-inner {
    max-width: unset;
    width: 100%;
  }
  .lp__contener .pc_only {
    display: block;
  }
  .lp__contener .sp_only {
    display: none;
  }
  .lp__contener .section__inner {
    margin: 0 auto;
  }
  .main-area {
    padding-top: 9.5rem;
  }
}
/*----------アニメーション----------*/
._fadeup {
  opacity: 0;
  transition: ease-in, opacity 2800ms, transform 1000ms;
  transform: translateY(20px);
}

._fadeup.fade-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.content_wrap ._fadeup:nth-child(1) {
  transition: ease-in, opacity 2800ms, transform 1000ms;
}
.content_wrap ._fadeup:nth-child(2) {
  transition: ease-in, opacity 2800ms 0.2s, transform 1000ms;
}

._fadein {
  opacity: 0;
  transition: 0.6s ease-in-out;
}

._fadein.fade-active {
  opacity: 1;
}

._fadein.fade-active img {
  animation: animationZoom1 1.2s ease-in-out forwards;
}

@keyframes animationZoom1 {
  0% {
    transform:scale(0.95)
  }
  100% { 
    transform:scale(1)
  } 
}

.title__deco::after {
  width: 0;
  transition: width 0.8s;
  transform: scale(0, 1);
}
.title__deco.fade-active::after {
  width: 82.5rem;
  transform: scale(1, 1);
}

._fadeup_slow {
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transform: translateY(50px);
}

._fadeup_slow.fade-active {
  opacity: 1;
  transform: translateY(0rem);
}

.fadein-load {
  opacity: 0;
  /* transition: opacity, 1s; */
}

.fadein-load.fade-active {
  opacity: 0;
}

.zoom-load {
  position: relative;
  transform: scale(1.1);
  transition: all 0.8s ease;
  opacity: 0;
}

.zoom-load.fade-active {
  transform: scale(1);
  opacity: 1;
}

._zoom picture {
  position: relative;
  transform: scale(1.1);
  transition: all 0.8s ease;
  opacity: 0;
}

._zoom.fade-active picture {
  transform: scale(1);
  opacity: 1;
}

/*** アニメーション ***/

.typingAnime02 span {
  opacity: 0;
  transition: all 2s;
}

.typingAnime02.fade-active span {
  opacity: 1;
}

.textAnime {
  visibility: hidden;
  transition: 0.001s linear;
}

.textAnime.fade-active {
  visibility: visible;
}

._logoup {
  opacity: 0;
  transition: ease-in-out 2s 1.4s;
  /* transform: translateY(20%); */
}

._logoup.fade-active {
  opacity: 1;
  /* transform: translateY(0); */
}

/* .textAnime.fade-active #txt .cls-1 { 
  transition-delay: 3s;
} */

/* @keyframes text_typing {
  0% {opacity:0;}
  100% {opacity:1;}
} */

/* ▽ text animetion ▽ */
/* #SNH240131milky span {
  display: inline-block;
} */

/* .js-textAnime span{
  opacity: 0;
} */

/* .js-textAnime.showText span{ 
  animation: text_typing 1s ease-out forwards;
}

@keyframes text_typing {
  0% {opacity:0;}
  100% {opacity:1;}
} */


.TextRandomAnime span{
  opacity: 0;
}

.TextRandomAnime.appearRandomtext span{ 
  animation:text_randomanime_on .6s ease-out forwards;
}

@keyframes text_randomanime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
  animation-delay: .4s;/* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
}
.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
  animation-delay: .2s;/* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
}





/*** ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ デザイン ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ***/
#st240508BASIC {
  position: relative;
}

#st240508BASIC .TextRandomAnime_box {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;
  height: max-content;
  pointer-events: none;
}

#st240508BASIC .TextRandomAnime_box p {
  font-family: var(--font-en);
  font-weight: 500;
  color: #000000;
  z-index: 999;
  line-height: 1;
  letter-spacing: 0.03em;
}

#st240508BASIC .TextRandomAnime_box p span {
  font-weight: 200;
}

/*** TextRandomAnime01 ***/
#st240508BASIC .TextRandomAnime01 {
  font-size: 2rem;
  letter-spacing: 0.015em;
  margin-left: -0.5rem;
  top: 0.75%;
  left: 38%;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 100;
  color: #c7000b;
  z-index: 999;
  line-height: 1;
}

#st240508BASIC .TextRandomAnime01 h3 {
  font-size: 4.4rem;
  font-weight: 700;
}

#st240508BASIC .TextRandomAnime01 h3 span {
  font-weight: 700;
}

/*----------layout pc----------*/
#st240508BASIC {
  margin: 0;
  background-size: cover;
  font-family: var(--font);
  font-weight: 400;
  color: #c7000b;
  position: relative;
  z-index: 0;
  /*----------sec----------*/
}
#st240508BASIC a:hover {
  opacity: 1;
}
#st240508BASIC .sec__inner {
  position: relative;
}
#st240508BASIC img {
  width: 100%;
  display: block;
}
#st240508BASIC .content_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
#st240508BASIC .content_credit {
  font-size: 1.4rem;
  font-family: var(--font-en);
  font-weight: 200;
  letter-spacing: 0.05em;
  line-height: 1.85714;
  margin-top: 3.2rem;
  text-align: center;
}

#st240508BASIC .mv {
  position: relative;
  width: 57rem;
  height: 76rem;
  margin: 1.3rem auto 0;
  z-index: 0;
  background: url(../img/mv_bg.jpg) no-repeat;
  background-size: 100%;
}
#st240508BASIC .mv p {
  width: 28.5rem;
  position: absolute;
  z-index: 1;
}

#st240508BASIC .mv_1 {
  top: 0;
  left: 0;
}
#st240508BASIC .mv_2 {
  top: 0;
  right: 0;
}
#st240508BASIC .mv_3 {
  bottom: 0;
  left: 0;
}
#st240508BASIC .mv_4 {
  bottom: 0;
  right: 0;
}


#st240508BASIC .mv_1__2 ,
#st240508BASIC .mv_2__2 ,
#st240508BASIC .mv_3__2 ,
#st240508BASIC .mv_4__2 {
  display: none;
}
#st240508BASIC .mv_1__2 {
  top: 0;
  left: 0;
}
#st240508BASIC .mv_2__2 {
  top: 0;
  right: 0;
}
#st240508BASIC .mv_3__2 {
  bottom: 0;
  left: 0;
}
#st240508BASIC .mv_4__2 {
  bottom: 0;
  right: 0;
}

/* #st240508BASIC .mv_1 {
  animation-name: mv_anim;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-duration: 1s;
} */
/* #st240508BASIC .mv_1.__2 {
  animation-name: mv_anim__2;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 3s;
  animation-duration: 1s;
} */

/* #st240508BASIC .mv_2 {
  animation-name: mv_anim;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 1.5s;
  animation-duration: 1s;
}
#st240508BASIC .mv_3 {
  animation-name: mv_anim;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-duration: 1s;
}
#st240508BASIC .mv_4 {
  animation-name: mv_anim;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-duration: 1s;
} */

@keyframes mv_anim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes mv_anim__2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.d-none {
  display: none;
  transition: 1s linear;
}


/* .mv_1.fadein-load.fade-active {
  transition-delay: 2s;
}
.mv_2.fadein-load.fade-active {
  transition-delay: 1.5s;
}
.mv_3.fadein-load.fade-active {
  transition-delay: 1s;
}
.mv_4.fadein-load.fade-active {
  transition-delay: 2.5s;
} */


#st240508BASIC .lead_text {
  font-size: 2.4rem;
  font-family: var(--font-Acumin);
  letter-spacing: 0.027em;
  margin-top: 2rem;
  text-align: center;
}

/* ===== model_01 ===== */
#st240508BASIC .model_01 {
  width: 46.5rem;
  margin: 12.3rem auto 0;
}

/* ===== model_02 / model_03 ===== */
#st240508BASIC .model_02_03 {
  margin-top: 12rem;
  align-items: flex-start;
  margin-left: 3rem;
}
#st240508BASIC .model_02 {
  position: relative;
  width: 31rem;
  margin: 30rem -2rem 0 0;
  z-index: 1;
}
#st240508BASIC .model_03 {
  position: relative;
  width: 40rem;
  z-index: 0;
}

/* ===== model_04 ===== */
#st240508BASIC .model_04 {
  margin: 12rem auto 0;
  width: 46.5rem;
}

/* ===== model_05 ===== */
#st240508BASIC .model_05 {
  margin: 12.1rem auto 0;
  width: 51rem;
}

/* ===== page_text_02 ===== */
#st240508BASIC .page_text_02 {
  margin-top: 11.6rem;
  margin-left: 1rem;
}

/* ===== model_06 / model_07 ===== */
#st240508BASIC .model_06_07 {
  position: relative;
  width: 96rem;
  margin-top: 1.2rem;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
}
#st240508BASIC .model_06_07::before {
  position: absolute;
  content: "";
  display: block;
  width: 68rem;
  height: 51rem;
  background: #c7000b;
  top: 10rem;
  right: 0;
  z-index: -1;
}
#st240508BASIC .model_06 ,
#st240508BASIC .model_07 {
  width: 34rem;
}

/* ===== model_08 / model_09 ===== */
#st240508BASIC .model_08_09 {
  margin-top: 22rem;
  align-items: flex-start;
  margin-left: 2rem;
  gap: 4rem;
}
#st240508BASIC .model_08 {
  width: 32rem;
}
#st240508BASIC .model_09 {
  width: 38rem;
  margin-top: 12rem;
}


/* ===== model_09_1 ===== */
#st240508BASIC .model_09_1 {
  margin: 14rem auto 0;
}
#st240508BASIC .model_09_1 .model_img {
  width: 48rem;
  margin: auto;
}

/* ===== model_09_2 ===== */
#st240508BASIC .model_09_2 {
  margin: 13.4rem auto 0;
}
#st240508BASIC .model_09_2 .model_img {
  width: 48rem;
  margin: auto;
}

/* ===== contentText 02 ===== */
#st240508BASIC .contentText_02 {
  width: 80rem;
  margin: 9.4rem auto 0;
}

/* ===== model_10 ===== */
#st240508BASIC .model_10 {
  position: relative;
  width: 51rem;
  margin: 12rem auto 0;
  z-index: 0;
}
/* #st240508BASIC .model_10::before {
  position: absolute;
  content: "styling/ May collection";
  display: block;
  font-family: var(--font-Acumin);
  color: #c7000b;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.044em;
  top: 13.4rem;
  right: -9.1rem;
  z-index: 1;
  transform: rotate(90deg);
} */

/* ===== model_11 ===== */
#st240508BASIC .model_11 {
  width: 46.5rem;
  margin: 12rem auto 0;
}

/* ===== model_12 / model_13 ===== */
#st240508BASIC .model_12_13 {
  margin-top: 12rem;
  align-items: flex-start;
  margin-left: 3rem;
}
#st240508BASIC .model_12 {
  position: relative;
  width: 40rem;
  margin: 8rem -2rem 0 0;
  z-index: 1;
}
#st240508BASIC .model_13 {
  position: relative;
  width: 31rem;
  z-index: 2;
}

/* ===== model_14 ===== */
#st240508BASIC .model_14 {
  width: 46.5rem;
  margin: 12.1rem auto 0;
}

/* ===== model_15 ===== */
#st240508BASIC .model_15 {
  width: 51rem;
  margin: 12rem auto 0;
}

/* ===== all_item_btn ===== */
#st240508BASIC .all_item_btn {
  width: 46rem;
  margin: 10rem auto 0;
}
#st240508BASIC .all_item_btn a {
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  font-family: var(--font);
  font-weight: 400;
  font-style: normal;
  text-align: center;
  padding: 0;
  display: block;
}

/* ===== border ===== */
#st240508BASIC .border {
  border-top: #212121 solid 1px;
  margin: 13rem auto 0;
  width: 140rem;
}

/* ===== staff ===== */
#st240508BASIC .staff {
  width: 140rem;
  margin: 1.2rem auto 0;
  font-size: 1.4rem;
  font-weight: 300;
  padding-left: 14rem;
  text-align: left;
  font-family: var(--font-Acumin);
  line-height: 1.6428;
  letter-spacing: 0.05em;
  color: #000;
}
#st240508BASIC .staff span {
  font-weight: 300;
}




@media only screen and (max-width: 767px) {
/*----------layout sp----------*/

.main-area {
  padding-top: calc(205*(100vw / 750));
}

#st240508BASIC .TextRandomAnime_box {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;
  height: max-content;
  pointer-events: none;
}

/*** TextRandomAnime01 ***/
#st240508BASIC .TextRandomAnime01 {
  font-size: calc(58 *(100vw/750));
  letter-spacing: 0.014em;
  margin-left: calc(-7*(100vw / 750));
  top: 0.75%;
  left: 38%;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 700;
  color: #c7000b;
  z-index: 999;
  line-height: 1;
}

#st240508BASIC .TextRandomAnime01 h3 {
  font-size: calc(58 *(100vw/750));
}

/*----------layout pc----------*/
#st240508BASIC {
  margin: 0;
  background-size: cover;
  font-family: var(--font);
  font-weight: 400;
  color: #c7000b;
  position: relative;
  z-index: 0;
  /*----------sec----------*/
}
#st240508BASIC a:hover {
  opacity: 1;
}
#st240508BASIC .sec__inner {
  position: relative;
}
#st240508BASIC img {
  width: 100%;
  display: block;
}
#st240508BASIC .content_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
#st240508BASIC .content_credit {
  font-size: 1.4rem;
  font-family: var(--font-en);
  font-weight: 200;
  letter-spacing: 0.05em;
  line-height: 1.85714;
  margin-top: 3.2rem;
  text-align: center;
}

#st240508BASIC .mv {
  width: 100%;
  height: calc(1000*(100vw / 750));
  margin: calc(25*(100vw / 750)) auto 0;
}
#st240508BASIC .mv p {
  width: calc(375*(100vw / 750));
}


#st240508BASIC .mv_1__2 ,
#st240508BASIC .mv_2__2 ,
#st240508BASIC .mv_3__2 ,
#st240508BASIC .mv_4__2 {
  display: none;
}
#st240508BASIC .mv_1__2 {
  top: 0;
  left: 0;
}
#st240508BASIC .mv_2__2 {
  top: 0;
  right: 0;
}
#st240508BASIC .mv_3__2 {
  bottom: 0;
  left: 0;
}
#st240508BASIC .mv_4__2 {
  bottom: 0;
  right: 0;
}

#st240508BASIC .lead_text {
  font-size: calc(26 *(100vw/750));
  font-family: var(--font-Acumin);
  letter-spacing: 0.065em;
  margin-top: calc(27*(100vw / 750));
  text-align: center;
}

/* ===== model_01 ===== */
#st240508BASIC .model_01 {
  width: calc(660*(100vw / 750));
  margin: calc(125*(100vw / 750)) auto 0;
}

/* ===== model_02 / model_03 ===== */
#st240508BASIC .model_02_03 {
  margin-top: calc(120*(100vw / 750));
  align-items: flex-start;
  margin-left: 0;
}
#st240508BASIC .model_02 {
  position: relative;
  width: calc(370*(100vw / 750));
  margin: calc(82*(100vw / 750)) calc(-100*(100vw / 750)) 0 0;
  z-index: 1;
}
#st240508BASIC .model_03 {
  position: relative;
  width: calc(480*(100vw / 750));
  z-index: 0;
}

/* ===== model_04 ===== */
#st240508BASIC .model_04 {
  margin: calc(120*(100vw / 750)) auto 0;
  width: calc(660*(100vw / 750));
}

/* ===== model_05 ===== */
#st240508BASIC .model_05 {
  margin: calc(120*(100vw / 750)) auto 0;
  width: 100%;
}

/* ===== page_text_02 ===== */
#st240508BASIC .page_text_02 {
  margin-top: calc(117*(100vw / 750));
  margin-left: calc(2*(100vw / 750));
}
#st240508BASIC .page_text_02 .TextRandomAnime01 {
  margin-left: calc(3*(100vw / 750));
  letter-spacing: 0.016em;
}

/* ===== model_06 / model_07 ===== */
#st240508BASIC .model_06_07 {
  position: relative;
  width: 100%;
  margin-top: calc(20*(100vw / 750));
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: 0;
  z-index: 0;
}
#st240508BASIC .model_06_07::before {
  position: absolute;
  content: "";
  display: block;
  width: calc(700*(100vw / 750));
  height: calc(525*(100vw / 750));
  background: #c7000b;
  top: calc(80*(100vw / 750));
  right: calc(0*(100vw / 750));
  z-index: -1;
}
#st240508BASIC .model_06 ,
#st240508BASIC .model_07 {
  width: calc(350*(100vw / 750));
}

/* ===== model_08 / model_09 ===== */
#st240508BASIC .model_08_09 {
  margin-top: calc(200*(100vw / 750));
  align-items: flex-start;
  margin-left: 0;
  gap: 0;
}
#st240508BASIC .model_08 {
  width: calc(350*(100vw / 750));
}
#st240508BASIC .model_09 {
  width: calc(400*(100vw / 750));
  margin-top: calc(100*(100vw / 750));
}


/* ===== model_09_1 ===== */
#st240508BASIC .model_09_1 {
  margin: 14rem auto 0;
}
#st240508BASIC .model_09_1 .model_img {
  width: 48rem;
  margin: auto;
}

/* ===== model_09_2 ===== */
#st240508BASIC .model_09_2 {
  margin: 13.4rem auto 0;
}
#st240508BASIC .model_09_2 .model_img {
  width: 48rem;
  margin: auto;
}

/* ===== contentText 02 ===== */
#st240508BASIC .contentText_02 {
  width: 80rem;
  margin: 9.4rem auto 0;
}

/* ===== model_10 ===== */
#st240508BASIC .model_10 {
  position: relative;
  width: calc(660*(100vw / 750));
  margin: calc(120*(100vw / 750)) auto 0;
  z-index: 0;
}
/* #st240508BASIC .model_10::before {
  position: absolute;
  content: "styling/ May collection";
  display: block;
  font-family: var(--font-Acumin);
  color: #c7000b;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.044em;
  top: 13.4rem;
  right: -9.1rem;
  z-index: 1;
  transform: rotate(90deg);
} */

/* ===== model_11 ===== */
#st240508BASIC .model_11 {
  width: 100%;
  margin: calc(120*(100vw / 750)) auto 0;
}

/* ===== model_12 / model_13 ===== */
#st240508BASIC .model_12_13 {
  margin-top: calc(120*(100vw / 750));
  align-items: flex-start;
  margin-left: 0;
}
#st240508BASIC .model_12 {
  position: relative;
  width: calc(480*(100vw / 750));
  margin: 0 calc(-100*(100vw / 750)) 0 0;
  z-index: 1;
}
#st240508BASIC .model_13 {
  position: relative;
  width: calc(370*(100vw / 750));
  margin-top: calc(63*(100vw / 750));
  z-index: 2;
}

/* ===== model_14 ===== */
#st240508BASIC .model_14 {
  width: calc(660*(100vw / 750));
  margin: calc(120*(100vw / 750)) auto 0;
}

/* ===== model_15 ===== */
#st240508BASIC .model_15 {
  width: 100%;
  margin: calc(120*(100vw / 750)) auto 0;
}

/* ===== all_item_btn ===== */
#st240508BASIC .all_item_btn {
  width: calc(480*(100vw / 750));
  margin: calc(130*(100vw / 750)) auto 0;
}
/* #st240508BASIC .all_item_btn a {
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  font-family: var(--font);
  font-weight: 400;
  font-style: normal;
  text-align: center;
  padding: 0;
  display: block;
} */

/* ===== border ===== */
#st240508BASIC .border {
  border-top: #808080 solid calc(1*(100vw / 750));
  margin: calc(130*(100vw / 750)) auto 0;
  width: 100%;
}

/* ===== staff ===== */
#st240508BASIC .staff {
  position: relative;
  width: 100%;
  margin: calc(31*(100vw / 750)) auto 0;
  font-size: calc(22*(100vw / 750));
  font-weight: 300;
  padding-left: calc(50*(100vw / 750));
  padding-bottom: calc(41*(100vw / 750));
  text-align: left;
  font-family: var(--font-Acumin);
  line-height: 1.81;
  letter-spacing: 0.05em;
  border-bottom: #808080 solid calc(1*(100vw / 750));
  background: #fff;
  z-index: 1;
}
#st240508BASIC .staff span {
  display: inline-block;
  padding-left: calc(4*(100vw / 750));
  font-weight: 300;
}

.main-area.lp {
  margin-bottom: 0 !important;
}



}