/*
* MATCH Brand Site 2019
* top.css
*
*/
/* ------------------------
  termsmodal
------------------------ */
.termsmodal {
  visibility: hidden;
  overflow-y: scroll;
  opacity: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  padding: 0 40px;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s;
  background: rgba(220, 249, 255, 0.9);
}
.termsmodal.is-active {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s, visibility 0s 0s;
  transition: opacity 0.3s, visibility 0s 0s;
}

.termsmodal_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  max-width: 900px;
  min-height: 100%; 

  -webkit-box-pack: center; 

      -ms-flex-pack: center; 

          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.termsmodal_container _:-ms-lang(x)::-ms-backdrop,
.termsmodal_container {
  min-height: 100vh;
}
.termsmodal_container::after {
  content: "";
  min-height: inherit;
  font-size: 0;
}

.termsmodal_inner {
  margin: 120px auto 40px;
  width: 100%;
}

.termsmodal_content {
  display: none;
  position: relative;
  padding: 60px 50px;
  border-radius: 2px;
  background: #fff;
  font-size: 14px;
}
.is-active .termsmodal_content {
  display: block;
}

.termsmodal_close {
  position: absolute;
  top: -67px;
  right: 0;
  border: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s; 
  background: none;
}
.termsmodal_close:hover {
  opacity: 0.7;
}

.termsmodal_title {
  margin-bottom: 20px;
  text-align: center;
  color: #2ba0d5; 
  font-size: 40px;
  font-weight: bold;
}

.termsmodal_lead {
  padding: 20px 40px;
}

.termsmodal_list {
  padding: 20px 40px;
}

.termsmodal_term {
  color: #2ba0d5;
  font-weight: bold;
}

.termsmodal_desc {
  margin-top: 4px;
}
.termsmodal_desc + .termsmodal_term {
  margin-top: 25px;
}

/* --------------------------------
   top
-------------------------------- */
/* Common ------------ */
.cmn-main {
  overflow-x: hidden;
  margin-top: 80px; 
  border-bottom: solid 1px #ccc;
  min-width: 1000px;
}

.cmn-modal_icn {
  display: block;
  position: absolute;
  z-index: 3; 
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  -webkit-transform: translate(-46%, -50%);
      -ms-transform: translate(-46%, -50%);
          transform: translate(-46%, -50%);
  background: url(/img/teaser/common/icon_movie.png) center center no-repeat;
}
.cmn-movie_thumbnail:hover .cmn-modal_icn {
  background: url(/img/teaser/common/icon_movie_ov.png) center center no-repeat;
}
.top-making_item .cmn-modal_icn {
  -webkit-transform: scale(0.7) translateX(-66%) translateY(-70%);
      -ms-transform: scale(0.7) translateX(-66%) translateY(-70%);
          transform: scale(0.7) translateX(-66%) translateY(-70%);
}

.cmn-movie_thumbnail::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 2; 
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  background-color: rgba(225, 250, 255, 0.7);

  will-change: opacity;
}

.cmn-movie_thumbnail::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: solid 3px #fff;
  border-radius: 100%;
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cmn-movie_thumbnail:hover::before {
  opacity: 1;
}

.cmn-movie_thumbnail:hover::after {
  opacity: 1;
  border-color: #42bbf7;
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
}

.cmn-slide_arrow {
  display: block;
  position: absolute;
  z-index: 10; 
  top: 0;
  bottom: 0;
  margin: auto;
  color: #111;
}
.cmn-slide_arrow:hover {
  cursor: pointer;
}
.cmn-slide_arrow img {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 23px;
  height: 44px;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}
.top-making_slideInner .cmn-slide_arrow {
  width: calc((100% - (236px * 4)) / 2); 
  height: 196px;
}
.top-making_slideInner .cmn-slide_arrowPrev {
  left: 0;
}
.top-making_slideInner .cmn-slide_arrowPrev img {
  right: 54px;
}
.top-making_slideInner .cmn-slide_arrowPrev:hover img {
  right: 60px;
}
.top-making_slideInner .cmn-slide_arrowNext {
  right: 0;
}
.top-making_slideInner .cmn-slide_arrowNext img {
  left: 54px;
}
.top-making_slideInner .cmn-slide_arrowNext:hover img {
  left: 60px;
}
.top-cast-slide-wrap .cmn-slide_arrow {
  position: absolute;
  height: 350px;
}
.top-cast-slide-wrap .cmn-slide_arrow img {
  left: 42px;
}
.top-cast-slide-wrap .cmn-slide_arrow:hover img {
  left: 60px;
}
.top-cast_slideInner .cmn-slide_arrow {
  width: calc((100% - 1000px) / 2); 
  height: 196px;
}
.top-cast_slideInner .cmn-slide_arrowPrev {
  left: 0;
}
.top-cast_slideInner .cmn-slide_arrowPrev img {
  right: 42px;
}
.top-cast_slideInner .cmn-slide_arrowPrev:hover img {
  right: 60px;
}
.top-cast_slideInner .cmn-slide_arrowNext {
  right: 0;
}
.top-cast_slideInner .cmn-slide_arrowNext img {
  left: 42px;
}
.top-cast_slideInner .cmn-slide_arrowNext:hover img {
  left: 60px;
}

.cmn-anchor {
  margin-top: -80px; 
  padding-top: 80px;
}

/* Modal ------------ */
.top-Movie {
  position: fixed;
  z-index: 100; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.top-Movie video {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.top-Movie_Close {
  position: absolute;
  z-index: 20; 
  top: 50px;
  right: 50px;
  width: 47px;
  height: 47px;
  cursor: pointer;
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: url(/img/teaser/common/modal_close.png) no-repeat;
}
.no-touch .top-Movie_Close:hover {
  opacity: 0.6;
}

.top-Movie_Sound {
  display: none;
  position: absolute;
  z-index: 20;
  top: 120px;
  right: 50px;
  width: 56px;
  height: 56px;
  cursor: pointer;
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); 
  background: url(/img/teaser/top/sound_on.png) no-repeat;
}
.top-Movie_Sound-off {
  background: url(/img/teaser/top/sound_off.png) no-repeat;
}
.no-touch .top-Movie_Sound:hover {
  opacity: 0.6;
}

.top-Movie_Inr {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 186px;
  height: 264px;
}

.top-Moive_BtnWrap {
  margin-top: 36px;
  text-align: center; 
  letter-spacing: -0.5em;
}

.top-Movie_Btn {
  display: inline-block;
  cursor: pointer;
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); 
  letter-spacing: normal;
}
.top-Movie_Btn + .top-Movie_Btn {
  margin-left: 22px;
}
.no-touch .top-Movie_Btn:hover {
  opacity: 0.6;
}

/* Modal ------------ */
.top-Modal {
  position: fixed;
  z-index: 100; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.top-Modal_Close {
  position: absolute;
  z-index: 20; 
  top: 50px;
  right: 50px;
  width: 47px;
  height: 47px;
  cursor: pointer;
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: url(../img/common/modal_close.png) no-repeat;
}
.no-touch .top-Modal_Close:hover {
  opacity: 0.6;
}

.top-Modal_Content {
  width: 100%;
  height: 503px;
  background: url(../img/top/modal_jelly_bg.jpg) 50% 100% no-repeat;
  background-size: cover;
}

.top-Modal_Img {
  position: relative;
  margin: auto; 
  width: 782px;
  height: 100%;
}

.top-Modal_ttl {
  position: absolute;
  top: 66px;
  left: 0; 
  width: 398px;
  height: 318px;
}

.top-Modal_product {
  position: absolute;
  top: 66px;
  left: 429px; 
  width: 212px;
  height: 380px;
}

.top-Modal_btn {
  position: absolute;
  top: 389px;
  left: 150px; 
  width: 160px;
  height: 36px;
}

.video-modal_movieWrap {
  display: block;
  margin-top: 40px;
  margin-left: 50px; 
  padding-top: 67px;
  width: 900px;
}

.video-modal_slick .slick-slide:not(.slick-current) {
  opacity: 0;
}

.video-modal_captions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 12px auto 0; 
  width: 900px;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;
}

.video-modal_caption {
  position: relative;
  width: 217px;
  cursor: pointer; 
  text-align: center;
  letter-spacing: 0.1em;
  color: #00a4eb;
  font-size: 13px;
  line-height: 20px;
}
.video-modal_caption + .video-modal_caption {
  margin-left: 10px;
}
.video-modal_caption:nth-child(4n+1) {
  margin-left: 0;
}
.video-modal_caption:nth-child(n+5) {
  margin-top: 20px;
}

.video-modal_thumbnail {
  display: block;
  opacity: 0.5; 
  margin-bottom: 10px;
}
.video-modal_caption:hover .video-modal_thumbnail {
  opacity: 1;
}
.video-modal_thumbnail.-is_active {
  opacity: 1;
}
.video-modal_thumbnail img {
  width: 100%; 
  max-width: none;
}

.video-modal_icon {
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0 6px;
  height: 19px; 
  background-color: #ff0;
  text-align: center;
  color: #29a0d5;
  font-size: 12px;
  font-weight: bold;
  line-height: 19px;
}

.video-modal_detailWrap {
  margin-top: 52px;
  margin-bottom: 100px;
  margin-left: 100px; 
  padding-top: 67px;
  padding-bottom: 107px;
  width: 800px;
  background: url(../img/top/video_modal_detail_bg.jpg) 0 0/100% no-repeat;
}

.video-modal_ttl {
  text-align: center;
}

.video-modal_text {
  display: block;
  margin-top: 21px;
  margin-bottom: 31px;
  text-align: center;
  letter-spacing: 1px; 
  font-size: 18px;
  line-height: 33px;
}

.video-modal_btn {
  display: block;
  margin: 0 auto;
  border: solid 2px #00a4eb;
  width: 318px;
  height: 72px;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1); 
  background-image: url(../img/top/video_modal_btn.png);
}
.video-modal_btn:hover {
  background: #00a4eb; 
  background-image: url(../img/top/video_modal_btn_ov.png);
}

.danceClub_modal {
  display: block;
  float: left; 
  width: 900px;
  height: 506px;
}

/* Slick Override ---------- */
.slick-list {
  overflow: visible;
}

.top-making_slide .slick-track {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.slick-slide {
  opacity: 0.2;
  -webkit-transition: 0.3s all cubic-bezier(0, 0, 0.58, 1);
  transition: 0.3s all cubic-bezier(0, 0, 0.58, 1);
}
.slick-slide.slick-active {
  opacity: 1;
}

/* Cover ------------ */
.top-Cover {
  overflow: hidden;
  position: relative;
}
.top-Cover img {
  display: inline-block; 
  width: 100%;
}

/* CM ------------ */
.top-Tvcm {
  padding-top: 70px;
  padding-bottom: 100px;
}

.top-Tvcm_Inr {
  margin: 0 auto;
  width: 1000px;
}

.top-Tvcm_Ttl {
  margin-bottom: 39px;
  text-align: center;
}

.top-cm_mainWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  margin-bottom: 52px; 
  padding: 0 40px 52px;
  border-bottom: solid 1px #99dcf5;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.top-cm_mainWrapper .top-Tvcm_Movie.-hide {
  display: none;
}
.top-cm_mainWrapper .top-Tvcm_Movie + .top-Tvcm_Movie {
  margin-top: 60px;
}

.top-cm_tab {
  position: relative;
  width: 750px; 
  height: 422px;
}

.top-cm_item {
  display: block;
  opacity: 0; 
  position: absolute !important;
  top: 0;
  left: 0;
}
.top-cm_item::after {
  width: 88px;
  height: 88px;
}
.top-cm_item.-show {
  opacity: 1;
}

.top-cm_ttl {
  margin-top: 24px;
  text-align: center;
}
.top-cm_ttl + .top-Tvcm_MovieItem {
  margin-top: 60px;
}
.top-cm_ttl + .top-cm_more {
  margin-top: 60px;
}

.top-cm_more {
  margin-top: 60px; 
  border: none;
}
.top-cm_more.-hide {
  display: none;
}
.top-cm_more::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 298px;
  height: 61px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; 
  background: url(/img/top/btn_more_ov.png);
}
.top-cm_more:hover img {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.top-cm_more:hover::before {
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.top-cm_btnWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 16px;
}

.top-cm_btn {
  position: relative; 
  padding: 0 6px;
}
.top-cm_btn + .top-cm_btn {
  border-left: solid 1px #ccc;
}
.top-cm_btn::before {
  content: "";
  display: block;
  width: 93px;
  height: 25px;
}
.top-cm_btn::after {
  content: "";
  display: block;
  opacity: 0; 
  margin: auto;
  width: 66px;
  height: 1px;
  background: #08a2da;
}
.top-cm_btn:hover {
  cursor: pointer;
}
.top-cm_btn:hover::after {
  opacity: 1;
}
.top-cm_btn.-selected:hover::after {
  opacity: 0;
}

.top-cm_btn30:before {
  background: url("../img/top/top_cm_btn_30sec.png") 0 0 no-repeat;
}

.top-cm_btn30.-selected::before {
  background: url("../img/top/top_cm_btn_30sec_w.png") 0 0 no-repeat;
}

.top-cm_btn15:before {
  background: url("../img/top/top_cm_btn_15sec.png") 0 0 no-repeat;
}

.top-cm_btn15.-selected::before {
  background: url("../img/top/top_cm_btn_15sec_w.png") 0 0 no-repeat;
}

.top-cm_tab {
  margin: 0;
}
.top-cm_tab.-new::before {
  content: "NEW";
  display: inline-block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 5px 8px;
  background-color: #ff0;
  text-align: center; 
  color: #29a0d5;
  font-size: 14px;
  font-weight: bold;
  line-height: 19px;
}

/* Making ------------ */
.top-making_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 40px; 

  -webkit-box-pack: center; 

      -ms-flex-pack: center; 

          justify-content: center;
}

.top-making_summary {
  display: block;
  margin-top: 20px;
  margin-right: 38px;
  width: 100%; 
  max-width: 320px;
}

.top-making_txt {
  margin-top: 24px;
  letter-spacing: 0.02rem; 
  color: #111;
  font-size: 14px;
}

.top-making_thumbnail {
  position: relative;
}
.top-making_thumbnail.-new::before {
  content: "NEW";
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 5px 8px;
  background-color: #ff0;
  text-align: center; 
  color: #29a0d5;
  font-size: 14px;
  font-weight: bold;
  line-height: 19px;
}
.top-making_thumbnail + .top-making_thumbnail {
  margin-left: 8px;
}

.top-making_item {
  display: block;
  position: relative;
  width: 100%;
  max-width: 278px;
  text-decoration: none;
}
.top-making_item::after {
  width: 66px;
  height: 66px;
}

.top-making_caption {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: #43bfef;
  font-size: 16px;
}

.top-making_slideWrapper {
  position: relative;
  margin-top: 90px;
  height: 196px;
}

.top-making_slideInner {
  margin: auto; 
  width: 100%;
  max-width: calc(236px * 4);
}

.top-making_slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto; 
  width: calc(236px * 4);
}

.top-making_slideItem {
  display: block;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.top-making_slideItem img {
  width: 100%;
}

/* Graphic ------------ */
.top-Graphic,
.top-special_wrapper {
  padding-bottom: 100px; 
  background-image: url(../../img/top/top_graphic_bgpattern.jpg);
  background-repeat: repeat-X repeat-Y;
  background-size: 72px 72px;
}

.top-Graphic_Inr {
  margin: 0 auto;
  padding-top: 84px;
  width: 915px;
}

.top-Graphic_Ttl {
  margin-bottom: 39px;
  text-align: center;
}

.top-graphic-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.top-Graphic_ItemWrap {
  position: relative;
  width: 100%;
}
.top-Graphic_ItemWrap.top-Graphic_ItemWrap-01 {
  height: 310px;
}
.top-Graphic_ItemWrap.top-Graphic_ItemWrap-02 {
  height: 275px;
}
.top-Graphic_ItemWrap + .top-Graphic_ItemWrap {
  margin-top: 40px;
}

.top-Graphic_Item {
  position: relative;
}
.top-Graphic_Item + .top-Graphic_Item {
  margin-left: 14px;
}
.top-Graphic_Item a {
  display: block;
  position: relative;
  outline: none; 
  width: 100%;
}
.top-Graphic_Item a::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 1; 
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  background-color: rgba(225, 250, 255, 0.7);

  will-change: opacity;
}
.top-Graphic_Item a::after {
  content: "";
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  position: absolute;
  z-index: 10; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: solid 2px #42bbf7;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  background: url(../img/common/icon_modal.png) center center no-repeat;
}
.no-touch .top-Graphic_Item a:hover img {
  opacity: 1;
}
.top-Graphic_Item a:hover::before,
.top-Graphic_Item a:hover::after {
  opacity: 1;
}
.top-Graphic_Item a:nth-of-type(2) {
  margin-top: 15px;
}
.top-Graphic_ItemWrap-01 .top-Graphic_Item:nth-child(1) {
  top: 0;
  right: 0;
}
.top-Graphic_ItemWrap-01 .top-Graphic_Item:nth-child(2) {
  top: 0;
  left: 0;
}
.top-Graphic_ItemWrap-01 .top-Graphic_Item:nth-child(3) {
  top: 0;
  right: 358px;
}
.top-Graphic_ItemWrap-01 .top-Graphic_Item:nth-child(4) {
  right: 358px; 
  bottom: 0;
}
.top-Graphic_ItemWrap-01 .top-Graphic_Item:nth-child(5) {
  right: 235px; 
  bottom: 0;
}
.top-Graphic_ItemWrap-02 .top-Graphic_Item:nth-child(1) {
  top: 0;
  left: 0;
}
.top-Graphic_ItemWrap-02 .top-Graphic_Item:nth-child(2) {
  top: 0;
  left: 200px;
}
.top-Graphic_ItemWrap-02 .top-Graphic_Item:nth-child(3) {
  bottom: 0;
  left: 200px;
}
.top-Graphic_ItemWrap-02 .top-Graphic_Item:nth-child(4) {
  top: 0;
  left: 398px;
}
.top-Graphic_ItemWrap-02 .top-Graphic_Item:nth-child(5) {
  bottom: 0;
  left: 398px;
}
.top-Graphic_ItemWrap-02 .top-Graphic_Item:nth-child(6) {
  top: 0;
  right: 0;
}
.top-Graphic_Item:nth-of-type(3) a:nth-of-type(2) {
  margin-top: 20px;
}

.top-graphic_imageWrap {
  position: relative;
}
.top-graphic_imageWrap.-new::before {
  content: "NEW";
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 4px 8px;
  background-color: #ff0;
  text-align: center; 
  color: #29a0d5;
  font-size: 11px;
  font-weight: bold;
  line-height: 19px;
}
.top-graphic_imageWrap + .top-graphic_imageWrap {
  margin-top: 15px;
}

/* Cast ------------ */
.top-cast_wrapper {
  padding-top: 90px;
  padding-bottom: 90px;
}

.top-cast_ttl {
  text-align: center;
}

.top-cast_slideWrapper {
  position: relative;
  height: 350px;
}

.top-cast_slideIcnWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px; 

  -webkit-box-pack: center; 

      -ms-flex-pack: center; 

          justify-content: center;
}

.top-cast_slideIcn {
  opacity: 0.5;
  padding: 0 6px;
  -webkit-transition: all 0.1s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.1s cubic-bezier(0, 0, 0.58, 1);
}
.top-cast_slideIcn:hover {
  cursor: pointer;
}
.top-cast_slideIcn.-current {
  opacity: 1; 
  -webkit-transform: scale(1.15); 
      -ms-transform: scale(1.15); 
          transform: scale(1.15);
}

.top-cast_slideInner {
  margin: auto; 
  width: 100%;
  max-width: 1000px;
}

.top-cast_slide {
  margin-top: 32px;
}

.top-cast_slideItem {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  opacity: 0.2;
  margin: 0 12px;
  padding: 40px;
  border: solid 1px #a5d7f1; 
  width: 100%;
  max-width: 1000px;
  height: auto;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;
}
.top-cast_slideItem.slick-active {
  opacity: 1;
}

.top-cast_profileWrap {
  width: calc(100% - 290px);
}

.top-cast_profName {
  margin-bottom: 20px; 
  color: #42bbf7;
  font-size: 20px;
}

.top-cast_profBio {
  color: #333;
  font-size: 13px;
  line-height: 1.5;
}
.top-cast_profBio + .top-cast_profBio {
  margin-top: 15px;
}

.top-modal-link {
  display: block;
  position: relative;
  outline: none;
  width: 100%;
  width: 100%;
}
.top-modal-link::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 1; 
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  background-color: rgba(225, 250, 255, 0.7);

  will-change: opacity;
}
.top-modal-link::after {
  content: "";
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  position: absolute;
  z-index: 10; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: solid 2px #42bbf7;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
  background: url(../img/common/icon_modal.png) center center no-repeat;
}
.no-touch .top-modal-link:hover img {
  opacity: 1;
}
.top-modal-link:hover::before,
.top-modal-link:hover::after {
  opacity: 1;
}

/* Campaign ------------ */
/* Special ------------ */
.top-special_wrapper {
  padding: 90px 0 98px;
}

.top-special_ttl {
  margin-bottom: 39px; 
  text-align: center;
}

.top-special_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  margin: 0 auto;
  max-width: 1000px; 

  -webkit-box-pack: center; 

      -ms-flex-pack: center; 

          justify-content: center;
}

.top-special_heading {
  display: block;
  margin: 0 auto;
}

.top-special_date {
  display: block;
  margin: 10px auto;
}

.top-special_kv {
  display: block;
  margin: 40px auto 0;
}

.top-specialMovie {
  display: block;
}

.top-specialMovie_wrapper {
  display: block;
  position: relative;
  margin: 40px auto;
  width: 635px;
  height: 635px;
}
.top-specialMovie_wrapper.-new::before {
  content: "NEW";
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 5px 8px;
  background-color: #ff0;
  text-align: center; 
  color: #29a0d5;
  font-size: 14px;
  font-weight: bold;
  line-height: 19px;
}
@media screen and (max-width: 999px) {
  .top-specialMovie_wrapper.-new::before {
    top: 10px;
    left: 10px;
  }
}

.top-specialMovie {
  display: block;
  opacity: 1;
}
.top-specialMovie::after {
  width: 88px;
  height: 88px;
}

.top-special_shortMovieBtn {
  position: relative;
  margin: auto; 
  width: 313px;
}

.top-special_shortMovieBtn {
  text-align: center;
}

.specialShortMovie {
  z-index: 10;
}
.specialShortMovie > div {
  opacity: 1;
}

/* Contents ------------ */
.top-content_wrapper {
  padding-top: 90px; 
  padding-bottom: 0;
}

.top-content_ttl {
  margin-bottom: 39px; 
  text-align: center;
}

.top-content_inner {
  margin: auto;
  width: 100%;
  max-width: 1000px;
}

.top-content_item {
  position: relative;
}
.top-content_item.-new::before {
  content: "NEW";
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 7px 10px;
  background-color: #ff0;
  text-align: center; 
  color: #29a0d5;
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
}
@media screen and (max-width: 999px) {
  .top-content_item.-new::before {
    top: 10px;
    left: 10px;
  }
}
.top-content_item.-new.-blue::before {
  background-color: #29a0d5;
  color: #fff;
}
.top-content_item + .top-content_item {
  margin-top: 15px;
}

/* Products ------------ */
.top-products_wrapper {
  padding: 90px 0 98px;
}

.top-products_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  width: 100%;
  max-width: 1000px; 

  -ms-flex-wrap: wrap; 

      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 999px) {
  .top-products_inner {
    padding: 0 10px;
  }
}

.top-products_item {
  position: relative;
  width: 100%;
  max-width: 490px;
}
.top-products_item.-new::before {
  content: "NEW";
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 5px 8px;
  background-color: #ff0;
  text-align: center; 
  color: #29a0d5;
  font-size: 14px;
  font-weight: bold;
  line-height: 19px;
}
@media screen and (max-width: 999px) {
  .top-products_item.-new::before {
    top: 10px;
    left: 10px;
  }
}
.top-products_item:nth-of-type(3),
.top-products_item:nth-of-type(4) {
  margin-top: 20px;
}
@media screen and (max-width: 999px) {
  .top-products_item:nth-of-type(3),
  .top-products_item:nth-of-type(4) {
    margin: 0;
  }
}
@media screen and (max-width: 999px) {
  .top-products_item {
    padding: 10px;
    width: 50%;
  }
}

.top-products_link {
  display: block;
  width: 100%;
  max-width: 490px;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}
.top-products_link img {
  display: block;
  width: 100%;
}
.top-products_link:hover {
  opacity: 0.7;
}

.top-campaign_link {
  display: block;
  width: 100%;
  max-width: 490px;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}
.top-campaign_link img {
  display: block;
  width: 100%;
}
.top-campaign_link:hover {
  opacity: 0.7;
}

.modal-shortMovieSlider {
  opacity: 0;
  margin: auto; 
  -webkit-transition: 0.3s; 
  transition: 0.3s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.modal-shortMovieSlider.-show {
  opacity: 1;
}

.modal-shortMovieSlideItem {
  position: relative;
  margin: 0 4px !important;
  width: 98px !important;
}
.modal-shortMovieSlideItem::before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 3; 
  top: 0;
  left: 0;
  padding-top: 100%;
  width: 100%;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  background: #03b8eb;
  pointer-events: none;
}
.modal-shortMovieSlideItem.slick-current::before {
  opacity: 0.5;
}

.modal-shortMovieListWrapper {
  position: relative;
  margin: 8px auto 0; 
  width: 530px;
  height: 98px;
}

.modal-shortMov_arw {
  content: url("../img/top/modal_arw.png");
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 31px;
  height: 59px;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}
.modal-shortMov_arw:hover {
  cursor: pointer;
}
.modal-shortMov_arw.-prev {
  left: -60px;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.modal-shortMov_arw.-prev:hover {
  left: -70px;
}
.modal-shortMov_arw.-next {
  right: -60px;
}
.modal-shortMov_arw.-next:hover {
  right: -70px;
}

.modal-shortMovieListInner {
  overflow: hidden; 
  width: 530px;
}

.modal-shortMovieMain {
  overflow: hidden; 
  margin: auto;
  width: 936px !important;
}
.modal-shortMovieMain iframe {
  width: 100%; 
  height: 524px;
}