@charset "UTF-8";
/*
font-family: "acumin-pro", sans-serif;
font-weight: 700;
font-style: normal;

font-family: "john-doe", sans-serif;
font-weight: 400;
font-style: normal;
*/
:root {
  --white: #fff;
  --black: #000;
  --line-color: #000;
  --font-ja: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic, "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
  --font-en01: "john-doe", sans-serif;
  --font-en02: "acumin-pro", sans-serif;
  --pc-width: 1400;
  --tb-width: 768;
  --sp-width: 750;
}

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

* > #st240605mirror {
  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;
  }
}
/*----------LP normalize SP----------*/
#st240605mirror {
  font-family: var(--font);
  background-color: var(--white);
}
@media only screen and (max-width: 767px) {
  /*----------layout sp----------*/
  #st240605mirror {
    max-width: 100%;
    width: calc(750 * (100vw/750));
    overflow: hidden;
    margin: 0;
    position: relative;
    background-color: #fff;
    border: none;
    font-family: var(--font);
  }
}

#st240605mirror * {
  box-sizing: border-box;
}

#st240605mirror img {
  height: auto;
  opacity: 1;
  width: 100%;
}

#st240605mirror a {
  display: block;
  text-decoration: none;
  color: #000000;
}

#st240605mirror a:hover{
  transition: .3s;
  opacity: .7;
}

#st240605mirror p{
  color: #000000;
}

#st240605mirror img,
#st240605mirror picture,
#st240605mirror video{
  display: inline-block;
  width: 100%;
  height: auto;
}

#st240605mirror p,
#st240605mirror ul,
#st240605mirror ol,
#st240605mirror dl {
  margin: 0;
  list-style: none;
}

#st240605mirror span{
  display: inline-block;
}


/*============ ▼ 共通部分 PC ▼ ============*/

#st240605mirror .imgWrap{
  background: #fff;
  position: relative;
}
#st240605mirror .font-ja{
  font-family: var(--font-ja);
  font-size: 1.4rem;
  font-feature-settings: "palt";
  text-align: center;
  letter-spacing: 0.12em;
  line-height: 2.1428571429;
}
#st240605mirror .font-en01{
  font-family: var(--font-en01);
  font-size: 1.8rem;
  font-feature-settings: "palt";
}
#st240605mirror .font-en02{
  font-family: "acumin-pro", sans-serif;
  font-weight: bold;
  font-size: 3.2rem;
  font-feature-settings: "palt";
}
#st240605mirror .sp_only{
  display: none;
}
#st240605mirror .pc_only{
  display: block;
}
#st240605mirror .sec02,
#st240605mirror .sec03,
#st240605mirror .sec05{
  margin-bottom: 12rem;
}
#st240605mirror .sec01,
#st240605mirror .sec04{
  margin-bottom: 16rem;
}
#st240605mirror .sec03__wrapper--inner,
#st240605mirror .sec06__wrapper,
#st240605mirror .sec08__wrapper--inner{
  display: flex;
}
/* #st240605mirror .sec01__wrapper,
#st240605mirror .sec02__wrapper,
#st240605mirror .sec03__wrapper--inner,
#st240605mirror .sec04__wrapper,
#st240605mirror .sec05__wrapper,
#st240605mirror .sec06__wrapper,
#st240605mirror .sec07__wrapper{
margin: 0 auto;
} */
/* #st240605mirror .sec06-img01, */
#st240605mirror .sec03-img01{
  width: 36rem;
}
#st240605mirror .sec02-img02,
#st240605mirror .sec05-img02{
  width: 30rem;
}
#st240605mirror .creditWrap{
  display: flex;
  flex-direction: column;
}
#st240605mirror .creditWrap li*:first-child{
  margin-bottom: 1.3rem;
}
#st240605mirror .crdt-adjst{
  padding-left: 0.75rem;
  font-feature-settings: "palt";
}
.creditWrap__txt:nth-child(2) {
  word-spacing: -0.198em;
  letter-spacing: -0.04em;
}
/*============ ▲ 共通部分 PC ▲ ============*/
/*============ ▼ 共通部分 SP ▼ ============*/
@media only screen and (max-width: 767px) {
  .main-area .main-inner{
    padding: 0;
  }
  #st240605mirror .sp_only {
    display: block;
  }
  #st240605mirror .pc_only {
    display: none;
  }
  #st240605mirror .font-ja{
    font-size: calc(22* (100vw / 750));
    line-height: 2;
  }
  #st240605mirror .font-en01{
    font-family: var(--font-en01);
    font-size: calc(27* (100vw / 750));
  }
  #st240605mirror .font-en02{
    font-family: var(--font-en02);
    font-size: calc(54* (100vw / 750));
  }
  #st240605mirror .sec02,
  #st240605mirror .sec03,
  #st240605mirror .sec05{
    margin-bottom: calc(120* (100vw / 750));
  }
  #st240605mirror .sec01,
  #st240605mirror .sec04{
    margin-bottom: calc(185* (100vw / 750));
  }

  /* #st240605mirror .sec06-img01, */
  #st240605mirror .sec03-img01,
  #st240605mirror .sec08-img01{
    width: calc(390* (100vw / 750));
  }

  #st240605mirror .sec02-img02,
  #st240605mirror .sec05-img02{
    width: calc(400* (100vw / 750));
  }
  #st240605mirror .creditWrap li*:first-child{
    margin-bottom: calc(20* (100vw / 750));
  }
  #st240605mirror .crdt-adjst{
    padding-left: calc(12* (100vw / 750));
  }

}

/*============ ▲ 共通部分 SP ▲ ============*/

/*============ ▼ mv ▼ ============*/
#st240605mirror .mainVisual {
  margin: 0 auto 14rem;
  font-feature-settings: "palt";
  text-align: center;
}
#st240605mirror .mainVisual .main__img {
  width: 100rem;
  margin: 8rem auto 0;
}
/*============ ▲ mv ▲ ============*/

/*====== ▼ sec01 "introduction about Miller COLLABORATION"▼ ======*/
#st240605mirror .sec01 {
  width: 100%;
  background-color: var(--black);
}

#st240605mirror .sec01__wrapper--inner{
  width: 107rem;
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
  margin: 0 auto;
}
#st240605mirror .sec01-img01{
  width: 46.5rem;
  margin-left: 7rem;
}
#st240605mirror .sec01__intro-cont{
  font-feature-settings: "palt";
  text-align: center;
  padding-top: 9.5rem;
}
#st240605mirror .sec01__intro-cont h2{
  padding-bottom: 5.5rem;
}
#st240605mirror .sec01__intro-cont h2,
#st240605mirror .sec01__intro-cont p{
  color: var(--white);
}
#st240605mirror .sec01__intro-cont--txt01{
  padding-bottom: 3rem;
}

/*====== ▼ sec01 "introduction about Miller COLLABORATION"▼ ======*/

/* ============ ▼ sec02 ▼ ============ */
#st240605mirror .sec02__wrapper--inner01{
  position: relative;
  width: 48rem;
  margin: auto;
  padding-bottom: 10rem;
}
#st240605mirror .sec02__prc-list{
  position: absolute;
  top: -4.3rem;
  left: -3rem;
  z-index: 100;
}
#st240605mirror .creditWrap__txt:first-child{
  margin-bottom: 1.7rem;
  word-spacing: -0.2rem;
}
#st240605mirror .sec02__wrapper--inner02{
  width: 88rem;
  margin: 0 auto;
}
/* ============ ▲ sec02 ▲ ============ */
/* ============ ▼ sec03 ▼ ============ */

#st240605mirror .sec03__wrapper{
  width: 72rem;
  margin: 0 auto;
}
/* ============ ▲ sec03 ▲ ============ */
/* ============ ▼ sec04 ▼ ============ */

#st240605mirror .sec04-img{
  width: 40rem;
  margin: 0 auto;
}
/* ============ ▲ sec04 ▲ ============ */
/* ============ ▼ sec05 ▼ ============ */
#st240605mirror .sec05__wrapper--inner01{
  position: relative;
  width: 51rem;
  margin: auto;
}

#st240605mirror .sec05__prc-list{
  position: absolute;
  top: -4.3rem;
  right: -3.2rem;
  z-index: 100;
}
#st240605mirror .sec05__prc-list .creditWrap{
  align-items: flex-end;
}
#st240605mirror .sec05__img01s-set {
  padding-bottom: 10rem;
}
#st240605mirror .sec05__wrapper--inner02{
  width: 88rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* ============ ▲ sec05 ▲ ============ */
/* ============ ▼ sec06 ▼ ============ */
#st240605mirror .sec06{
  margin-bottom: 14rem;
}
#st240605mirror .sec06__wrapper{
  width: 72rem;
  margin: 0 auto;
}
#st240605mirror .sec06__wrapper--inne01,
#st240605mirror .sec06__wrapper--inne02 {
  width: 36em;
}
/* ============ ▲ sec06 ▲ ============ */
/* ============ ▼ sec07 ▼ ============ */
#st240605mirror .sec07{
  margin-bottom: 5.8rem;
}
#st240605mirror .sec07__wrapper{
  margin: 0 auto;
}
#st240605mirror .sec07-svg{
  width: 30rem;
  padding-bottom: 5.5rem;
  margin: 0 auto;
}
#st240605mirror .sec07__about-miller{
  text-align: center;
}
#st240605mirror .sec07__about-miller h3{
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  padding-bottom: 0.8rem;
  padding-left: 0.2rem;
}
#st240605mirror .sec07__about-miller--ja{
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  padding-bottom: 2.6rem;
  padding-left: 0.3rem;
}
#st240605mirror  .sec07__about-miller--txt{
  padding-left: 0.3rem;
}
/* ============ ▲ sec07 ▲ ============ */
/* ============ ▼ sec08 "check all items" ▼ ============ */
#st240605mirror .sec08{
  margin-bottom: 13rem;
}
#st240605mirror .sec08__wrapper{
  position: relative;
  width: 72rem;
  margin: 0 auto;
}
#st240605mirror .sec08-img01{
  width: 72rem;
}
#st240605mirror .all_item_btn{
  position: absolute;
  right: 0;
  bottom: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 51.5rem;
  height: 3.5rem;
  background-color: var(--black);
}
#st240605mirror .all_item_btn a{
  padding-right: 1.5rem;
  color: var(--white);
}
/* ============ ▲  sec08 "check all items" ▲ ============ */
@media only screen and (max-width: 767px) {

  /*============ ▼ mv ▼ ============*/
  #st240605mirror .mainVisual {
    margin: 0 auto calc(120* (100vw / 750));
  }
  #st240605mirror .mainVisual .main__img {
    width: calc(640* (100vw / 750));
    margin: calc(45*(100vw / 750)) auto 0;
  }
  /*============ ▲ mv ▲ ============*/

  /*====== ▼ sec01 "introduction about Miller COLLABORATION"▼ ======*/
  #st240605mirror .sec01 {
    width: 100vw;
  }
  #st240605mirror .sec01__wrapper--inner{
    flex-direction: column;
    width: calc(692* (100vw / 750));
    padding-top: calc(40* (100vw / 750));
    padding-bottom: calc(73* (100vw / 750));
  }
  #st240605mirror .sec01-img01{
    width: calc(600* (100vw / 750));
    margin: 0 auto;
  }
  #st240605mirror .sec01__intro-cont{
    padding-top: calc(70*(100vw / 750));
  }
  #st240605mirror .sec01__intro-cont h2{
    padding-bottom: calc(45*(100vw / 750));
    letter-spacing: 0.02em;
  }
  #st240605mirror .sec01__intro-cont--txt01{
    padding-bottom: calc(45*(100vw / 750));
  }
  #st240605mirror .sec01__intro-cont--txt01,
  #st240605mirror .sec01__intro-cont--txt02{
    padding-left: calc(5*(100vw / 750));
  }

  /**====== ▼ sec01 "introduction about Miller COLLABORATION"▼ ======*/

  /* ============ ▼ sec02 ▼ ============ */
  #st240605mirror .sec02__wrapper--inner01{
    width: 100%;
  }
  #st240605mirror .sec02__prc-list{
    top: calc(-69*(100vw / 750));
    left: calc(23*(100vw / 750));
  }
  #st240605mirror .creditWrap__txt:first-child{
    margin-bottom: calc(25* (100vw / 750));
  }
  #st240605mirror .sec02__img01s-set {
    width: calc(560* (100vw / 750));
  }
  #st240605mirror .sec02__wrapper--inner02{
    width: calc(670* (100vw / 750));
  }
  /* ============ ▲ sec02 ▲ ============ */

  /* ============ ▼ sec03 ▼ ============ */

  #st240605mirror .sec03__wrapper{
    width: calc(780* (100vw / 750));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  /* ============ ▲ sec03 ▲ ============ */

  /* ============ ▼ sec04 ▼ ============ */
  #st240605mirror .sec04-img{
    width: calc(520* (100vw / 750));
    margin: 0 auto;
  }
  /* ============ ▲ sec04 ▲ ============ */
  /* ============ ▼ sec05 ▼ ============ */
  #st240605mirror .sec05__prc-list{
    top: calc(-69*(100vw / 750));
    right: calc(20*(100vw / 750));
  }
  #st240605mirror .sec05__img01s-set {
    width: calc(645* (100vw / 750));
    padding-bottom: calc(100* (100vw / 750));
  }
  #st240605mirror .sec05__wrapper--inner01{
    width: 100%;
  }
  #st240605mirror .sec05__wrapper--inner02{
    width: calc(690*(100vw / 750));
  }
  /* ============ ▲ sec05 ▲ ============ */
  /* ============ ▼ sec06 ▼ ============ */
  #st240605mirror .sec06{
    margin-bottom: calc(120* (100vw / 750));
  }
  #st240605mirror .sec06__wrapper{
    width: calc(780* (100vw / 750));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  #st240605mirror .sec06__wrapper--inne01,
  #st240605mirror .sec06__wrapper--inne02 {
    width: calc(390* (100vw / 750));
  }
  /* ============ ▲ sec06 ▲ ============ */
  /* ============ ▼ sec07 ▼ ============ */
  #st240605mirror .sec07{
    margin-bottom: calc(90* (100vw / 750));
  }
  #st240605mirror .sec07-svg{
    width: calc(460* (100vw / 750));
    padding-bottom: calc(80* (100vw / 750));
  }
  #st240605mirror .sec07__about-miller h3{
    font-size: calc(45* (100vw / 750));
    padding-bottom: calc(24*(100vw / 750));
    letter-spacing: 0.065em;
    padding-left: 0.5rem;
  }
  #st240605mirror .sec07__about-miller--ja{
    font-size: calc(28* (100vw / 750));
    padding-bottom: calc(39*(100vw / 750));
  }
  /* ============ ▲ sec07 ▲ ============ */

  /*============ ▼ sec08 "check all items" ▼ ============*/
  #st240605mirror .all_item_btn .font-en01{
    font-size: calc(28* (100vw / 750));
  }
  #st240605mirror .sec08__wrapper{
    width: 100%;
  }
  #st240605mirror .sec08-img01{
    width: calc(780* (100vw / 750));
  }
  #st240605mirror .sec08__wrapper--inner {
    width: calc(780*(100vw / 750));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  #st240605mirror .all_item_btn{
    bottom: 8rem;
    width: calc(600* (100vw / 750));
    height: calc(58* (100vw / 750));
  }
  #st240605mirror .all_item_btn a{
    padding-right: calc(30* (100vw / 750));
  }
  /*============ ▲ sec08 "check all items" ▲ ============*/

}/*# sourceMappingURL=style.css.map */


/* ------------------------------
     animation
--------------------------------- */
.js-show{
  opacity: 0;
  transition: opacity 0.4s 0.4s;
}
.fade.onView {
  opacity: 1;
}

/*---------- fadein----------*/
._fadein {
  opacity: 0;
  transition: opacity 0.8s;
}

._fadein.fade-active {
  opacity: 1;
}
/*---------- fade slide----------*/

/* ランダムに出現するテキスト ___________________________*/

.js-typingText span {
  display: none;
}

/*文字列後ろの線の設定*/
.js-typingText::after {
  content: "";
  animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
  from{opacity:0}
  to{opacity:1}
}

/* fade-left ___________________________*/
.fade-left {
  opacity: 0;
  transform: translateX(calc(-40* (100vw /750)));
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-left.onView {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width: 767px) {
  .fade-left {
    transform: translateX(calc(-100* (100vw /750)));
  }
}

/* fade-right ___________________________*/
.fade-right {
  opacity: 0;
  transform: translateX(calc(40* (100vw /750)));
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-right.onView {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width: 767px) {
  .fade-right {
    transform: translateX(calc(100* (100vw /750)));
  }
}

.title__line, .line-load {
  position: relative;
}

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

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