@charset "utf-8";

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


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


/*  slider  */
.slick-track a { border-radius: 20px; overflow: hidden; }
/* Arrows */
.prev-arrow { position: absolute; top: 50%; left: -25px; transform: translateY(-50%); width: 50px; background: #057eb0; 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: #057eb0; 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: 60px; }
.slick-dots { position: absolute; bottom: -30px; 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; }

.btn-promotion { margin: 0 auto; padding: 0 0 60px; width: 400px; }
.btn-promotion a { display: block; height: 60px; background: url('/images/top/btn_promotion.png') no-repeat center #fff; background-size: 290px 20px; border-radius: 9999px; text-indent: -9999px; overflow: hidden; }


#main .copy01 { margin: 0 auto; padding: 0 0 22px; width: 72%; }
#main .copy02 { margin: 0 auto; padding: 0 0 22px; width: 72%; }

#main .brands { display: flex; justify-content: center; flex-wrap: wrap; padding: 0 0 14px; }
#main .brands li { box-sizing: border-box; flex-basis: calc(100% / 7); padding: 6px; }
#main .brands li a { display: block; }
#main .brands .note { display: flex; align-items: center; }
#main .brands .note .txt { padding: 2px; font-size: 16px; line-height: 1.5; color: #fff; }
#main .brands .box { display: block; padding: 13px; background: #fff; overflow: hidden; border-radius: 16px; }
#main .brands2 { display: flex; justify-content: center; padding: 0 0 50px; }
#main .brands2 .block { box-sizing: border-box; flex-basis: calc(100% / 7); padding: 6px; }
#main .brands2 .box { display: block; padding: 13px; background: #fff; overflow: hidden; border-radius: 16px; }
#main .brands2 .note { display: flex; align-items: center; }
#main .brands2 .note .txt { padding: 0 0 0 10px; font-size: 16px; line-height: 1.5; color: #fff; }


#main .points { display: flex; justify-content: center; padding: 0 0 14px; }
#main .points li { box-sizing: border-box; flex-basis: calc(100% / 7); padding: 6px; }
#main .points li a { display: block; }
#main .points .box { display: block; padding: 13px; background: #fff; overflow: hidden; border-radius: 16px; }
#main .points2 { display: flex; justify-content: center; padding: 0 0 50px; }
#main .points2 .block { box-sizing: border-box; flex-basis: calc(100% / 7); padding: 6px; }
#main .points2 .box { display: block; padding: 13px; background: #fff; overflow: hidden; border-radius: 16px; }
#main .points2 .note { display: flex; align-items: center; }
#main .points2 .note .txt { padding: 0 0 0 10px; font-size: 16px; line-height: 1.5; color: #fff; }


#rule { box-sizing: border-box; margin: 0 auto; padding: 0 3% 80px; max-width: 1120px; }
#rule .rule-inner { padding: 50px 3%; background: #fff; border-radius: 24px; }
#rule .rule-block { display: flex; }
#rule .point { flex-basis: calc(100% / 2); box-sizing: border-box; padding: 10px 3%; }
#rule .point:last-of-type { border-left: 1px solid #0b9ece; }
#rule .point .title { margin: 0 auto; padding: 0 10% 28px; max-width: 400px }
#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: #ceeefb; }
#news { box-sizing: border-box; margin: 0 auto; padding: 70px 3% 80px; max-width: 1120px; }
#news .title { margin: 0 auto; padding: 0 0 28px; width: 140px; }
#news .news-inner { padding: 8px 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) {

  #main .brands li { padding: 5px; }
  #main .points li { padding: 5px; }

}







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

  #main { padding: 30px 2.5% 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: -22px; }
  .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; }

  .btn-promotion { padding: 0 10px 35px; width: auto; }
  .btn-promotion a { height: 48px; background-size: 260px 18px; }


  #main .copy01 { padding: 0 0 15px; width: 98%; }
  #main .copy02 { padding: 0 0 15px; width: 98%; }

  #main .brands { padding: 0 0 10px; }
  #main .brands li { flex-basis: calc(100% / 4); padding: 4px; }
  #main .brands .box { padding: 8%; border-radius: 8px; }
  #main .brands2 { padding: 0 0 30px; }
  #main .brands2 .block { flex-basis: calc(100% / 4); padding: 4px; }
  #main .brands2 .box { padding: 8px; border-radius: 8px; }
  #main .brands2 .note { flex: 1; }
  #main .brands2 .note .txt { padding: 0 0 0 6px; font-size: 14px; }
  #main .brands2 .note .txt .pc { display: none; }

  #main .points { padding: 0 0 10px; }
  #main .points li { flex-basis: calc(100% / 4); padding: 4px; }
  #main .points .box { padding: 8%; border-radius: 8px; }
  #main .points2 { padding: 0 0 30px; }
  #main .points2 .block { flex-basis: calc(100% / 4); padding: 4px; }
  #main .points2 .box { padding: 8px; border-radius: 8px; }
  #main .points2 .note { flex: 1; }
  #main .points2 .note .txt { padding: 0 0 0 6px; font-size: 14px; }
  #main .points2 .note .txt .pc { display: none; }

  #rule { padding: 0 3.5% 40px; max-width: 560px; }
  #rule .rule-inner { padding: 0 5%; border-radius: 10px; }
  #rule .rule-block { display: block; }
  #rule .point { padding: 22px 0;  }
  #rule .point:last-child { border-left: none; border-top: 1px solid #0e97d0; }
  #rule .point .title { padding: 0 0 16px; max-width: 200px }
  #rule .point .txt { font-size: 14px; }

  #notice { padding: 35px 3.5% 40px; 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: 35px 3.5% 40px; max-width: 560px; }
  #news .title { padding: 0 0 15px; width: 94px; }
  #news .news-inner { padding: 4px 5%; border-radius: 10px; }
  #news .news-list { line-height: 1.5; }
  #news .news-list li { padding: 15px 2% }
  #news .news-list .date { padding: 0 0 2px; font-size: 13px; }
  #news .news-list .item { font-size: 14px; }

  #campaign { padding: 35px 3% 15px; }
  #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; }

}