@charset "UTF-8";
/*----------------------------------------------------　*/
/* CP　及び　期間限定クリエイティブなどの修正時に利用
01 CP .cp-area
02 creative .creative-area
03 .creative-area内でのslickスライダーのスタイル設定
------------------------------------------------------　*/

/*----------------------------------------------------　*/
/* 01 CP (平時MVにCP追加状態)
------------------------------------------------------　*/
.mv .caution{
  margin: 3vw 0 0 0; 
}
.cp-01 {
  width: calc( 90% + 4.8% );
  max-width: 590px;
  margin: 10% auto 0;
  text-align: center;
}
@media screen and (max-width: 750px){
  .cp-area .cont-cta {
    width: 90% ;
    margin: 0 auto;
  }
  
}
@media print, screen and (min-width: 751px){
  .cp-area{
    margin-top: 30px;
  }
  .cp-01 {
    width: 100%;
    max-width: 564px;
    margin: 0;
    text-align: left;
  }
  .cp-area .btn {
    margin-top: -30px;
  }
  .cp-area .cont-cta .btn {
    margin-left: 15px;
    margin-right: 15px;
  }
  /*.mv .cp-area .btn {
    margin-left: calc(( 564px - 400px ) / 2 );
  }*/
  .sec_price .cp-01 {
    width: 100%;
    max-width: 960px;
  }
  .mv .mv_inner {
    padding: 3.5vw 0 0 0; 
  }
  .mainarea {
    margin-top: -6.33vw;
  }
  .mv .caution{
    margin: 1.5vw 0 0 0; 
  }
}

/*----------------------------------------------------　*/
/* 02 creative .creative-area　2021/4/13-
※ .mv_innerに付与されている　.creative-areaを追加して対応。
　それ以外の調整箇所も下記に追記。
平時に戻す際は、html側にて.creative-areaを削除→［Creative+CP］のハニをコメントアウト→下記のCSSをコメントアウトでほぼ戻ります。
------------------------------------------------------　*/
.mv{
  padding-top: 0!important;
}
.mv .mv_inner.creative-area{
  background: none;
}
.mv .mv_inner.creative-area .img-creative{
  margin: 0 -4%;
}
.mv .mv_inner.creative-area .caution{
  margin: 1vw 0 0 0;
}
@media print, screen and (min-width: 751px){
  .mv .mv_inner.creative-area .img-creative{
    margin: 0 auto;
  }
  .mv_inner.creative-area .cp-area {
    margin: 0;
  }
  .mv_inner.creative-area .cp-01 {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
  ./*mv .mv_inner.creative-area .cp-area .btn {
    margin-left: auto;
  }*/
  .mv .mv_inner.creative-area .caution {
    margin: 1vw 0 1.5vw 0;
  }
  .mainarea {
    margin-top: -2.33vw;
  }
}

/*----------------------------------------------------　*/
/*03 .creative-area内でのslickスライダーのスタイル設定
------------------------------------------------------　*/
/* ロード時に一瞬縦並びになるのを透過で見せないように */
.mv_slider {
  opacity: 0;
  transition: opacity .3s linear;
}
.mv_slider.slick-initialized{
  opacity: 1;
}
/**/
.mv_slider .slick-dots li button:before{
  font-size: 30px !important;
  opacity: .15 !important;
}
.mv_slider .slick-dots li.slick-active button:before{
  opacity: .5 !important;
}