@-webkit-keyframes leftIn {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes leftIn {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes rightIn {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes rightIn {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes bottomIn {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes bottomIn {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@font-face {
  font-family: 'FontAwesome';
  src: url("/data/webfonts/fontawesome-webfont.eot");
  /* IE9 Compat Modes */
  src: url("/data/webfonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("/data/webfonts/fontawesome-webfont.woff") format("woff"), url("/data/webfonts/fontawesome-webfont.ttf") format("truetype"), url("/data/webfonts/fontawesome-webfont.svg#svgFontName") format("svg");
  /* svg - Legacy iOS */
  font-style: normal;
  font-weight: normal;
}
/*
//  keyframes
//
@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}
*/
.pc.is-initial .more-recommend,
.pc.is-initial .category_lab > section {
  display: none;
}
.pc.is-initial .category_lab {
  padding-bottom: 0 !important;
}
.pc .category_lab > section {
  -webkit-animation: fadeIn 1s linear;
          animation: fadeIn 1s linear;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

#contents main .foot-note {
  border: none;
  padding: 0;
}
#contents main .foot-note li {
  margin-left: 0;
  text-indent: 0;
}
#contents main .foot-note.foot-note-decoration {
  list-style: none;
  border: #b2cfe2 10px solid;
  padding: 10px 20px;
}
#contents main .foot-note.foot-note-decoration li:before {
  content: '';
}
#contents main .col-text .btn-scroll-top {
  border: none;
}
#contents main .col-text .bc-wysiwyg .foot-note-decoration {
  margin: 0;
}

#contents main .arrows-sm .btn-prev:after, #contents main .arrows-sm .btn-next:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  background: #fff;
}

.pc.is-initial .btn-article-slide {
  display: none;
}
.pc.is-initial:not(.is-touched) .arrows {
  display: none !important;
}
.pc #contents main .category_lab .btn-article-slide:hover {
  color: #313131;
}

#contents main .top-carousel .arrows {
  display: inline-block;
}
#contents main .arrows-sm {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  font-size: 0;
  vertical-align: top;
  display: table;
  -webkit-animation: fadeIn 1s linear 1s;
          animation: fadeIn 1s linear 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#contents main .arrows-sm > * {
  display: table-cell;
}
.is-drag #contents main .arrows-sm {
  opacity: 0;
  pointer-events: none;
  -webkit-animation: fadeOut 0.5s;
          animation: fadeOut 0.5s;
}
#contents main .arrows-sm .btn-prev,
#contents main .arrows-sm .btn-next {
  width: 60px;
  height: 60px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  position: relative;
  display: inline-block !important;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  background: transparent;
  border: #fff 5px solid;
}
#contents main .arrows-sm .btn-prev:before,
#contents main .arrows-sm .btn-next:before {
  font-family: "FontAwesome";
  font-size: 50px;
  text-indent: 0;
  position: absolute;
  color: #fff;
  top: 10px;
}
.pc #contents main .arrows-sm .btn-prev:before, .pc #contents main .arrows-sm .btn-prev:after, .pc
#contents main .arrows-sm .btn-next:before, .pc
#contents main .arrows-sm .btn-next:after {
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.pc #contents main .arrows-sm .btn-prev:hover, .pc
#contents main .arrows-sm .btn-next:hover {
  border-color: #289cc7;
}
.pc #contents main .arrows-sm .btn-prev:hover:before, .pc
#contents main .arrows-sm .btn-next:hover:before {
  color: #289cc7;
}
.pc #contents main .arrows-sm .btn-prev:hover:after, .pc
#contents main .arrows-sm .btn-next:hover:after {
  background: #289cc7;
}
#contents main .arrows-sm .btn-prev {
  border-right: none;
}
#contents main .arrows-sm .btn-prev:before {
  content: '\f104';
  left: 14px;
}
#contents main .arrows-sm .btn-prev:after {
  right: 0;
}
#contents main .arrows-sm .btn-next {
  border-left: none;
}
#contents main .arrows-sm .btn-next:before {
  content: '\f105';
  right: 14px;
}
#contents main .arrows-sm .btn-next:after {
  left: 0;
}
#contents main .arrows-sm .btn-article-slide-sm {
  width: 100%;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  font-size: 16px !important;
  border: #fff 5px solid;
  border-left: none;
  border-right: none;
  position: relative;
  box-sizing: border-box;
}
#contents main .arrows-sm .btn-article-slide-sm:before, #contents main .arrows-sm .btn-article-slide-sm:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 60px;
  background: #289cc7;
  top: -5px;
  z-index: 1;
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents main .arrows-sm .btn-article-slide-sm:before {
  left: -5px;
}
#contents main .arrows-sm .btn-article-slide-sm:after {
  right: -5px;
}
.pc #contents main .arrows-sm .btn-article-slide-sm {
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.pc #contents main .arrows-sm .btn-article-slide-sm:hover {
  border-color: #289cc7;
}
.pc #contents main .arrows-sm .btn-article-slide-sm:hover:before, .pc #contents main .arrows-sm .btn-article-slide-sm:hover:after {
  opacity: 1;
}
#contents main .arrows-sm .icon-arrow-down {
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: 3px;
}
#contents main .arrows-sm .icon-arrow-down:after {
  font-size: 24px;
}

.btn-article-slide {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
  width: 320px;
  height: 50px;
  text-align: center;
  margin-left: -160px;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation: fadeIn 0.7s;
          animation: fadeIn 0.7s;
}
.pc .btn-article-slide:hover {
  background: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 765px) {
  .btn-article-slide {
    height: 70px;
    bottom: 60px;
    left: 0;
    margin-left: 0;
    width: 100%;
  }
}
.btn-article-slide .icon {
  display: block;
  line-height: 0;
  font-size: 25px;
  padding-top: 2px;
}
@media screen and (max-width: 765px) {
  .btn-article-slide .icon {
    font-size: 40px;
    padding-top: 8px;
  }
}

.btn-article-slide-text {
  display: block;
  margin-top: 6px;
  font-size: 14px !important;
}
@media screen and (max-width: 765px) {
  .btn-article-slide-text {
    font-size: 16px !important;
    margin-top: 10px;
  }
}

.promotion {
  position: relative;
  opacity: 0;
}
@media screen and (max-width: 765px) {
  .promotion {
    margin-bottom: -60px;
  }
}

.is-loaded .promotion {
  -webkit-animation: fadeIn 1s;
          animation: fadeIn 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.promotion-carousel {
  position: relative;
}

.slick-hidden,
.slick-disabled {
  display: none !important;
}

.promotion-intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
}
.promotion-intro.is-close {
  -webkit-animation: fadeOut 1s;
          animation: fadeOut 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@media screen and (max-width: 765px) {
  .promotion-intro {
    top: -60px;
  }
}

.promotion-intro-container {
  display: table;
  height: 100%;
  width: 100%;
}
.promotion-intro-container > * {
  display: table-cell;
  vertical-align: middle;
}

.promotion-intro-cell {
  text-align: center;
}

#contents main .promotion-intro-title {
  font-size: 40px !important;
}
@media screen and (max-width: 765px) {
  #contents main .promotion-intro-title {
    font-size: 24px !important;
  }
}

.promotion-intro-text {
  text-align: left;
  margin: 30px auto;
  width: 450px;
  display: none;
}
.pc .promotion-intro-text.is-pc {
  display: block !important;
}
.ios .promotion-intro-text.is-sp, .android .promotion-intro-text.is-sp {
  display: block !important;
}
@media screen and (max-width: 765px) {
  .promotion-intro-text {
    width: auto;
    margin: 30px 20px;
  }
}

.btn-black {
  color: #fff !important;
  width: 390px;
  background-color: #313131;
  line-height: 60px !important;
  transition: opacity 0.5s;
}
.pc .btn-black:hover {
  opacity: 0.8;
}
@media screen and (max-width: 765px) {
  .btn-black {
    display: block !important;
    width: auto;
    margin: 0 20px;
  }
}

.mask-item {
  position: relative;
  overflow: hidden;
  height: 660px;
}
@media screen and (max-width: 765px) {
  .mask-item {
    height: 616px;
    top: -60px;
  }
}

.mask-item-contain {
  position: relative;
  top: 50%;
  left: 50%;
}

.mask-item-front {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  pointer-events: none;
  cursor: move;
}

.mask-item-back {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  cursor: move;
}

.mask-item {
  /*
  &.item-5 {
    @include maskItemFront(2193px, 786px, -9, 10);
    @include maskItemFrontSm(354px, 994px, 1, -10);
  }
  &.item-6 {
    @include maskItemFront(1700px, 676px, 0, -9);
    @include maskItemFrontSm(206px, 426px);
  }
  &.item-7 {
    @include maskItemFront(1232px, 489px, 0, 0);
    @include maskItemFrontSm(327px, 675px, 0, 0);
  }*/
}
.mask-item .mask-item-front img,
.mask-item .mask-item-back img {
  height: 100%;
}
.mask-item.item-1 .mask-item-front {
  width: 609.5px;
  height: 269px;
  margin-left: -331.75px;
  margin-top: -131.5px;
}
.mask-item.item-1 .mask-item-back {
  width: 2000px;
  height: 1124px;
}
@media screen and (max-width: 765px) {
  .mask-item.item-1 .mask-item-front {
    width: 257.5px;
    height: 114px;
    margin-left: -140.75px;
    margin-top: -58px;
  }
  .mask-item.item-1 .mask-item-back {
    width: 808px;
    height: 722px;
  }
}
.mask-item.item-2 .mask-item-front {
  width: 883px;
  height: 316px;
  margin-left: -441.5px;
  margin-top: -158px;
}
.mask-item.item-2 .mask-item-back {
  width: 2000px;
  height: 1124px;
}
@media screen and (max-width: 765px) {
  .mask-item.item-2 .mask-item-front {
    width: 135.5px;
    height: 379.5px;
    margin-left: -67.75px;
    margin-top: -169.75px;
  }
  .mask-item.item-2 .mask-item-back {
    width: 808px;
    height: 722px;
  }
}
.mask-item.item-3 .mask-item-front {
  width: 649.5px;
  height: 258.5px;
  margin-left: -323.75px;
  margin-top: -136.25px;
}
.mask-item.item-3 .mask-item-back {
  width: 2000px;
  height: 1124px;
}
@media screen and (max-width: 765px) {
  .mask-item.item-3 .mask-item-front {
    width: 116.5px;
    height: 241.5px;
    margin-left: -58.25px;
    margin-top: -121.25px;
  }
  .mask-item.item-3 .mask-item-back {
    width: 808px;
    height: 722px;
  }
}
.mask-item.item-4 .mask-item-front {
  width: 629px;
  height: 106px;
  margin-left: -314.5px;
  margin-top: -53px;
}
.mask-item.item-4 .mask-item-back {
  width: 2000px;
  height: 1124px;
}
@media screen and (max-width: 765px) {
  .mask-item.item-4 .mask-item-front {
    width: 253.5px;
    height: 42.5px;
    margin-left: -126.75px;
    margin-top: -21.25px;
  }
  .mask-item.item-4 .mask-item-back {
    width: 808px;
    height: 722px;
  }
}

.promotion-nav-sm {
  width: 100%;
  position: absolute;
  bottom: 60px;
  background: transparent;
  display: none;
}
.promotion-nav-sm .slick-arrow {
  background-color: rgba(255, 255, 255, 0.4) !important;
}
@media screen and (max-width: 765px) {
  .promotion-nav-sm {
    display: block;
  }
}

body:not(.pc).is-window-sm.is-header-fixed.is-scroll-fixed .promotion-nav-sm {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2010;
}
body:not(.pc).is-window-sm.is-header-fixed .promotion-nav-sm {
  display: block;
  -webkit-animation: fadeIn 0.3s;
          animation: fadeIn 0.3s;
}
body:not(.pc).is-window-sm .promotion-nav-sm {
  display: none;
}

.icon {
  font-style: normal;
}

.icon-arrow-down:after {
  content: '\f107';
  font-family: "FontAwesome";
}

@media screen and (max-width: 765px) {
  .pc .btn-article-slide-sm {
    pointer-events: none;
    visibility: hidden;
  }

  .is-promotion-fixed .btn-article-slide-sm {
    pointer-events: auto;
    visibility: visible;
  }
}