@charset "Shift_JIS";

/* =====================================
 cms_roulette
===================================== */
#cms_roulette {}
  #cms_roulette #tr_area {
    display: none;
    position: relative;
    height: auto;
    min-height: 780px;
    padding: 0 0 30px;
  }
  #cms_roulette .title {}
    #cms_roulette .title p {
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      line-height: 1.2;
    }
    #cms_roulette .title p .sub { font-size: 40px; }
  #cms_roulette .subtitle {}
    #cms_roulette .subtitle p {
      font-size: 28px;
      font-weight: bold;
      text-align: right;
    }
  #cms_roulette .outer_roulette {
    position: absolute;
    top: 170px;
    right: 0;
    bottom: 0;
    left: 0;
  }
  #cms_roulette #roulette {
    position: relative;
    width: 688px;
    height: 688px;
    margin: 0 auto;
  }
  #cms_roulette #mato_bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 688px;
    height: 688px;
    margin: 0 auto;
  }
  #cms_roulette #mato {
    position: absolute;
    top: 36px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 637px;
    height: 637px;
    margin: 0 auto;
  }
  #cms_roulette .button {
    display: none;
    position:absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 252px;
    height: 257px;
    cursor: pointer;
  }

@media screen and (max-width: 767px) {
#cms_roulette {}
  #cms_roulette #tr_area {
    min-height: 0;
    padding: 3% 0 7%;
  }
  #cms_roulette  .title {}
    #cms_roulette .title p {
      font-size: 30px;
      font-size: 7vw;
    }
    #cms_roulette .title p .sub {
      font-size: 18px;
      font-size: 5.2vw;
    }
  #cms_roulette .subtitle {}
    #cms_roulette .subtitle p {
      font-size: 14px;
      font-size: 3.4vw;
      text-align: center;
    }
  #cms_roulette .outer_roulette {
    position: relative;
    top: 10px;
  }
  #cms_roulette #roulette {
    width: 100%;
    height: auto;
    padding-top: 100%;
    overflow: hidden;
  }
  #cms_roulette #mato_bg {
    top: 0;
    width: 100%;
    height: 100%;
  }
  #cms_roulette #mato {
    top: 5%;
    width: 93%;
    height: 93%;  
  }
  #cms_roulette .button {
    top: 2%;
    width: 32%;
    height: 32.6%;
  }
}
/* =====================================
 ルーレットの画像Retina対応
===================================== */
@media screen and (min-width: 768px) {
  #cms_roulette.cms_layout_lc,
  #cms_result.cms_layout_lc {
	background-size: 1527px 880px;
  }
 #cms_roulette.cms_layout_lc.norepeat,
 #cms_result.cms_layout_lc.norepeat {
	 background-size: auto 880px;
  background-repeat: no-repeat;
 }
  #cms_roulette #mato_bg img {
	width: 688px;
    height: 688px; 
  }
  #cms_roulette #mato img {
	width: 636px;
	height: 636px;
  }
  #cms_roulette .button img {
	width: 252px;
    height: 252px;
  }
  #cms_result .coupon_img img {
	width: 435px;
	height: 514px;
  }
}