@import url(/cms/onlineshop/h/beautytopic/js/fancybox/jquery.fancybox.css);
/* =========================================================
 LAYOUT
========================================================= */
div#body {
  width: 100%;
  min-width: 980px;
  padding: 15px 0 0 0;
}
div#body .ttl {
  position: relative;
  width: 980px;
  margin: 0 auto;
}
div#body .ttl .sns {
  top: 0;
}
div#body .scales {
  background-size: cover !important;
}
@media screen and (min-width: 1499px) {
  div#body #mainVisual {
    height: 563px !important;
    padding-top: 0 !important;
    background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_wrap_bg.jpg) center top no-repeat #100601 !important;
  }
}
div#body #mainVisual {
  position: relative;
  min-width: 980x;
  overflow: hidden;
  height: 563px;
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_wrap_bg_03.jpg) center top no-repeat #100601;
  background-size: cover;
  overflow: hidden;
  text-align: center;
}
div#body #mainVisual.max {
  height: 563px;
  padding: 0;
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_wrap_bg.jpg) center top no-repeat #100601 !important;
  background-size: 2000px !important;
}
div#body #mainVisual.max .bg.bg1 {
  background-size: 2000px !important;
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_bg.jpg) center top no-repeat;
}
div#body #mainVisual.max.bg2 {
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_wrap_bg_02.jpg) center top no-repeat;
}
div#body #mainVisual .inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
div#body #mainVisual .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  z-index: 0;
}
div#body #mainVisual .bg.bg1 {
  z-index: 1;
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_bg_02.jpg) center top no-repeat;
  background-size: cover;
}
div#body #mainVisual .bg.bg1 img {
  display: block;
  margin: 0 auto;
  height: 100% !important;
}
div#body #mainVisual .bg.bg2 {
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/main_wrap_bg_02.jpg) center top no-repeat;
  background-size: cover;
  z-index: 0;
}
div#body #mainVisual .bg.bg2 img {
  display: block;
  margin: 0 auto;
  height: 100% !important;
}
div#body #mainVisual h2, div#body #mainVisual .txt, div#body #mainVisual .img {
  position: absolute;
  margin: 0 auto;
  text-align: center;
  z-index: 1;
}
div#body #mainVisual h2 {
  top: 2.5%;
}
div#body #mainVisual .txt {
  top: 36%;
}
div#body #mainVisual .img {
  position: relative;
  top: 310px;
  width: 100%;
  height: 261px;
}
div#body #mainVisual .img img {
  position: absolute;
  height: 261px;
  margin-left: -655px;
  left: 50%;
}
div#body .nav {
  background-color: #000;
}
div#body .nav ul {
  max-width: 1500px;
  margin: 0 auto;
  padding: 19px 0;
  text-align: center;
  font-size: 0;
}
div#body .nav ul li {
  display: inline-block;
  width: auto;
  height: 50%;
  margin: 0 1%;
  vertical-align: top;
}
div#body .section {
  padding-top: 3.45%;
  background-repeat: no-repeat;
  font-size: 0;
}
div#body .section h3 {
  text-align: center;
}
div#body .section h3 img {
  width: 960px !important;
  height: auto !important;
}
div#body #section01 {
  padding: 50px 0 88px;
  background-image: url(/cms/onlineshop/h/beautytopic/img/season/1512/section01_bg.jpg);
  background-color: #1a0001;
  background-size: auto !important;
  background-position: center top;
}
div#body #section01 .inner {
  width: 980px;
  margin: 0 auto;
}
div#body #section01 .inner > img {
  display: block;
  margin: 0 auto;
}
div#body #section01 h3 {
  margin-bottom: 10px;
}
div#body #section01 > img {
  display: block;
}
div#body #section01 .article {
  position: relative;
  margin-top: -6.5%;
}
div#body #section01 .article ul {
  width: 980px;
  bottom: 0;
}
div#body #section01 .article ul li {
  display: inline-block;
  position: absolute;
  bottom: 14%;
}
div#body #section01 .article ul li.btn01 {
  right: 195px;
}
div#body #section01 .article ul li.btn02 {
  right: 7px;
}
div#body #section02 ul, div#body #section03 ul, div#body #section04 ul {
  text-align: center;
}
div#body #section02 ul li, div#body #section03 ul li, div#body #section04 ul li {
  display: inline-block;
  position: relative;
}
div#body #section02 ul li a .btn, div#body #section03 ul li a .btn, div#body #section04 ul li a .btn {
  position: absolute;
  width: 41.55%;
  height: auto;
  bottom: 21.5%;
  left: 9%;
}
div#body #section02 {
  padding-bottom: 4.3%;
  background-image: url(/cms/onlineshop/h/beautytopic/img/season/1512/section02_bg.jpg);
  background-color: #2e0000;
}
div#body #section02 h3 {
  margin-bottom: 2.9%;
}
div#body #section02 ul li {
  width: 45.334%;
  margin: 0 1.5%;
}
div#body #section02 ul li a .btn {
  left: 8%;
  width: 27.206%;
}
div#body #section03 {
  padding-bottom: 3.55%;
  background-image: url(/cms/onlineshop/h/beautytopic/img/season/1512/section03_bg.jpg);
  background-color: #1b0627;
}
div#body #section03 h3 {
  margin-bottom: 2.9%;
}
div#body #section03 ul li {
  width: 29.684%;
  margin: 0 .9% 1.8%;
}
div#body #section04 {
  margin-bottom: 45px;
  padding: 4% 0 10%;
  background-image: url(/cms/onlineshop/h/beautytopic/img/season/1512/section04_bg.jpg);
  background-color: #091d35;
  background-size: contain !important;
  background-position: center top;
}
div#body #section04 h3 {
  margin-bottom: 4.1%;
}
div#body #section04 ul {
  margin-bottom: 7.5%;
}
div#body #section04 ul li {
  width: 58.667%;
}
div#body #section04 ul li a .btn {
  left: 5%;
  width: 21.023%;
}
div#body #section04 .shopTop {
  margin-bottom: 5%;
  text-align: center;
}
div#body #section04 .pagetop {
  text-align: center;
}
div#body #banners {
  width: 960px;
  margin: 0 auto;
}
div#body #banners a {
  display: block;
}
div#body #banners .bannerChat {
  margin-bottom: 20px;
}
div#body #banners .bannerArea {
  margin-bottom: 30px;
  overflow: hidden;
  *zoom: 1;
}
div#body #banners .bannerArea .bannerArea_list, div#body #banners .bannerArea .bannerArea_collection {
  float: left;
}
div#body #banners .bannerArea .bannerArea_list {
  border-right: 1px solid #000;
  margin-right: 14px;
  padding-right: 14px;
}
div#body #banners .bannerNote {
  letter-spacing: -0.2px;
  margin-bottom: 30px;
}
div#body #banners .bannerOnline {
  margin-bottom: 30px;
  text-align: right;
}

/* =========================================================
 ANIMATION
========================================================= */
.appear {
  transform-origin: center top;
  animation: show 1s both;
}

.d1 {
  animation-delay: 2s;
}

.d2 {
  animation-delay: 3s;
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.item {
  transform-origin: center top;
  animation: item 1s both;
  animation-delay: 4s;
}

@keyframes item {
  0% {
    top: 360px;
    opacity: 0;
  }
  100% {
    top: 310px;
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* =========================================================
 FANCYBOX
========================================================= */
.fancybox-overlay {
  background-image: url(/cms/onlineshop/h/beautytopic/img/season/1512/fancybox_overlay.png);
  overflow-x: hidden !important;
}

.fancybox-wrap {
  width: 100% !important;
  background: transparent;
}
.fancybox-wrap .fancybox-skin {
  background: transparent;
}
.fancybox-wrap .fancybox-inner {
  width: 100% !important;
}

.fancybox-close {
  top: 3%;
  right: 3%;
  width: 37px;
  height: 37px;
  background-image: url(/cms/onlineshop/h/beautytopic/img/season/1512/modal_close_top.png);
}

.inline {
  display: none;
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}
.inline > img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.inline .fancyboxClose-top {
  position: absolute;
  top: 2%;
  right: 3%;
  text-align: right;
  z-index: 3;
  cursor: pointer;
}
.inline .fancyboxClose {
  position: absolute;
  bottom: 3.5em;
  width: 100%;
  text-align: center;
  z-index: 1;
}
.inline .fancyboxClose img {
  cursor: pointer;
}
.inline.bg01 {
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/item_bg01.jpg) no-repeat center top #2d0701;
}
.inline.bg02 {
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/item_bg02.jpg) no-repeat center top #1c0627;
}
.inline.bg03 {
  background: url(/cms/onlineshop/h/beautytopic/img/season/1512/item_bg03.jpg) no-repeat center top #091d35;
}
.inline .btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
}
.inline .btn li {
  position: absolute;
}

#item01 .btn li {
  bottom: 11%;
}
#item01 .btn li.btn01 {
  left: 17.5%;
}
#item01 .btn li.btn02 {
  left: 36%;
}
#item01 .btn li.btn03 {
  left: 69%;
}

#item02 .btn li {
  bottom: 13%;
}
#item02 .btn li.btn01 {
  left: 58.5%;
}
#item02 .btn li.btn02 {
  left: 76.5%;
}

#item03 .btn li.btn01 {
  top: 47.5%;
  left: 59.5%;
}
#item03 .btn li.btn02 {
  top: 47.5%;
  left: 78%;
}
#item03 .btn li.btn03 {
  bottom: 23%;
  left: 29%;
}
#item03 .btn li.btn04 {
  bottom: 23%;
  left: 74%;
}

#item04 .btn li.btn01 {
  top: 50.5%;
  left: 59.5%;
}
#item04 .btn li.btn02 {
  top: 50.5%;
  left: 78%;
}
#item04 .btn li.btn03 {
  bottom: 9.3%;
  left: 68.6%;
}

#item05 .btn li.btn01 {
  top: 45.5%;
  left: 66%;
}
#item05 .btn li.btn02 {
  bottom: 22.5%;
  left: 26.5%;
}
#item05 .btn li.btn03 {
  bottom: 22.5%;
  left: 70.5%;
}

#item06 .btn li.btn01 {
  top: 45%;
  left: 61%;
}
#item06 .btn li.btn02 {
  bottom: 23.5%;
  left: 25.5%;
}
#item06 .btn li.btn03 {
  bottom: 29%;
  left: 68%;
}
#item06 .btn li.btn04 {
  bottom: 22.5%;
  left: 68%;
}

#item07 .btn li.btn01 {
  top: 44%;
  left: 59.5%;
}
#item07 .btn li.btn02 {
  top: 44%;
  left: 77.5%;
}
#item07 .btn li.btn03 {
  bottom: 24%;
  left: 26%;
}
#item07 .btn li.btn04 {
  bottom: 22%;
  left: 68%;
}

#item08 .btn li.btn01 {
  top: 42%;
  left: 65%;
}
#item08 .btn li.btn02 {
  bottom: 26%;
  left: 25%;
}
#item08 .btn li.btn03 {
  bottom: 26%;
  left: 68.5%;
}

#item09 .btn li.btn01 {
  top: 50%;
  left: 59.5%;
}
#item09 .btn li.btn02 {
  top: 50%;
  left: 78%;
}
#item09 .btn li.btn03 {
  bottom: 8%;
  left: 68.5%;
}

#item10 .btn li.btn01 {
  top: 34%;
  left: 70.5%;
}
#item10 .btn li.btn02 {
  top: 61.2%;
  left: 70.5%;
}
#item10 .btn li.btn03 {
  bottom: 6.5%;
  left: 59.5%;
}
#item10 .btn li.btn04 {
  bottom: 6.5%;
  left: 78%;
}

#item11 .btn li.btn01 {
  top: 43.7%;
  left: 63%;
}
#item11 .btn li.btn02 {
  bottom: 26%;
  left: 25%;
}
#item11 .btn li.btn03 {
  bottom: 26%;
  left: 70.5%;
}

#item12 .btn li.btn01 {
  top: 37.5%;
  left: 12.5%;
}
#item12 .btn li.btn02 {
  top: 62%;
  left: 12.5%;
}
#item12 .btn li.btn03 {
  top: 62%;
  left: 31.5%;
}
#item12 .btn li.btn04 {
  top: 84.5%;
  left: 12.5%;
}
#item12 .btn li.btn05 {
  top: 88%;
  left: 12.5%;
}

/* =========================================================
 IMG
========================================================= */
.coverImg, div#body #section01 img, div#body #section02 ul li a .img, div#body #section03 ul li a .img, div#body #section04 ul li a .img, .inline > img {
  width: 100%;
  height: auto;
}

/* =========================================================
 CLEARFIX
========================================================= */
.cf:before,
.cf:after {
  content: "";
  display: table;
  zoom: 1;
}

.cf:after {
  clear: both;
}