@charset "UTF-8";

/*--------------------------
>>  mqcontents
--------------------------*/

/*--------------------Reset*/
* {
  margin: 0px;
  padding: 0px;
}

#commonFooter {
  margin-top: 0 !important;
}

#mq_ysl2106 section {
  padding: 0 !important;
}

/*--------------------Common*/

#mq_ysl2106 {
  width: 100%;
  color: #000;
  line-height: 1;
  word-break: normal;
  line-break: strict;
  overflow: hidden;
  /*position: relative;*/
  background-color: #f5f7f6;

}

#mq_ysl2106 img {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
  height: auto;
  backface-visibility: hidden;/* animation時のにじみ防止 */
  -webkit-backface-visibility: hidden;/* animation時のにじみ防止 */
  -webkit-font-smoothing: antialiased;/* animation時の文字にじみ防止 */
  -moz-osx-font-smoothing: grayscale;/* animation時の文字にじみ防止 */
}

#mq_ysl2106 p {
  font-size: 3.75vw;
  line-height: 1.5;
}

#mq_ysl2106 .bold {
  font-weight: bold;
}


#mq_ysl2106 .sup {
  font-size: 75.5%;
  vertical-align: top;
  position: relative;
  top: -0.2em;
}

#mq_ysl2106 .is-pc {
  display: none;
}

#mq_ysl2106 .is-sp {
  display: block;
}


#mq_ysl2106 br.is-pc {
  display: none;
}

#mq_ysl2106 br.is-sp {
  display: inline-block;
}



/*Clearfix*/
#mq_ysl2106 .cf:before,
#mq_ysl2106 .cf:after {
  content: "";
  display: block;
  overflow: hidden;
}
#mq_ysl2106 .cf:afte {
  clear: both;
}
#mq_ysl2106 .cf {
  zoom: 1;
}
#mq_ysl2106 .clear {
  clear: both;
}


/*Layout*/
#mq_ysl2106 .container {
  width: 92vw;
  margin: 0 4vw;
}

/*--------------------------------------------------------------------------------------
mq_contents
-------------------------------------------------------------------------------------- */
/*-------------------------------------------------------------------------------- pr */
#mq_ysl2106 .pr {
  width: 30px;
  height: 17px;
  z-index: 2;
  top: 15px;
  right: 15px;
  position: absolute;
}


/*-------------------------------------------------------------------------------- btn  */
#mq_ysl2106 .btn {

}

#mq_ysl2106 .btn {
  margin:  0 auto;
  width: 77.3333vw;
  height: 12vw;
}

#mq_ysl2106 .btn a {
  display: flex;
  align-items: center;
  font-size: 3.466666vw;
  font-weight: bold;
  background-color: #000;
  color: #fff;
  padding-left: 25vw;
  position: relative;
  border-radius: 6vw;
  width: 100%;
  height: 100%;
}

#mq_ysl2106 .btn a::before {
  display: block;
  content:  '';
  position: absolute;
  right: 17vw;
  top: calc(50% - 0.4vw);
  transform: translateY(-50%);
  animation: btn_arrow 2s linear infinite;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/btn_arrow_sp@2x.png);
  width: 8vw;
  height: 1.46666vw;
  background-size: 8vw 1.46666vw;
  background-repeat: no-repeat;
}

#mq_ysl2106 .btn_modal a {
  padding-left: 19vw;
}

#mq_ysl2106 .btn_modal a::before {
  right: 13vw;
}

#mq_ysl2106 .btn_subscription a {
  background-color: #e8696c;
  padding-left: 14vw;
  text-align: center;
  line-height: 1.2;
}

#mq_ysl2106 .btn_subscription a::before {
  right: 6vw;
}

#mq_ysl2106 .btn_subscription {
  margin-bottom: 5.33333vw;
}

#mq_ysl2106 .btn_brand a {
  padding-left: 22vw;
}

#mq_ysl2106 .btn_brand a::before {
  right: 15vw;
}


/*----------------------------------------------------------------------------contact/credit/share */
#mq_ysl2106 .credit {
  font-size: 2.133333vw;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 9.3333vw;
  margin-top: 8vw;
}


#mq_ysl2106 .share {
  margin: 0 auto 8vw;
  text-align: center;
}

#mq_ysl2106 .share_list {
  text-align: center;
}

#mq_ysl2106 .share_item {
  width: 13.33333vw;
  display: inline-block;
  margin: 0 1.3333vw;
}


#mq_ysl2106 .caution {
  font-size: 2.133333vw;
  text-align: center;
  margin-bottom: 13.33333vw;
}



/*----------------------------------------------------------------------------モーダル */
#mq_ysl2106 .modal_open:hover {
  cursor: pointer;
  opacity: .6;
}

#mq_ysl2106 .modal {
  position: absolute;
  width: 92vw;
  margin: 0 auto;
  background-color: #fff;
  z-index: 10001;
  display: none;
  padding: 12vw 9.3333vw;
  border-radius: 2vw;
}

#mq_ysl2106 .modal_inner {
}

#mq_ysl2106 #modal_overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
}

#mq_ysl2106 .modal_close {
    position: absolute;
    width: 5.3333vw;
    height: 5.3333vw;
    top: 4vw;
    right: 4vw;
    z-index: 10001;
}

#mq_ysl2106 .modal_headings {
  width: 60.666666vw;
  margin:  0 auto 5.3333vw;
}

#mq_ysl2106 .modal_text {
  margin-bottom: 4vw;
}

#mq_ysl2106 .modal_text p {
  font-size: 2.13333vw;
  line-height: 1.625;
  margin-bottom: 5px;
}

#mq_ysl2106 .modal_text p span {
  padding: .53333vw .8vw;
}

#mq_ysl2106 .modal_text p span.yellow {
  background-color: #fbf6ab;
}

#mq_ysl2106 .modal_text p span.pink {
  background-color: #fbc2d8;
}


#mq_ysl2106 .modal .modal_caution {
  text-align: left;
  font-size: 1.333333vw;
  line-height: 1.625;
}


/*-------------------------------------------------------------------------------- mv  */
#mq_ysl2106 .mv {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/mv_main_sp@2x.png);
  background-size: 100vw 166vw;
  background-repeat: no-repeat;
  background-position: center 0;
  opacity: 0;
  transition: all 1s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;}

#mq_ysl2106 .mv.is-show {
  opacity: 1;
}

#mq_ysl2106 .mv .container {
  width: 100vw;
  margin-left: 0;
}

#mq_ysl2106 .mv_main {
  position: relative;
  height: 225.333vw;
}

#mq_ysl2106 .mv_subtitle {
  position: absolute;
  top: 10.6666vw;
  left: 50%;
  transform:  translate(-50%,20px);
  width: 68vw;
  opacity: 0;
  transition: all .8s ease 1s;
}

#mq_ysl2106 .is-show .mv_subtitle {
  opacity: 1;
  transform: translate(-50%,0);
}


#mq_ysl2106 .mv_title1 {
  position: absolute;
  top: 18vw;
  left: 50%;
  width: 58.93333vw;
  transform:  translate(-50%,20px);
  opacity: 0;
  transition: all .8s ease 1.5s;
}

#mq_ysl2106 .is-show .mv_title1 {
  opacity: 1;
  transform: translate(-50%,0);
}


#mq_ysl2106 .mv_title2 {
  position: absolute;
  top: 32vw;
  left: 50%;
  transform:  translate(-50%,20px);
  width: 76.9333vw;
  opacity: 0;
  transition: all .8s ease 1.5s;
}

#mq_ysl2106 .is-show .mv_title2 {
  opacity: 1;
  transform: translate(-50%,0);
}

#mq_ysl2106 .mv_lead1 {
  position: absolute;
  top: 48.6666vw;
  right: 19.3333vw;
  width: 3.2666666666vw;
  height: 0;
}

#mq_ysl2106 .is-show .mv_lead1,
#mq_ysl2106 .mv_lead1 .slidedown_inner {
  transition: all .5s ease 2s;
  height: 32.53333333vw;
}


#mq_ysl2106 .mv_lead2 {
  position: absolute;
  top: 56vw;
  right: 25.3333vw;
  width: 3.2666666vw;
  height: 0;
}

#mq_ysl2106 .is-show .mv_lead2,
#mq_ysl2106 .mv_lead2 .slidedown_inner {
  transition: all .8s ease 2.5s;
  height: 66.6vw;
}


#mq_ysl2106 .mv_text {
  position: absolute;
  top: 139.06666vw;
  left: 50%;
  transform:  translate(-50%,20px);
  width: 55.6vw;
  height: 76.8666vw;
  opacity: 0;
  transition: all .8s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
}


#mq_ysl2106 .mv_text.is-active {
  opacity: 1;
  transform: translate(-50%,0);
}


#mq_ysl2106 .mv_text::before,
#mq_ysl2106 .mv_text::after {
  position: absolute;
  display: block;
  content: '';
  top: 0;;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 55.6vw 76.8666vw;
  background-repeat: no-repeat;
  background-origin: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
}

#mq_ysl2106 .mv_text::before {
  opacity: 1;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/mv_text_sp@2x.png);
  transition: opacity .8s ease 1s;
}


#mq_ysl2106 .mv_text.is-active::before {
  opacity: 0;
}

#mq_ysl2106 .mv_text::after {
  opacity: 0;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/mv_text-red_sp@2x.png);
  transition: opacity .8s ease 1s;
  z-index: 2;
}

#mq_ysl2106 .mv_text.is-active::after {
  opacity: 1;
}

#mq_ysl2106 .mv_nightserum {
  padding:  6.66666vw 4vw;
  position: relative;
  z-index:  0;
}

#mq_ysl2106 .mv_nightserum::before {
  position: absolute;
  display: block;
  content:  '';
  width: 0%;
  height: 100%;
  background-color: #ffe492;
  z-index: -1;
  transition: all ease .5s;
  top: 0;
  left: 0;
}

#mq_ysl2106 .mv_nightserum.is-active::before {
  width: 100%;
}

#mq_ysl2106 .mv_nightserum-headings {
  position: relative;
  text-align: center;
  padding-bottom: 4vw;
  display: inline-block;
  margin-bottom: 4vw;
}

#mq_ysl2106 .mv_nightserum-headings img {
  width: 31.8vw;
}

#mq_ysl2106 .mv_nightserum-headings::before{
  position: absolute;
  display: block;
  content:  '';
  bottom: 0;
  height: 2.13333vw;
}

#mq_ysl2106 .mv_nightserum-headings::before {
  left: 0;
  background-color: #000;
  width: 0;
  transition: all .5s ease .5s;
}

#mq_ysl2106 .is-active .mv_nightserum-headings::before {
  width: 40.8vw;
}

#mq_ysl2106 .mv_nightserum-headings::after {
  width: 50%;
  right: 0;
}

#mq_ysl2106 .mv_nightserum-text {
}

#mq_ysl2106 .mv_nightserum-caption {
  font-size: 2.666vw;
  line-height: 2;
  width: 92vw;
}

/*-------------------------------------------------------------------------------- block01  */
#mq_ysl2106 .block01 {
  margin-top: 14.6666vw;
  margin-bottom: 8vw;
}


#mq_ysl2106 .block01_headings {
  margin-bottom: 2.6666vw;
}

#mq_ysl2106 .block01_headings.is-active,
#mq_ysl2106 .block01_headings .slidein_inner {
  width: 51.066666vw;
}

#mq_ysl2106 .block01_subheadings {
  margin-bottom: 6.6666vw;
}


#mq_ysl2106 .block01_subheadings.slidein.is-active,
#mq_ysl2106 .block01_subheadings .slidein_inner {
  transition: all .5s ease .5s;
  width: 73.93333vw;
}


#mq_ysl2106 .block01_text {
  margin: 0 auto;
  font-size: 3.2vw;
  line-height: 2.08333;
  position: relative;
  z-index: 2;
}

#mq_ysl2106 .block01_main {
  position: relative;
  height: 106.6666vw;
}


#mq_ysl2106 .block01_main::before {
  display: block;
  position: absolute;
  content: '';
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block01_main_sp@2x.png);
  width: 100vw;
  height: 160vw;
  left: -4vw;
  top: -53vw;
  background-size: 100vw 166vw;
  background-repeat: no-repeat;
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


#mq_ysl2106 .block01_lead1 {
  position: absolute;
  top: 23.3333vw;
  right: 20vw;
  width: 5.46666vw;
  height: 0;
  z-index: 3;
}

#mq_ysl2106 .block01_lead1.is-active,
#mq_ysl2106 .block01_lead1 .slidedown_inner {
  height: 58vw;
}

#mq_ysl2106 .block01_lead2 {
  position: absolute;
  top: 47.3333vw;
  right: 28vw;
  width: 4.46666vw;
  height: 0;
  z-index: 3;
}

#mq_ysl2106 .block01_lead2.is-active,
#mq_ysl2106 .block01_lead2 .slidedown_inner {
  transition-delay: .5s;
  height: 41.6666vw;
}

#mq_ysl2106 .block01_lotion {
  width: 100vw;
  margin-left: -4vw;
  padding-top: 8vw;
  z-index: 3;
  position: relative;
  padding-bottom: 26.6666vw;
  z-index: 1;
}

#mq_ysl2106 .block01_lotion::before {
  background-color: #fbe6e5;
  position: absolute;
  display: block;
  content:  '';
  width: 0;
  height: 100%;
  z-index: -1;
  transition: all ease .5s;
  top: 0;
  left: 0;
}

#mq_ysl2106 .block01_lotion.is-active::before {
  width: 100%;
}

#mq_ysl2106 .block01_lotion-headings {
  position: relative;
  width: 50.13333vw;
  display: inline-block;
  padding-bottom: 15px;
  margin-left: 4vw;
  margin-bottom: 4vw;
  padding-bottom: 4vw;
}

#mq_ysl2106 .block01_lotion-headings::before {
  position: absolute;
  display: block;
  content:  '';
  bottom: 0;
  height: 2.13333vw;
  width: 0;
  left: 0;
  background-color: #000;
  transition: all .5s ease;
}

#mq_ysl2106 .is-active .block01_lotion-headings::before {
  width: 60vw;
}


#mq_ysl2106 .block01_lotion-text {
  margin-left: 4vw;
}

#mq_ysl2106 .block01_lotion-caption {
  font-size: 2.666vw;
  margin-bottom: 4vw;
  line-height: 2;
  width: 92vw;
}

#mq_ysl2106 .block01_lotion-caution {
  font-size: 2.13333vw;
  line-height: 1.5;
  margin-left: 1vw;
}

#mq_ysl2106 .block01 .btn_detail {
  margin-top: -20vw;
  position: relative;
  z-index: 3;
  margin-bottom: 8vw;
}


/*-------------------------------------------------------------------------------- block02  */
#mq_ysl2106 .block02 {
  padding-top: 18vw;
  margin-bottom: 18.6666vw;
}

#mq_ysl2106 .block02_catch {
  width: 23.86666vw;
  margin-left: 9.0666vw;
  overflow: hidden;
  transition-delay: .5s;
  position: relative;
  z-index: 1;
}

#mq_ysl2106 .block02_catch::after {
  content: '';
  display: block;
  position: absolute;
  width: 30vw;
  height: 30vw;
  top: -60vw;
  left: -60vw;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
  -webkit-transition: 1s;
  transition: all 1s linear 1s;
  z-index: 2;
}


#mq_ysl2106 .block02_catch.is-active::after {
  left: 200px;
  top: 200px;
}

#mq_ysl2106 .block02_headings {
  width: 69.8666vw;
  margin-left: 9.3333vw;
  margin-top: -16vw;
  margin-bottom: 6.6666vw;
}

#mq_ysl2106 .block02_lead {
  font-size: 3.2vw;
  line-height: 2.0833333;
  text-align: center;
  margin-bottom: 5.3333vw;
}

#mq_ysl2106 .block02_ph {
  width: 81.8666vw;
  margin-left: 6.6666vw;
  margin-bottom: 3.3333vw;
}


#mq_ysl2106 .block02_list {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}


#mq_ysl2106 .block02_list-item {
  margin: 0 1.3333vw;
  width: 34.6666vw;
}

#mq_ysl2106 .block02_list-item:nth-child(2) {
  transition-delay:  .5s;
}

#mq_ysl2106 .block02_list-name {
  margin: 0 auto 2vw;
  text-align: center;
}

#mq_ysl2106 .block02_list-name img {
  height: 7.6vw;
  width: auto;
}

#mq_ysl2106 .block02_list-text {
  font-size: 1.86666vw;
  line-height: 1.5;
  width: 34.6666vw;
}

#mq_ysl2106 .block02_list-credit {
  font-size: 1.6vw;
  line-height: 1.5;
  width: 34.6666vw;
  margin-top: 2.6666vw;
}


/*-------------------------------------------------------------------------------- block03  */
#mq_ysl2106 .block03 {
  margin-bottom: 13.3333vw;
}

#mq_ysl2106 .block03 .container {
  width: 100vw;
  margin-left: 0;
}

#mq_ysl2106 .block03_subheadings {
  width: 0;
  margin-left: 0;
  margin-bottom: 4vw;
  transition-delay: .5s;
}

#mq_ysl2106 .block03_subheadings.is-active,
#mq_ysl2106 .block03_subheadings .slidein_inner {
  width: 82.666vw;
}

#mq_ysl2106 .block03_headings {
  width: 60.9333vw;
  margin-left: 4vw;
  margin-bottom: 12vw;
}


#mq_ysl2106 .block03_50ml {
  position: relative;
  height: 196vw;
  margin-bottom: 18.666666vw;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block03_50ml-main_sp@2x.png);
  background-size: 99.866666vw 104.133333vw;
  background-repeat: no-repeat;
  background-position: center 50.666vw;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#mq_ysl2106 .block03_50ml-headings {
  position: absolute;
  width: 22.8vw;
  left: 38.6vw;
  right: 140px;
  top: 0;
  opacity: 0;
  transition: all .5s ease .2s;
  transform: translateY(20px);
}

#mq_ysl2106 .is-active .block03_50ml-headings{
  transform: translateY(0);
  opacity: 1;
}

#mq_ysl2106 .block03_50ml-headings::before {
  position: absolute;
  display: block;
  content:  '';
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block03_arrow_sp@2x.png);
  width: 8.26666vw;
  height: 0;
  background-size: 8.26666vw 6.4vw;
  top: 18.66666vw;
  left: 50%;
  transform: translate(-50%,20px);
  opacity: 0;
  transition: all .5s ease .4s;
}

#mq_ysl2106 .is-active .block03_50ml-headings::before {
  animation: arrow 2s linear infinite;
  opacity: 1;
  height: 6.4vw;
}


#mq_ysl2106 .block03_50ml-lead {
  position: absolute;
  width: 56.3333vw;
  left: 50%;
  top: 30vw;
  opacity: 0;
  transition: all .5s ease .6s;
  transform: translate(-50%,20px);
}

#mq_ysl2106 .is-active .block03_50ml-lead {
  transform: translate(-50%,0);
  opacity: 1;
}

#mq_ysl2106 .block03_50ml-text {
  position: absolute;
  font-size: 3.2vw;
  line-height: 2.083;
  width: 92vw;
  top: 157.3333vw;
  left: 4vw;
}

#mq_ysl2106 .block03_50ml-catch {
  position: absolute;
  width: 39.6vw;
  top: 55.333333vw;
  left: 5.3333vw;
  opacity: 0;
  transition: all .5s ease .8s;
  transform: translateY(20px);
}

#mq_ysl2106 .is-active .block03_50ml-catch {
  transform: translateY(0);
  opacity: 1;
}


#mq_ysl2106 .block03_30ml {
  position: relative;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block03_30ml-main_sp@2x.png);
  background-size: 100vw 102.533333vw;
  background-repeat: no-repeat;
  background-position: center 63.3333vw;
  height: 196vw;
  margin-bottom: 12vw;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#mq_ysl2106 .block03_30ml-headings {
  position: absolute;
  width: 22.266vw;
  left: 50%;
  transform: ;
  top: 0;
  opacity: 0;
  transition: all .5s ease .2s;
  transform: translate(-50%,20px);
}

#mq_ysl2106 .is-active .block03_30ml-headings{
  transform: translate(-50%,0);
  opacity: 1;
}


#mq_ysl2106 .block03_30ml-headings::before {
  position: absolute;
  display: block;
  content:  '';
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block03_arrow@2x.png);
  width: 8.26666vw;
  height: 0;
  background-size: 8.26666vw 6.4vw;
  top: 18.66666vw;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all .5s ease .4s;
}

#mq_ysl2106 .is-active .block03_30ml-headings::before {
  animation: arrow 2s linear infinite;
  opacity: 1;
  height: 6.4vw;
}


#mq_ysl2106 .block03_30ml-lead {
  position: absolute;
  width: 69.6vw;
  top: 30vw;
  left:  50%;
  opacity: 0;
  transition: all .5s ease .6s;
  transform: translate(-50%,20px);
}

#mq_ysl2106 .is-active .block03_30ml-lead {
  transform: translate(-50%,0);
  opacity: 1;
}


#mq_ysl2106 .block03_30ml-text {
  position: absolute;
  font-size: 3.2vw;
  line-height: 2.083;
  width: 92vw;
  top: 157.3333vw;
  left: 4vw;
}

#mq_ysl2106 .block03_30ml-catch {
  position: absolute;
  width: 39.6vw;
  top: 55.333333vw;
  left: 5.3333vw;
  opacity: 0;
  transition: all .5s ease .8s;
  transform: translateY(20px);
}

#mq_ysl2106 .is-active .block03_30ml-catch {
  transform: translateY(0);
  opacity: 1;
}
/*-------------------------------------------------------------------------------- movie  */
#mq_ysl2106 .movie {
  padding-top: 6.6666vw;
  height: 74.666vw;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/movie_bg_sp@2x.jpg);
  background-size: contain;
  margin-bottom: 10.6666vw;
  text-align: center;
}

#mq_ysl2106 .movie_headings {
  width: 76.8vw;
  margin: 0 auto 2.666vw;
}

#mq_ysl2106 .movie iframe {
  width: 92vw;
  height: 51.75vw;
  margin: 0 auto;
}


/*-------------------------------------------------------------------------------- block04  */
#mq_ysl2106 .block04 {

}

#mq_ysl2106 .block04_headings {
  width: 78.26666vw;
  margin: 0 auto;
  position: relative;
  z-index:  2;
}

#mq_ysl2106 .block04_list {
  background-color: #fff;
  margin-top: -5.3333vw;
  padding: 4vw 6.6666vw;
  position: relative;
  margin-bottom: 12vw;
}

#mq_ysl2106 .block04_list::before {
  position: absolute;
  display: block;
  content:  '';
  width: 593.3333vw;
  height: 106.53333vw;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-bg_sp@2x.png);
  background-size: 93.3333vw 106.53333vw;
  background-repeat: no-repeat;
  left: 0;
  bottom: -1.733333333333vw;
}

#mq_ysl2106 .block04_list-item {
  padding: 4vw 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #000;
  opacity: 0;
  transition: all .5s ease;
  transform: translateY(20px);
}

#mq_ysl2106 .block04_list-item:nth-child(2) {
  transition-delay: .2s;
}

#mq_ysl2106 .block04_list-item:nth-child(3) {
  transition-delay: .4s;
}

#mq_ysl2106 .block04_list-item:nth-child(4) {
  transition-delay: .6s;
  border-bottom: none;
}

#mq_ysl2106 .block04_list-item:nth-child(5) {
  transition-delay: .7s;
  border-bottom: none;
  padding: 0;
}


#mq_ysl2106 .block04_list-number {
  width: 9.3333vw;
}

#mq_ysl2106 .block04_list-number img {
  width: auto;
  height: 6.13333vw;
}

#mq_ysl2106 .block04_list-text {
  width: 69vw;
}

#mq_ysl2106 .block04_list-headings {
  margin-bottom: 20px;
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
}

#mq_ysl2106 .block04_list-headings::before,
#mq_ysl2106 .block04_list-headings::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
}

#mq_ysl2106 .block04_list-headings::before {
  opacity: 1;
}

#mq_ysl2106 .block04_list .block04_list-item.is-active .block04_list-headings::before {
  opacity: 0;
}

#mq_ysl2106 .block04_list-headings::after {
  opacity: 0;
  z-index: 2;
}

#mq_ysl2106 .block04_list .block04_list-item.is-active .block04_list-headings::after {
  opacity: 1;
}

#mq_ysl2106 .block04_list-item:first-child .block04_list-headings {
  width: 62.53333vw;
  height: 4vw;
}

#mq_ysl2106 .block04_list-item:first-child .block04_list-headings::before,
#mq_ysl2106 .block04_list-item:first-child .block04_list-headings::after {
  background-size: 62.53333vw 4vw;
  transition: all .5s ease .5s;
}

#mq_ysl2106 .block04_list-item:first-child .block04_list-headings::before {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings1_sp@2x.png);
}

#mq_ysl2106 .block04_list-item:first-child .block04_list-headings::after {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings1-orange_sp@2x.png);
}

#mq_ysl2106 .block04_list-item:nth-child(2) .block04_list-headings {
  width: 63.0666666vw;
  height: 4vw;
}

#mq_ysl2106 .block04_list-item:nth-child(2) .block04_list-headings::before,
#mq_ysl2106 .block04_list-item:nth-child(2) .block04_list-headings::after {
  background-size: 63.0666666vw 4vw;
  transition: all .5s ease .7s;
}

#mq_ysl2106 .block04_list-item:nth-child(2) .block04_list-headings::before {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings2_sp@2x.png);
}

#mq_ysl2106 .block04_list-item:nth-child(2) .block04_list-headings::after {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings2-orange_sp@2x.png);
}


#mq_ysl2106 .block04_list-item:nth-child(3) .block04_list-headings {
  width: 59.6666vw;
  height: 9.533333vw;
}

#mq_ysl2106 .block04_list-item:nth-child(3) .block04_list-headings::before,
#mq_ysl2106 .block04_list-item:nth-child(3) .block04_list-headings::after {
  background-size: 59.6666vw 9.533333vw;
  transition: all .5s ease .9s;
}

#mq_ysl2106 .block04_list-item:nth-child(3) .block04_list-headings::before {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings3_sp@2x.png);
}

#mq_ysl2106 .block04_list-item:nth-child(3) .block04_list-headings::after {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings3-orange_sp@2x.png);
}


#mq_ysl2106 .block04_list-item:nth-child(4) .block04_list-headings {
  width: 60vw;
  height: 3.86666vw;
}

#mq_ysl2106 .block04_list-item:nth-child(4) .block04_list-headings::before,
#mq_ysl2106 .block04_list-item:nth-child(4) .block04_list-headings::after {
  background-size: 60vw 3.86666vw;
  transition: all .5s ease 1.1s;
}

#mq_ysl2106 .block04_list-item:nth-child(4) .block04_list-headings::before {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings4_sp@2x.png);
}

#mq_ysl2106 .block04_list-item:nth-child(4) .block04_list-headings::after {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/ysl2106/img/block04_list-headings4-orange_sp@2x.png);
}


#mq_ysl2106 .block04_list-caption {
  font-size: 2.6666vw;
  line-height: 1.75;
}

#mq_ysl2106 .block04_list-caution {
  font-size: 2.6666vw;
  line-height: 1.75;
}