@charset "UTF-8";

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

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

body {
  padding-top: 55px!important;
}

#mqWrapper {
	width: 100%;
	position: static;
}

#mqWrapper main {
	width: 100%;
	margin: 0;
	padding-bottom: 0;
}

#mq_lancome2306 section {
  padding: 0 !important;
}

/*--------------------Common*/
#mq_lancome2306 {
	/*position: relative;*/
	width: 100%;
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
	line-height: 1;
	word-break: normal;
	line-break: strict;
  overflow: hidden;
}

#mq_lancome2306 img {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
  width: 100%;
  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: 18px;
  line-height: 1.666;
}

#mq_lancome2306 .credit {
  font-size: 14px;
  line-height: 1.428;
}

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

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

#mq_lancome2306 a:hover {
  opacity: .6;
  transition: all ease .6s;
}

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


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

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


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


/*--------------------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;
}


#mq_lancome2306 .mv .inner {
  width: 960px;
  margin: 0 auto;
}


/*--------------------Layout*/
#mq_lancome2306 .inner {
	margin: 0 auto;
	width: 750px;
  position: relative;
}


/*--------------------------------------------------------------------------------------
mq_lancome2306
-------------------------------------------------------------------------------------- */

/*-------------------------------------------------------------------------------- pr */
#mq_lancome2306 .pr {
  width: 30px;
  height: 17px;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 3;
}
/*----------------------------------------------------------------------------contact/credit/share */
#mq_lancome2306 .contact {
  font-size: 18px;
  line-height: 1.666;
  font-weight: bold;
  text-align: center;
  margin: 60px auto 0;
}

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

#mq_lancome2306 .staff_credit {
  font-size: 14px;
  line-height: 1.428;
  text-align: center;
  margin: 35px auto 0;
}

#mq_lancome2306 .item_credit {
  font-size: 14px;
  line-height: 1.428;
  text-align: center;
  margin: 15px auto 0;
}

#mq_lancome2306 .share {
  margin: 40px auto 140px;
  text-align: center;
}

#mq_lancome2306 .share_headings {
  width: 77px;
  margin: 0 auto 25px;
}

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

#mq_lancome2306 .share_item {
  width: 56px;
  display: inline-block;
  margin: 0 10px;
}

/* mv ---------------------------------------------------------------------------------- */
#mq_lancome2306 .mv {
  position: relative;
  height: 909px;
  -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: 1399px;
  height: 909px;
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

#mq_lancome2306 .mv_main {
  position: relative;
  margin: -35px auto 0;
}

#mq_lancome2306 .mv_item {
  width: 396px;
  position: absolute;
  right: -32px;
  bottom: 72px;
  -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: 692px;
  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) 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 .is-show .mv_text {
  -webkit-transform: translate(0, 0);
  filter: alpha(opacity=100);
  opacity: 1;
  transform: translate(0, 0);
}

#mq_lancome2306 .mv_main .caption,
#mq_lancome2306 .mv_sub .caption {
  margin: 25px auto 0;
  width: 690px;
}

#mq_lancome2306 .mv_sub {
  margin: 50px auto 0;
  padding: 55px 0;
  transition: all 1s ease .5s;
  position: relative;
}

#mq_lancome2306 .mv_sub::after {
  content: '';
  display: block;
  background-color: #e7e9e8;
  background-size: 100% 330px;
  width: 0;
  height: 330px;
  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: 642px;
  margin: 0 auto;
}

/* block01 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block01 {
  margin: 100px auto 0;
}

#mq_lancome2306 .block01_headings {
  width: 561.5px;
  height: 179px;
  margin: 0 auto;
}

#mq_lancome2306 .block01 .slidein.is-active {
  width: 561.5px;
  left: 90px;
}

#mq_lancome2306 .block01 .caption {
  width: 690px;
  margin: 25px auto 0;
}

#mq_lancome2306 .block01_main {
  position: relative;
  width: 750px;
  margin: 30px auto 0
}

#mq_lancome2306 .block01_ph {
  width: 750px;
  margin: 0 auto;
}

#mq_lancome2306 .block01 .lead {
  width: 690px;
  font-size: 28px;
  line-height: 1.357;
  font-weight: bold;
  margin: 30px auto 0;
}

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

/* block02 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block02 {
  margin: 100px auto 0;
  padding: 60px 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: 690px;
  margin: 0 auto;
  background: rgba( 255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(4, 4, 4, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 3px 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: 60px 0;
}

#mq_lancome2306 .block02_headings {
  width: 394.5px;
  margin: 0 auto;
}

#mq_lancome2306 .block02_detail {
  position: relative;
  width: 100%;
  height: 600px;
  display: block;
  -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;
  margin: 40px auto 0;
}

#mq_lancome2306 .block02_detail-item:nth-child(1) {
  width: 264px;
  left: 71px;
}

#mq_lancome2306 .block02_detail-item:nth-child(2) {
  width: 235px;
  left: 404px;
}

#mq_lancome2306 .block02_detail-item:nth-child(3) {
  width: 190px;
  top: 177px;
  left: 43px;
}

#mq_lancome2306 .block02_detail-item:nth-child(4) {
  width: 190px;
  top: 177px;
  left: 441px;
}

#mq_lancome2306 .block02_detail-item:nth-child(5) {
  width: 260px;
  top: 391px;
  left: 71px;
}

#mq_lancome2306 .block02_detail-item:nth-child(6) {
  width: 251px;
  top: 391px;
  left: 404px;
}

#mq_lancome2306 .block02_detail-item:nth-child(7) {
  top: 174px;
  left: 249px;
  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: 257px;
}

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

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

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

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

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

#mq_lancome2306 .block02_detail-ph {
  width: 197px;
}

#mq_lancome2306 .block02_detail-text {
  margin: 20px auto 0;
}

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

#mq_lancome2306 .block02_balloon {
  position: relative;
  margin: 30px auto 0;
  height: 426px;
}

#mq_lancome2306 .block02_balloon1 {
  width: 303.5px;
  position: absolute;
  top: 0;
  left: 71px;
}

#mq_lancome2306 .block02_balloon2 {
  width: 341px;
  position: absolute;
  left: 288px;
  bottom: 0;
}

#mq_lancome2306 .block02 .wrap {
  width: 556px;
  position: relative;
  margin: 0 auto;
}

#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@2x.png);
  background-size: 221px 48px;
  content: '';
  display: block;
  width: 0;
  height: 48px;
  background-size: 221px 48px;
  position: absolute;
  top: 0;
  left: 330px;
  transition: all .5s linear .5s;
}

#mq_lancome2306 .is-active .block02_catch {
  width: 221px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 330px;
}

#mq_lancome2306 .block02_ph {
  width: 433px;
  margin: 60px auto 0;
}

#mq_lancome2306 .block02 .caption {
  width: 556px;
  margin: 25px auto 0;
}

/* block03 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block03 {
  margin: 145px auto 0;
}

#mq_lancome2306 .block03_headings {
  width: 556.5px;
  height: 134.5px;
  margin: 0 auto;
}

#mq_lancome2306 .block03 .slidein.is-active  {
  width: 556.5px;
  left: 100px;
}

#mq_lancome2306 .block03 .caption {
  width: 690px;
  margin: 35px auto;
}

#mq_lancome2306 .block03_main {
  width: 750px;
  display: flex;
  margin: 0 auto;
}

#mq_lancome2306 .block03_ph {
  width: 584px;
}

#mq_lancome2306 .block03_text {
  position: relative;
  margin: 60px auto 0;
}

#mq_lancome2306 .block03_catch {
  width: 83px;
  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@2x.png);
  background-size: 85px 59px;
  height: 59px;
  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: 85px;
}

#mq_lancome2306 .block03_catch::before {
  top: -43px;
}

#mq_lancome2306 .block03_catch::after {
  bottom: -43px;
}

#mq_lancome2306 .block03_logo {
  width: 191px;
  position: absolute;
  top: -21px;
  left: -60px;
  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: 15px 0 0;
}

/* block04 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block04 {
  margin: 104px auto 0;
}

#mq_lancome2306 .block04_headings {
  width: 493.5px;
  margin: 0 auto;
  height: 138px;
}

#mq_lancome2306 .block04 .slidein.is-active  {
  width: 493.5px;
  left: 140px;
}
#mq_lancome2306 .block04 .caption {
  width: 690px;
  margin: 40px auto 0;
}

#mq_lancome2306 .block04_main {
  position: relative;
  margin-top: -125px;
  margin-left: -60px;
  z-index: -1;
}

#mq_lancome2306 .block04_ph {
  width: 868px;
  margin: 0 auto;
}

#mq_lancome2306 .block04_text {
  width: 690px;
  margin: -140px auto 0;
}

#mq_lancome2306 .block04 .lead {
  font-size: 28px;
  line-height: 1.357;
  font-weight: bold;
}

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

/* block05 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block05 {
  margin: 80px auto 0;
}

#mq_lancome2306 .block05_headings {
  width: 366px;
  margin: 0 auto;
}

#mq_lancome2306 .block05_main {
  width: 750px;
  margin: 40px auto 0;
}

/* block06 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block06 {
  margin: 60px auto 0;
}

#mq_lancome2306 .block06_main {
  width: 584px;
  margin: 0 auto;
}

#mq_lancome2306 .block06 .credit {
  width: 584px;
  margin: 15px auto 0;
  font-size: 14px;
}

/* block07 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block07 {
  margin: 150px auto 0;
}

#mq_lancome2306 .block07_headings {
  width: 643px;
  margin: 0 auto;
}

#mq_lancome2306 .block07 .caption {
  width: 690px;
  margin: 35px auto 0;
}

#mq_lancome2306 .block07_text {
  width: 690px;
  margin: 0 auto;
}

#mq_lancome2306 .block07_main {
  position: relative;
  width: 750px;
  margin: 30px auto 0;
}

#mq_lancome2306 .block07_ph {
  width: 750px;
}

#mq_lancome2306 .block07 .lead {
  font-size: 28px;
  line-height: 1.357;
  font-weight: bold;
  margin: 20px auto 0;
}

#mq_lancome2306 .block07_text .caption {
  margin-top: 10px;
}

/* block08 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block08 {
  margin: 50px auto 0;
}

#mq_lancome2306 .block08_main {
  width: 750px;
  display: flex;
}

#mq_lancome2306 .block08_ph {
  width: 584px;
}

#mq_lancome2306 .block08_text {
  position: relative;
  margin-left: 30px;
  margin-top: 20px;
}

#mq_lancome2306 .block08_catch {
  width: 82px;
  margin-top: 150px;
  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@2x.png);
  background-size: 85px 59px;
  width: 0;
  height: 59px;
  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: 85px;
}

#mq_lancome2306 .block08_catch::before {
  top: -43px;
}

#mq_lancome2306 .block08_catch::after {
  bottom: -43px;
}

#mq_lancome2306 .block08_logo {
  width: 205.5px;
  position: absolute;
  top: -21px;
  left: -60px;
  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: 15px;
}

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

#mq_lancome2306 .block09 .inner {
  padding: 70px 75px 60px;
}

#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@2x.png);
  background-size: 754px 930px;
  width: 754px;
  height: 930px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50%);
}

#mq_lancome2306 .block09_headings {
  width: 323px;
  margin: 0 auto;
}

#mq_lancome2306 .block09_ph {
  width: 599px;
  margin: 30px auto 0;
}

#mq_lancome2306 .block09 .caption {
  margin: 35px auto 0;
}


/* block10 ---------------------------------------------------------------------------------- */
#mq_lancome2306 .block10 {
  margin: 50px auto 0;
}

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

/* btn ---------------------------------------------------------------------------------- */
#mq_lancome2306 .btn_detail {
  width: 366px;
  height: 90px;
  margin: 60px auto 0;
}

#mq_lancome2306 .btn_detail a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  color: #fff;
  font-size: 16px;
  line-height: 1.333;
  font-weight: bold;
  text-align: center;
  transition: all ease .5s;
  z-index: 1;
  padding-top: 23px;
}

#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: 90px;
  padding-top: 0;
  margin-top: 35px;
}

#mq_lancome2306 .btn_black a {
  background: #000;
  margin-top: 100px;
}

#mq_lancome2306 .btn_line {
  position: absolute;
  background-color: #fff;
  width: 53px;
  height: 1px;
  top: 44px;
  left: 312px;
  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: 10px;
  height: 2px;
  position: absolute;
  right: 0;
}

@keyframes btnline {
  0% {
    width: 10px;
  }
  5% {
    opacity: 1;
    width: 10px;
  }
  50% {
    width: 53px;
  }
}

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

#mq_lancome2306 .icon_catch {
  width: 131px;
  margin: 0 auto;
}

#mq_lancome2306 .block01 .icon {
  top: 672px;
  right: 25px;
}

#mq_lancome2306 .block04 .icon {
  top: 430px;
  left: 130px;
}

#mq_lancome2306 .block07 .icon {
  top: 84px;
  right: 50px;
}

#mq_lancome2306 .icon_ph {
  width: 151px;
  margin: 5px 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: 100%;
  height: 100%;
  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;
}

/* 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@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 84px;
  height: 84px;
  position: absolute;
  z-index: 2;
}

#mq_lancome2306 .twincle {
  opacity: 0;
}

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

#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@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 68px;
  height: 68px;
  position: absolute;
  z-index: 2;
}

#mq_lancome2306 .twincle1 {
  top: -30px;
  right: -60px;
  animation: twincle1 5s 0s infinite;
}

#mq_lancome2306 .twincle2 {
  top: 0;
  right: -75px;
  animation: twincle2 5s 1s infinite;
}

#mq_lancome2306 .twincle3 {
  top: 10px;
  right: 315px;
  animation: twincle3 5s 2s infinite;
}

#mq_lancome2306 .twincle4 {
  top: -60px;
  right: 285px;
  animation: twincle4 5s 3s infinite;
}