@charset "UTF-8";

[data-js-inview-01] { opacity: 0; transition: opacity 0.3s; }

.inview { position: relative; -webkit-animation: bottomToTop 0.8s ease-out forwards; animation: bottomToTop 0.8s ease-out forwards; opacity: 1; }

@-webkit-keyframes bottomToTop { 0% { top: 100px;
    opacity: 0; }
  100% { top: 0;
    opacity: 1; } }

@keyframes bottomToTop { 0% { top: 100px;
    opacity: 0; }
  100% { top: 0;
    opacity: 1; } }

.inview.wrap-img-model { -webkit-animation: rightToLeft 0.8s ease-out forwards; animation: rightToLeft 0.8s ease-out forwards; opacity: 1; }

@-webkit-keyframes rightToLeft { 0% { right: -100vw;
    opacity: 0; }
  100% { right: 0;
    opacity: 1; } }

@keyframes rightToLeft { 0% { right: -100vw;
    opacity: 0; }
  100% { right: 0;
    opacity: 1; } }

.inview.wrap-after:after { -webkit-animation: runWrapAfter 0.8s ease-out; animation: runWrapAfter 0.8s ease-out; opacity: 1; }

@-webkit-keyframes runWrapAfter { 0% { right: 100%; }
  100% { right: 0; } }

@keyframes runWrapAfter { 0% { right: 100%; }
  100% { right: 0; } }

.inview.wrap-after.pt1:after { -webkit-animation: runWrapAfterPT1 0.8s ease-out; animation: runWrapAfterPT1 0.8s ease-out; opacity: 1; }

@-webkit-keyframes runWrapAfterPT1 { 0% { left: 100%; }
  100% { left: 0; } }

@keyframes runWrapAfterPT1 { 0% { left: 100%; }
  100% { left: 0; } }

.inview.wrap-after.pt1 .wrap-img-model { -webkit-animation: runLeftToRight 0.8s ease-out; animation: runLeftToRight 0.8s ease-out; opacity: 1; }

@-webkit-keyframes runLeftToRight { 0% { right: 100%; }
  100% { right: 0; } }

@keyframes runLeftToRight { 0% { right: 100%; }
  100% { right: 0; } }

.inview.wrap-hdg-lv3-pt6:after { -webkit-animation: runHdgLv3PT6 0.8s ease-out; animation: runHdgLv3PT6 0.8s ease-out; opacity: 1; }

@-webkit-keyframes runHdgLv3PT6 { 0% { right: 100%; }
  100% { right: 0; } }

@keyframes runHdgLv3PT6 { 0% { right: 100%; }
  100% { right: 0; } }

.inview.sec-makelook .wrap-content:before { -webkit-animation: runRightToLeftMakeLook 0.8s ease-out; animation: runRightToLeftMakeLook 0.8s ease-out; opacity: 1; }

@-webkit-keyframes runRightToLeftMakeLook { 0% { left: 100%; }
  100% { left: 0; } }

@keyframes runRightToLeftMakeLook { 0% { left: 100%; }
  100% { left: 0; } }

body.l-all { background-color: #FFFFFF; }

.wrap-img img { max-width: 100%; height: auto; }

.l-head { position: relative; }

.l-head > * { position: relative; z-index: 1; }

.l-head:before { content: ""; display: block; background-image: url(/special/makeup/campaign/2511/img/img-bg-mv.webp); background-size: contain; background-position: top left; position: absolute; inset: 0; margin: auto; }

.l-head:after { content: ""; display: block; left: 0; right: 0; height: 80px; background-color: #A50319; position: absolute; top: 0; }

.l-main { margin-top: 0; }

.wrap-bg { position: relative; z-index: 1; }

.wrap-bg > * { position: relative; z-index: 1; }

.wrap-bg:before { content: ""; display: block; background-image: url(/special/makeup/campaign/2511/img/img_bg.webp); background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; inset: 0; margin: auto; position: absolute; bottom: clamp(-50px, -4.5%, -45px); }

.sec-makelook { margin-top: 60px; padding-top: 0; }

.sec-makelook .wrap-content { padding-top: 20px; }

.sec-makelook .wrap-content:before { top: 0; right: 0; left: 0; }

.sec-makelook .wrap-content:after { top: 0; left: 0; right: 0; }

.sec-makelook .wrap-content .hdg-makelook { font-weight: 600; font-size: 3.2rem; line-height: 1.125; }

.sec-makelook .wrap-content .hdg-makelook .sub { font-size: 2.4rem; line-height: 1.5; }

.sec-makelook .wrap-makelook .ttl span { font-weight: 500; }

.all-makeup-look { max-width: 350px; margin: 32px auto 0; }

.list-btn { margin-top: 24px; }

[data-cmnjs-accordion-wrap] + [data-cmnjs-accordion-wrap] { margin-top: 9px; }

[data-cmnjs-accordion-btn] .close { display: none; }

[data-cmnjs-accordion-btn].accordionActive .open { display: none; }

[data-cmnjs-accordion-btn].accordionActive .close { display: block; }

[data-cmnjs-accordion-area] { display: none; }

[data-cmnjs-accordion-area].accordionActive { display: block; }

.wrap-relative { position: relative; }

.btn-absolute { position: absolute; bottom: 17.6%; left: 0; right: 0; height: 20.9%; }

.btn-absolute a { display: block; width: 100%; height: 100%; }

.btn-absolute.pt1 { bottom: 9.1%; height: 6%; }

.btn-absolute.pt2 { bottom: 5.6%; height: 5.5%; left: unset; right: 8%; width: 42.2%; }

.btn-absolute.pt3 { bottom: 7%; height: 6.6%; left: unset; right: 8%; width: 42.2%; }

.btn-absolute.pt4 { bottom: 38%; height: 4.6%; left: unset; right: 8%; width: 42.2%; }

.btn-absolute.pt5 { bottom: 4.8%; height: 4.6%; left: unset; right: 8%; width: 42.2%; }

.btn-absolute.pt6 { bottom: 48.2%; height: 2.3%; left: unset; right: 53%; width: 35.2%; }

.btn-absolute.pt7 { bottom: 48.2%; height: 2.3%; left: unset; right: 11.8%; width: 35.2%; }

.btn-absolute.pt8 { bottom: 26.4%; height: 2.2%; left: unset; right: 53%; width: 35.2%; }

.btn-absolute.pt9 { bottom: 26.4%; height: 2.2%; left: unset; right: 11.8%; width: 35.2%; }

.btn-close-accordion { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; }

.btn-close-accordion.accordionActive { pointer-events: visible; }

.btn-close-accordion > a { width: 100%; display: block; height: 100%; }

.wrap-video-area { padding: 0 6.7vw; width: 100%; height: 100%; background-color: transparent; margin-bottom: -4px; }

.wrap-video-area > * { padding: 0 4.9vw 4px; background-color: #30130b; width: 100%; height: 100%; max-height: 1183px; min-height: 592px; }

@media all and (min-width: 768px) { .inview.wrap-after:after { -webkit-animation: runLeftToRightPC 0.8s ease-out; animation: runLeftToRightPC 0.8s ease-out; opacity: 1; }
  @-webkit-keyframes runLeftToRightPC { 0% { right: 100%; }
    100% { right: 95px; } }
  @keyframes runLeftToRightPC { 0% { right: 100%; }
    100% { right: 95px; } }
  .inview.wrap-after.pt1:after { -webkit-animation: runWrapAfterPT1PC 0.8s ease-out; animation: runWrapAfterPT1PC 0.8s ease-out; opacity: 1; }
  @-webkit-keyframes runWrapAfterPT1PC { 0% { left: 100%; }
    100% { left: 95px; } }
  @keyframes runWrapAfterPT1PC { 0% { left: 100%; }
    100% { left: 95px; } } .l-head:after { height: 96px; } .wrap-main { width: 750px; margin-inline: auto; } .wrap-bg:before { bottom: clamp(-100px, -6.5%, -45px); } .sec-makelook { margin-top: 142px; }
  .sec-makelook .wrap-content:after { left: -100vw; right: -100vw; }
  .sec-makelook .wrap-content .hdg-makelook { font-size: 4.8rem; line-height: 1.44; }
  .sec-makelook .wrap-content .hdg-makelook .sub { font-size: 3.2rem; } .all-makeup-look { margin-top: 48px; } .sec-topics-pt1 { margin-top: 63px; } [data-cmnjs-accordion-wrap] + [data-cmnjs-accordion-wrap] { margin-top: 18px; } [data-cmnjs-accordion-btn] { cursor: pointer; } .wrap-video-area { padding: 0 50px; margin-bottom: -8px; }
  .wrap-video-area > * { padding: 0 36px 8px; height: 1183px; } }