@charset "utf-8";

/*------------  top  ------------*/


#main { box-sizing: border-box; margin: 0 auto; padding: 45px 3% 20px; max-width: 1120px; }


/*  slider  */
.slider {}
.slick-loading .slick-list {}
.slick-track a { border-radius: 20px; overflow: hidden; }
/* Arrows */
.prev-arrow { position: absolute; top: 50%; left: -25px; transform: translateY(-50%); width: 50px; background: #BA152F; border-radius: 50%; opacity: 1; transition:all .3s; cursor: pointer; z-index: 10; }
.next-arrow { position: absolute; top: 50%; right: -25px; transform: translateY(-50%); width: 50px; background: #BA152F; border-radius: 50%; opacity: 1; transition:all .3s; cursor: pointer; z-index: 10; }
.prev-arrow:hover,
.prev-arrow:focus,
.next-arrow:hover,
.next-arrow:focus { opacity: .7; }
/* Dots */
.slick-dotted.slick-slider { margin-bottom: 72px; }
.slick-dots { position: absolute; bottom: -26px; display: block; width: 100%; padding: 0; margin: 0; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 14px; height: 14px; margin: 0 6px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 14px; height: 14px; cursor: pointer; color: transparent; border: 0;outline: none; background: transparent; }
.slick-dots li button:hover,
.slick-dots li button:focus {outline: none; }
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {opacity: .6; }
.slick-dots li button:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 14px; height: 14px; opacity: .35; background: #000; border-radius: 50%; }
.slick-dots li.slick-active button:before { opacity: 1; background: #fff; }


#main .copy01 { margin: 0 auto; padding: 0 0 10px; width: 90%; }
#main .copy02 { margin: 0 auto; padding: 0 0 10px; width: 90%; }
#main .comingsoon { margin: 0 auto; padding: 0 0 18px; width: 96%; }

#main .brands { display: flex; justify-content: center; flex-wrap: wrap; padding: 0 0 36px; }
#main .brands li { box-sizing: border-box; padding: .8%; width: 16.66666%; }
#main .brands li a { display: block; }
#main .brands .box { display: block; padding: 13px; background: #fff; overflow: hidden; border-radius: 16px; }
#main .brands .start { padding: 16px 0 0; }

#main .points { display: flex; justify-content: center; padding: 0 0 32px; }
#main .points li { box-sizing: border-box; padding: .8%; width: 18%; }
#main .points li a { display: block; }
#main .points .box { display: block; padding: 14px; background: #fff; overflow: hidden; border-radius: 16px; }


#rule { box-sizing: border-box; margin: 0 auto; padding: 0 3% 70px; max-width: 1120px; }
#rule .rule-inner { padding: 50px 3%; background: #fff; border-radius: 24px; }
#rule .rule-block { padding: 0; }
#rule .rule-block:after { content: ""; display: block; clear: both; }
#rule .point { box-sizing: border-box; float: left; padding: 10px 6%; width: 50%; }
#rule .point:first-child { border-right: 1px solid #0b9ece; }
#rule .point .title { margin: 0 auto; padding: 0 0 25px; }
#rule .point .txt { font-size: 16px; line-height: 1.5; text-align: center; }


.notice-area { background: #ffdd00; }
#notice { box-sizing: border-box; margin: 0 auto; padding: 60px 3%; max-width: 1120px; }
#notice .notice-inner { padding: 40px 5%; background: #fff; border-radius: 20px; }
#notice .title { margin: 0 auto; padding: 0 0 28px; width: 220px; }
#notice .txt { font-size: 16px; line-height: 1.6; }
#notice .txt2 { padding: 20px 0 0; font-size: 16px; line-height: 1.6; }


.news-area { background: url(../img/common/bg_nav.png) center center repeat; }
#news { box-sizing: border-box; margin: 0 auto; padding: 60px 3% 65px; max-width: 1120px; }
#news .title { margin: 0 auto; padding: 0 0 28px; width: 140px; }
#news .news-inner { padding: 0 4%; background: #fff; border-radius: 20px; }
#news .news-list { line-height: 1.5; }
#news .news-list li { padding: 20px 2%; border-bottom: 1px solid #ceeefb; }
#news .news-list li:last-child { border-bottom: none; }
#news .news-list a { text-decoration: underline; }
#news .news-list .date { padding: 0 0 3px; font-size: 14px; }
#news .news-list .item { font-weight: normal; font-size: 16px; }


#campaign {
    box-sizing: border-box; margin: 0 auto; padding: 60px 2% 10px; max-width: 1120px;}
#campaign .title { margin: 0 auto; padding: 0 0 28px; width: 380px; }
#campaign .campaign-inner { display: flex; flex-wrap: wrap; padding: 0 0 20px;}
#campaign .block { box-sizing: border-box; padding: 0 1.5% 25px; width: 33.33333%; }
#campaign .block a { display: block; }
#campaign .block .pic { border-radius: 12px; overflow: hidden; }
#campaign .block .date { padding: 14px 2% 5px; font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: 0.05em; }
#campaign .block .txt { padding: 0 2% 3px; font-size: 14px; font-weight: normal; line-height: 1.5; color: #323232; }
#campaign .block .closed { padding: 0 2% 3px; font-size: 14px; line-height: 1.5; color: #e00; }
#campaign .btn-campaign { margin: 0 auto; width: 320px; }
#campaign .btn-campaign a { display: block; height: 60px; background: url('../images/top/btn_campaign.png') no-repeat center #008ac2; background-size: 194px 18px; border-radius: 30px; text-indent: -9999px; overflow: hidden; }








@media screen and (max-width: 920px) {



}







@media screen and (max-width: 740px) {

  #main { padding: 20px 3% 10px; max-width: 540px; }

  .slick-track a { border-radius: 10px; }
  .prev-arrow { left: -20px; width: 40px; }
  .next-arrow { right: -20px; width: 40px; }
  .slick-dots { bottom: -20px; }
  .slick-dotted.slick-slider { margin-bottom: 40px; }
  .slick-dots li { width: 10px; height: 10px; margin: 0 5px; }
  .slick-dots li button { width: 10px; height: 10px; }
  .slick-dots li button:before { width: 10px; height: 10px; }

  #main .copy01 { padding: 0 0 8px; width: 96%; }
  #main .copy02 { padding: 0 0 8px; width: 96%; }
  #main .comingsoon { padding: 0 0 10px; width: 96%; }

  #main .brands { padding: 0 0 20px; }
  #main .brands li { padding: .6%; }
  #main .brands .box { padding: 5%; border-radius: 6px; }
  #main .brands .start { padding: 8px 0 0; }

  #main .points { padding: 0 0 16px; }
  #main .points li { padding: .7%; }
  #main .points .box { padding: 7%; border-radius: 6px; }

  #rule { padding: 0 3.5% 30px; max-width: 560px; }
  #rule .rule-inner { padding: 0 5%; border-radius: 10px; }
  #rule .rule-block { padding: 0; }
  #rule .point { box-sizing: border-box; float: none; padding: 22px 5%; width: auto; }
  #rule .point:first-child { border-right: none; border-bottom: 1px solid #0e97d0; }
  #rule .point .title { padding: 0 0 15px; max-width: 200px }
  #rule .point .txt { font-size: 14px; }

  #notice { padding: 28px 3.5%; max-width: 560px; }
  #notice .notice-inner { padding: 24px 5%; border-radius: 10px; }
  #notice .title { padding: 0 0 15px; width: 160px; }
  #notice .txt { font-size: 14px; }
  #notice .txt2 { padding: 15px 0 0; font-size: 14px; }

  #news { padding: 28px 3.5% 30px; max-width: 560px; }
  #news .title { padding: 0 0 15px; width: 94px; }
  #news .news-inner { padding: 0 5%; border-radius: 10px; }
  #news .news-list { line-height: 1.5; }
  #news .news-list li { padding: 16px 2% }
  #news .news-list .date { padding: 0 0 2px; font-size: 13px; }
  #news .news-list .item { font-size: 14px; }

  #campaign { padding: 30px 3% 10px; }
  #campaign .title { padding: 0 0 16px; width: 260px; }
  #campaign .campaign-inner { flex-direction: column; padding: 0 0 10px; }
  #campaign .block { margin: 0 auto; padding: 0 2% 20px; width: auto; max-width: 480px; }
  #campaign .block .date { padding: 12px 2% 4px; font-size: 13px; }
  #campaign .block .txt { padding: 0 2% 2px; }
  #campaign .block .txt { padding: 0 2% 2px; }
  #campaign .btn-campaign { width: 260px; }
  #campaign .btn-campaign a { height: 48px; background-size: 150px 14px; border-radius: 24px; }

}