@charset "UTF-8";

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

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

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

#mq_lancome2306 section {
  padding: 0 !important;
}

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

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

#mq_lancome2306 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_lancome2306 p {
  font-size: 3.733333vw;
  line-height: 1.714;
}

#mq_lancome2306 .credit {
  font-size: 2.6666vw;
  line-height: 1.5;
}

#mq_lancome2306 .caption {
  width: 92vw;
  margin: 4vw auto 0;
}

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

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

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

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


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

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

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

/*Layout*/
#mq_lancome2306 .inner {
  width: 100%;
}

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

/*----------------------------------------------------------------------------contact/credit/share */
#mq_lancome2306 .contact {
  font-size: 3.73333333vw;
  line-height: 1.714;
  text-align: center;
  margin: 8vw auto 0;
}

#mq_lancome2306 .contact a {
  border-bottom: 1px #000 solid;
  padding-bottom: 1vw;
}

#mq_lancome2306 .staff_credit  {
  font-size: 2.6666vw;
  line-height: 1.5;
  margin: 9.3333vw auto 0;
}

#mq_lancome2306 .item_credit {
  font-size: 2.6666vw;
  line-height: 1.5;
  margin: 5.3333vw auto 0;
}

#mq_lancome2306 .share {
  margin: 9.3333vw auto 13.33333vw;
  text-align: center;
}

#mq_lancome2306 .share_headings {
  width: 14.66666vw;
  margin: 0 auto 4vw;
}

#mq_lancome2306 .share_list {
  margin: 0 auto;
  text-align: center;
}

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

/* mv ---------------------------------------------------------------------------------- */
#mq_lancome2306 .mv {
  position: relative;
  height: 97.6vw;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -moz-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

#mq_lancome2306 .mv.is-show {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=1);
  opacity: 1;
}

#mq_lancome2306 .mv_ph {
  width: 100vw;
  height: 97.6vw;
  z-index: -1;
}

#mq_lancome2306 .mv_main {
  position: relative;
  margin: 4vw auto 0;
}

#mq_lancome2306 .mv_text {
  margin: 5.333vw auto 0;
}

#mq_lancome2306 .mv_item {
  width: 48.26666vw;
  position: absolute;
  right: 3.222vw;
  top:  -61vw;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -moz-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

#mq_lancome2306 .is-show .mv_item {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=1);
  opacity: 1;
}

#mq_lancome2306 .mv_title {
  position: relative;
  width: 91.86666vw;
  margin: 0 auto;
}

#mq_lancome2306 .mv_text {
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: alpha(opacity=0);
  opacity: 0;
  transform-style: preserve-3d;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -o-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

#mq_lancome2306 .is-show .mv_text {
  -webkit-transform: translate(0, 0);
  filter: alpha(opacity=100);
  opacity: 1;
  transform: translate(0, 0);
}

#mq_lancome2306 .mv_main .caption {
  margin: 8vw auto 0;
}

#mq_lancome2306 .mv_sub {
  margin: 12.666vw auto 0;
  padding: 9.333vw 0;
  transition: all .5s ease .5s;
  position: relative;
}

#mq_lancome2306 .mv_sub::after {
  content: '';
  display: block;
  background-color: #e7e9e8;
  background-size: 100% 100%;
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s linear;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -ms-transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -moz-transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
}

#mq_lancome2306 .mv_sub.is-active::after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=1);
  opacity: 1;
  width: 100%;
  left: 0;
}

#mq_lancome2306 .mv_sub .inner {
  -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
  -ms-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
  -moz-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
}

#mq_lancome2306 .mv_headings {
  width: 91.93333vw;
  margin: 0 auto;
}

#mq_lancome2306 .mv_sub .caption {
  margin: 1.333vw auto 0;
}

/* block01 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block01 {
  margin: 18.6666vw auto 0;
}

#mq_lancome2306 .block01_headings {
  width: 74.933333vw;
  height: 23.86666vw;
  margin: 0 auto;
}

#mq_lancome2306 .block01 .slidein.is-active {
  width: 74.933333vw;
  left: 13.0666vw;
}

#mq_lancome2306 .block01_main {
  position: relative;
  height: 122.4vw;
}

#mq_lancome2306 .block01_ph {
  width: 100%;
  margin: 6.6666vw auto 0;
}

#mq_lancome2306 .block01 .lead {
  width: 92vw;
  margin: 4vw auto 2vw;
  font-weight: bold;
  font-size: 4.26666vw;
  line-height: 1.5;
}

#mq_lancome2306 .block01_text .caption {
  margin-top: 0;
}

/* block02 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block02 {
  margin: 12.666vw auto 0;
  padding: 6.6666vw 0;
  background-size: cover;
  background-image: linear-gradient(-45deg,rgba(173, 224, 248, .76) 0%, rgba(232, 241, 235, .76) 33%, rgba(235, 245, 237, .76) 56%, rgba(182, 198, 230, .76) 100%);
}

#mq_lancome2306 .block02 .inner {
  width: 92vw;
  margin: 0 auto;
  background: rgba( 255, 255, 255, 0.4);
  box-shadow: 0 4px 16px 0 rgba(4, 4, 4, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid #fff;
  border-image: linear-gradient(rgba( 255, 255, 255, 1 ) 1%,rgba( 151, 197, 230, 1 ) 47%,rgba( 255, 255, 255, 1 ) 100%);
  border-image-slice: 1;
  padding: 8vw 0;
}

#mq_lancome2306 .block02_headings {
  width: 74.6666vw;
  margin: 0 auto 5.3333vw;
}

#mq_lancome2306 .block02_detail {
  position: relative;
  width: 100%;
  height: 102vw;
  display: block;
  margin: 0 auto;
  -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -o-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
}

#mq_lancome2306 .block02_detail-item {
  position: absolute;
}

#mq_lancome2306 .block02_detail-item:nth-child(1) {
  width: 35.2vw;
  left: 8.26666vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(2) {
  width: 32.3333vw;
  left: 51.333vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(3) {
  width: 27.6vw;
  top: 32vw;
  left: 3.2vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(4) {
  width: 29.33333vw;
  top: 32vw;
  left: 58.06666vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(5) {
  width: 34.6666vw;
  top: 66.333vw;
  left: 8.26666vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(6) {
  width: 33.46666vw;
  top: 66.333vw;
  left: 48.93333vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(7) {
  top: 29.6vw;
  left: 33.2vw;
  opacity: 0;
}

#mq_lancome2306 .is-active .block02_detail-item:nth-child(7) {
  opacity: 1;
  -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
  -o-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
}

#mq_lancome2306 .block02_detail-item:nth-child(1) .block02_detail-lead {
  width: 34.26666vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(2) .block02_detail-lead {
  width: 29.3333vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(3) .block02_detail-lead {
  width: 30.06666vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(4) .block02_detail-lead {
  width: 29.6vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(5) .block02_detail-lead {
  width: 31.63333vw;
}

#mq_lancome2306 .block02_detail-item:nth-child(6) .block02_detail-lead {
  width: 29.86666vw;
}

#mq_lancome2306 .block02_detail-ph {
  width: 23.06666vw;
}

#mq_lancome2306 .block02_detail-text {
  font-size: 3.2vw;
  line-height: 1.5;
  margin: 2.666vw auto 0;
}

#mq_lancome2306 .block02_detail-item:nth-child(4) .block02_detail-text {
  padding-left: 2.9333vw;
}

#mq_lancome2306 .block02_balloon {
  position: relative;
  margin: 0 auto;
  height: 53.3333vw;
}

#mq_lancome2306 .block02_balloon1 {
  width: 40.46666vw;
  position: absolute;
  top: 0;
  left: 6.6666vw;
}

#mq_lancome2306 .block02_balloon2 {
  width: 45.46666vw;
  position: absolute;
  left: 39.3333vw;
  bottom: 0;
}

#mq_lancome2306 .block02 .wrap {
  width: 78.4vw;
  position: relative;
  margin: 4vw auto 0;
}

/* #mq_lancome2306 .block02 .caption {
  font-size: 3.2vw;
  line-height: 1.5;
} */

#mq_lancome2306 .block02_catch {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/lancome2306/img/block02_catch_sp@2x.png);
  background-size: 29.46666vw 6.4vw;
  content: '';
  display: block;
  width: 0;
  height: 6.4vw;
  position: absolute;
  top: 0;
  left: 45.46666vw;
  transition: all .5s linear .5s;
}

#mq_lancome2306 .is-active .block02_catch {
  width: 29.46666vw;
  height: 6.4vw;
  position: absolute;
  top: 0;
  left: 45.46666vw;
}

#mq_lancome2306 .block02_ph {
  width: 61.53333vw;
  margin: 1.3333vw auto 0;
}

#mq_lancome2306 .block02 .caption {
  width: 78.4vw;
  margin: 0.6666vw auto 0;
}

/* block03 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block03 {
  margin: 18.666vw auto 0;
}

#mq_lancome2306 .block03_headings {
  width: 74.2vw;
  height: 17.933333vw;
  margin: 0 auto;
}

#mq_lancome2306 .block03 .slidein.is-active {
  width: 74.2vw;
  left: 13.6vw;
}

#mq_lancome2306 .block03_main {
  width:  100%;
  display: flex;
  margin: 5.333vw auto 0;
}

#mq_lancome2306 .block03_ph {
  width: 77.866666vw
}

#mq_lancome2306 .block03_text {
  position: relative;
  margin: 9.8666vw auto 0;
}

#mq_lancome2306 .block03_catch {
  width: 11.06666vw;
  z-index: 1;
  position: relative;
}

#mq_lancome2306 .block03_catch::before,
#mq_lancome2306 .block03_catch::after {
  content: '';
  display: block;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/lancome2306/img/block03_line_sp@2x.png);
  background-size: 11.333vw 7.86666vw;
  height: 7.86666vw;
  z-index: 2;
  position: absolute;
  left: 0;
  width: 0;
  transition: all .5s linear .5s;
}

#mq_lancome2306 .is-active .block03_catch::before,
#mq_lancome2306 .is-active .block03_catch::after {
  width: 11.333vw;
}

#mq_lancome2306 .block03_catch::before {
  top: -5.6vw;
}

#mq_lancome2306 .block03_catch::after {
  bottom: -5.6vw;
}

#mq_lancome2306 .block03_logo {
  width: 25.2vw;
  position: absolute;
  top: -2.9333vw;
  right: -5.644444vw;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -ms-transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -moz-transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
}

#mq_lancome2306 .is-active .block03_logo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=1);
  opacity: 1;
}

#mq_lancome2306 .block03 .credit {
  margin: 2.666vw 0 0 4vw;
}

/* block04 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block04 {
  margin: 19.3333vw auto 0;
}

#mq_lancome2306 .block04_headings {
  width: 65.8vw;
  height: 18.4vw;
  margin: 0 auto;
}

#mq_lancome2306 .block04 .slidein.is-active {
  width: 65.8vw;
  left: 18.4vw;
}

#mq_lancome2306 .block04_main {
  position: relative;
  margin-left: -8vw;
  margin-top: -36vw;
  z-index: -1;
}

#mq_lancome2306 .block04_ph {
  width: 92.6666vw;
  margin: 0 auto;
}

#mq_lancome2306 .block04_text {
  margin: -20vw auto 0;
}

#mq_lancome2306 .block04 .lead {
  width: 92vw;
  margin: 4vw auto 2vw;
  font-weight: bold;
  font-size: 4.26666vw;
  line-height: 1.5;
}

#mq_lancome2306 .block04_text .caption {
  margin-top: 0;
}

/* block05 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block05 {
  margin: 9.33333vw auto 0;
}

#mq_lancome2306 .block05_headings {
  width: 54.9333vw;
  margin: 0 auto;
}

#mq_lancome2306 .block05_main {
  width: 100%;
  margin: 5.33333vw auto 0;
}

/* block06 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block06 {
  margin: 8vw auto 0;
}

#mq_lancome2306 .block06_main {
  width: 77.86666vw;
  margin: 0 auto;
}

#mq_lancome2306 .block06 .credit {
  margin: 2vw 0 0 4vw;
}

/* block07 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block07 {
  margin: 24vw auto 0;
}

#mq_lancome2306 .block07_headings {
  width: 86.26666vw;
  margin: 0 auto;
}

#mq_lancome2306 .block07_text {
  width: 92vw;
  margin: 0 auto;
}

#mq_lancome2306 .block07_main {
  position: relative;
  width: 100%;
  margin: 4vw auto 0;
}

#mq_lancome2306 .block07_ph {
  width: 100%;
}

#mq_lancome2306 .block07 .lead {
  width: 92vw;
  margin: 4vw auto 2vw;
  font-weight: bold;
  font-size: 4.26666vw;
  line-height: 1.5;
}

#mq_lancome2306 .block07_text .caption {
  margin-top: 2.6666vw;
}

/* block08 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block08 {
  margin: 6.6666vw auto 0;
}

#mq_lancome2306 .block08_main {
  width: 100%;
  display: flex;
}

#mq_lancome2306 .block08_ph {
  width: 77.86666vw;
}

#mq_lancome2306 .block08_text {
  position: relative;
  margin-left: 4vw;
  /* margin-top: 20px; */
}

#mq_lancome2306 .block08_catch {
  width: 10.933333vw;
  margin-top: 22vw;
  z-index: 1;
  position: relative;
}

#mq_lancome2306 .block08_catch::before,
#mq_lancome2306 .block08_catch::after {
  content: '';
  display: block;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/lancome2306/img/block08_line_sp@2x.png);
  background-size: 11.333vw 7.86666vw;
  width: 0;
  height: 7.86666vw;
  z-index: 2;
  position: absolute;
  left: 0;
  transition: all .5s linear .5s;
  z-index: 2;
  position: absolute;
  left: 0;
}

#mq_lancome2306 .is-active .block08_catch::before,
#mq_lancome2306 .is-active .block08_catch::after {
  width: 11.333vw;
}

#mq_lancome2306 .block08_catch::before {
  top: -5.6vw;
}

#mq_lancome2306 .block08_catch::after {
  bottom: -5.6vw;
}

#mq_lancome2306 .block08_logo {
  width: 26.6vw;
  position: absolute;
  top: 0;
  left: -8vw;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -ms-transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  -moz-transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
  transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s;
}

#mq_lancome2306 .is-active .block08_logo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=1);
  opacity: 1;
}

#mq_lancome2306 .block08 .credit {
  margin-top: 2.666vw;
  margin-left: 4vw;
}

/* block09 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block09 {
  margin: 19.3333vw auto 0;
  position: relative;
}

#mq_lancome2306 .block09 .inner {
  padding: 8vw 0;
}

#mq_lancome2306 .block09::before {
  content: '';
  display: block;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/lancome2306/img/block09_frame_sp@2x.png);
  background-size: 92.26666vw 157.866666vw;
  width: 92.26666vw;
  height: 157.866666vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50%);
}

#mq_lancome2306 .block09_headings {
  width: 58.3333vw;
  margin: 0 auto;
}

#mq_lancome2306 .block09_ph {
  width: 80.26666vw;
  margin: 8vw auto 0;
}

#mq_lancome2306 .block09 .caption {
  width: 80.26666vw;
  margin: 4vw auto 0;
}

/* block10 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block10 {
  margin: 9.3333vw auto 0;
  width: 92vw;
}

#mq_lancome2306 .block10 .credit .indent {
  display: inline-block;
  text-indent: -1em;
  padding-left: 1em;
}

#mq_lancome2306 .block10 .credit {
  font-size: 2.666vw;
  line-height: 1.8;
}

/* btn ---------------------------------------------------------------------------------- */
#mq_lancome2306 .btn_detail {
  width: 81.33333vw;
  height: 20vw;
  margin: 8vw auto 0;
}

#mq_lancome2306 .btn_detail a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  color: #fff;
  font-size: 3.73333vw;
  line-height: 1.357;
  font-weight: bold;
  text-align: center;
  transition: all ease .5s;
  z-index: 1;
  display: grid;
	place-items: center center;
}

#mq_lancome2306 .btn_blue a {
  background: #6289c6;
}

#mq_lancome2306 .btn_purple a {
  background: #7f509d;
}

#mq_lancome2306 .btn_gray a {
  background: #75707f;
}

#mq_lancome2306 .btn_mauve a {
  background: #9295b3;
  line-height: 20vw;
  padding-top: 0;
}

#mq_lancome2306 .btn_black a {
  background: #000;
}

#mq_lancome2306 .btn_line {
  position: absolute;
  background-color: #fff;
  width: 10vw;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  left: 71vw;
  display: block;
  -webkit-animation: btnline 1.0s infinite ease-out;
  animation: btnline 1.0s infinite ease-out;
}

#mq_lancome2306 .btn_line::after {
  content: "";
  background-color: #000;
  width: 1.3333vw;
  height: 2px;
  position: absolute;
  right: 0;
}

@keyframes btnline {
  0% {
    width: 1.3333vw;
  }
  5% {
    opacity: 1;
    width: 1.3333vw;
  }
  50% {
    width: 10vw;
  }
}

/* icon ---------------------------------------------------------------------------------- */
#mq_lancome2306 .icon {
  position: absolute;
}

#mq_lancome2306 .icon_catch {
  width: 24.93333vw;
  margin: 0 auto;
}

#mq_lancome2306 .icon_ph {
  width: 20.13333vw;
  margin: 0.6666vw auto 0;
  overflow: hidden;
  position: relative;
  opacity: 0;
  -webkit-transition: all .5s ease-in;
  -ms-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

#mq_lancome2306 .icon.is-active .icon_ph {
  opacity: 1;
}

#mq_lancome2306 .icon.is-active .icon_ph::after {
  left: 100%;
  top: 100%;
}

#mq_lancome2306 .icon_ph::after {
  content: '';
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  top: -200%;
  left: -200%;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 80%);
  transition: all 1s linear .5s;
  z-index: 0;
}

#mq_lancome2306 .block01 .icon {
  bottom: 0;
  right: 1.333vw;
}

#mq_lancome2306 .block04 .icon {
  top: 45vw;
  left: 12vw;
}

#mq_lancome2306 .block07 .icon {
  top: 4.8vw;
  right: 4vw;
}

/* twincle ---------------------------------------------------------------------------------- */
#mq_lancome2306 .twincle1,
#mq_lancome2306 .twincle3 {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/lancome2306/img/icon_detail1_sp@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 11.2vw;
  height: 11.2vw;
  position: absolute;
  z-index: 2;
}

#mq_lancome2306 .twincle2,
#mq_lancome2306 .twincle4 {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/lancome2306/img/icon_detail2_sp@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 9.0666666vw;
  height: 9.0666666vw;
  position: absolute;
  z-index: 2;
}

#mq_lancome2306 .twincle1 {
  top: -6vw;
  right: 1vw;
  animation: twincle1 5s 0s infinite;
}

#mq_lancome2306 .twincle2 {
  top: -1.3333vw;
  right: -1.3333vw;
  animation: twincle2 5s 1s infinite;
}

#mq_lancome2306 .twincle3 {
  top: 2vw;
  right: 46vw;
  animation: twincle3 5s 2s infinite;
}

#mq_lancome2306 .twincle4 {
  top: -7vw;
  right: 38vw;
  animation: twincle4 5s 3s infinite;
}

#mq_lancome2306 .twincle {
  opacity: 0;
}

#mq_lancome2306 .twincle.is-show {
  opacity: 1;
}