/* Slider */
.slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
.slick-dots { position: absolute; bottom: 140px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots:after { display: block; content: ''; position: absolute; left: 0; right: 0; bottom: -90px; margin: auto; width: 65px; height: 33px; background: url(/-/media/obagi/top/images/btn_next.png) no-repeat; background-size: contain; }
.slick-dots li { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 12px 0 12px; padding: 0; background: #c5c6c6; cursor: pointer; border-radius: 50%; }
.slick-dots li.slick-active { background: #000; }
#js-main-visual-list.is-white .slick-dots li.slick-active { background: #fff; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 8px; height: 8px; padding: 0; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }

#block-header { top: 0; }

#hdr-menu { position: fixed; display: inline-block !important; overflow: scroll; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0 40px 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

#hdr-menu-close { display: inline-block; cursor: pointer; }

#btn-buy { z-index: 101; }

.js-accordion .js-accordion-box { position: relative; overflow: hidden; height: 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

#top-contentwrap { position: relative; z-index: 1; width: 100%; background: #fff;}

.list_purpose_item.corrent a { pointer-events: none; }

#lineup-purpose-items .item-list > li.is-none { display: none !important; }

@media screen and (min-width: 0px) and (max-width: 640px), tv and (min-width: 0px) and (max-width: 640px) { #block-header { position: fixed; z-index: 100; width: 100%; background: rgba(255, 255, 255, 0.3); }
  #hdr-menu { right: -100%; }
  #hdr-menu.is-open { right: 0; }
  #btn-buy a { width: 61px; height: 61px; }
  .slick-dots { bottom: 135px; }
  .slick-dots:after { width: 101px; height: 52px; } }

@media screen and (min-width: 641px), tv and (min-width: 641px) { #hdr-menu { right: -674px; }
  #hdr-menu.is-open { right: 0; } }

body.top #top-contentwrap { margin-top: 0 !important; }

@-webkit-keyframes modal-video { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes modal-video { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
  to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }

@keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
  to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }

body.about_index .block-contents-1 { position: relative; width: 100%; height: auto; margin: 0; padding: 0 !important; min-height: auto; }


body.about_index #about_main { display: block; margin: 0 auto !important; padding: 0; }

body.about_index #about_greeting { position: relative; background: #fff; opacity: 1; overflow: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1.6s; transition-duration: 1.6s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_greeting .inv-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(255, 255, 255, 0.55); -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 2.6s; transition-duration: 2.6s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); transition-timing-function: cubic-bezier(1, 0, 0, 1); }

body.about_index #about_greeting .inv-bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_greeting .inv-title { opacity: 0; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }

body.about_index #about_greeting .inv-text { opacity: 0; -webkit-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_greeting.is-visible { opacity: 1; }

body.about_index #about_greeting.is-visible .inv-title { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

body.about_index #about_greeting.is-visible .inv-text { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }

body.about_index #about_greeting.is-visible .inv-bg { left: 105%; }

body.about_index #about_greeting.is-visible .inv-bg:after { left: 100%; }

body.about_index #about_concept { position: relative; opacity: 1; overflow: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_concept .inv-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(238, 238, 238, 0.55); -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }

body.about_index #about_concept .inv-bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #eeeeee; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_concept .inv-title { opacity: 0; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }

body.about_index #about_concept .inv-text { opacity: 0; -webkit-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_concept.is-visible { opacity: 1; }

body.about_index #about_concept.is-visible .inv-title { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

body.about_index #about_concept.is-visible .inv-text { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }

body.about_index #about_concept.is-visible .inv-bg { left: 105%; }

body.about_index #about_concept.is-visible .inv-bg:after { left: 100%; }

body.about_index #about_story { position: relative; opacity: 1; overflow: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_story .inv-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.55); -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }

body.about_index #about_story .inv-bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_story .inv-title { opacity: 0; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }

body.about_index #about_story .inv-text { opacity: 0; -webkit-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_story.is-visible { opacity: 1; }

body.about_index #about_story.is-visible .inv-title { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

body.about_index #about_story.is-visible .inv-text { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }

body.about_index #about_story.is-visible .inv-bg { left: 105%; }

body.about_index #about_story.is-visible .inv-bg:after { left: 100%; }

body.about_index #about_message { position: relative; opacity: 1; overflow: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_message .inv-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(125, 125, 125, 0.55); -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }

body.about_index #about_message .inv-bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #7d7d7d; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 1.8s; transition-duration: 1.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_message .inv-title { opacity: 0; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 0; transition-delay: 0; -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }

body.about_index #about_message .inv-text { opacity: 0; -webkit-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

body.about_index #about_message.is-visible { opacity: 1; }

body.about_index #about_message.is-visible .inv-title { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

body.about_index #about_message.is-visible .inv-text { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }

body.about_index #about_message.is-visible .inv-bg { left: 105%; }

body.about_index #about_message.is-visible .inv-bg:after { left: 100%; }

@-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes load8 { 0% { -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }


@media screen and (min-width: 0px) and (max-width: 640px), tv and (min-width: 0px) and (max-width: 640px) { body.about_index #btn_modal { width: 43.20%; }
  body.about_index #btn_modal img { width: 100%; height: auto; }
  body.about_index .block-contents-1 { margin-top: 0; } }

@media screen and (min-width: 1025px), tv and (min-width: 1025px) { body.about_index #about_main { width: 1200px; } }