@charset "UTF-8";
/* 基本設定 */
*{
  box-sizing: border-box;
}
html{
  max-width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: bold;
  overflow-x: hidden;
  line-height: 1.6em;
}
h2,h3{
  pointer-events: none;
}
a:hover{
  opacity: 0.7;
  transition-duration: 0.3s;
}
@media screen and (max-width: 600px){
  a:hover{
    opacity: 1;
  }
}
p{
  font-size: 18px;
  line-height: 1.6em;
}
.txtL{
  font-size: 24px;
  line-height: 1.6em;
}
.itemEBgEnd,
.itemLoBgEnd{
  display: none;
}
@media screen and (max-width: 1220px){
  p{
    font-size: 1.4vw;
  }
  .txtL{
    font-size: 1.9vw;
  }
}
.alignCenter{
  text-align: center;
}
.flex{
  display: flex;
}

/* ==================== ファーストビュー ==================== */
#firstView{
  position: relative;
  background: url(../images/img_mv.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 80vw;
  max-height: 1033px;
  margin-bottom: 50px;
}
@media screen and (max-width: 1220px){
  #firstView{
    margin-bottom: 4%;
  }
}
#firstView h1{
  position: absolute;
  bottom: 29%;
  left: 0;
  text-align: center;
  width: 100%; 
  max-width: 1920px;
}
#firstView h1 img{
  width: 34.8vw;
  max-width: 446px;
  pointer-events: none;
}
.catchCopy{
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  max-width: 1920px;
}
.catchCopy img{
  width: 77vw;
  max-width: 986px;
  pointer-events: none;
}

/* ==================== メニュー ==================== */
#gnavi{
  display: flex;
  margin: 80px auto;
  width: 72vw;
  max-width: 920px;
}
@media screen and (max-width: 1220px){
  #gnavi{
    margin: 6.4vw auto;
  }
}
#gnavi a:hover{
  opacity: 0.4;
}
@media screen and (max-width: 600px){
  #gnavi a:hover{
    opacity: 1;
  }
}
#gnavi img{
  height: 4.5vw;
  max-height: 58px;
  pointer-events: none;
}

/* ==================== MASTERLISE / 一番くじ とは？ ==================== */

#howto{
  background: #000000;
  width: 100%;
  padding: 90px 0;
  text-align: center;
  pointer-events: none;
  color: #ffffff;
}
#howto img{
  display: block;
  margin: 0 auto 40px;
  max-width: 786px;
  width: 61.4%;
}
#howto img:last-of-type{
  margin: 0 auto;
}
#howto h2{
   margin: 0 auto 40px;
}
#howto h2 img{
  width: 51.25vw;
  max-width: 656px;
}
#howto p{
  margin-bottom: 70px;
}
@media screen and (max-width: 1220px){
  #howto{
    padding: 7vw 0;
  }
  #howto img,
  #howto h2{
    margin-bottom: 3.12vw;
  }
  #howto p{
    margin-bottom: 5.46vw;
  }
}

/* ==================== 動画 ==================== */
#movie{
  width: 94%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 90px 0 0;
  text-align: center;
}
#movie iframe{
  border: none;
}
@media screen and (max-width: 1220px){
  #movie{
    padding: 7vw 0 0;
  }
}
#movie h2 img{
  width: 30vw;
  max-width: 384px;
  padding-bottom: 40px;
}
@media screen and (max-width: 1220px){
  #movie h2 img{
    padding-bottom: 3.2vw;
  }
}
.movieEmbed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movieEmbed iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.movieCs{
  max-width: 100%;
  pointer-events: none;
}
/* ==================== 賞品 ==================== */
#item{
  margin: 80px 0 0 0;
  padding-top: 80px;
}
#item h2{
  text-align: center;
  margin-bottom: -80px;
}
#item h2 img{
  width: 25.15vw;
  max-width: 322px;
}
@media screen and (max-width: 1220px){
  #item{
    margin-top: 6.25vw;
    padding-top: 6.25vw;
  }
  #item h2{
    margin-bottom: -6.25vw;
  }
}
#item .itemCol{
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
#item .itemFigure .logoMasterlise{
  position: absolute;
  right: 50px;
  top: 190px;
  width: 27.8vw;
  max-width: 356px;
  pointer-events: none;
}
#item .itemA .logoMasterlise{
  top: 210px;
}
#item .itemFigure .itemSlide{
  position: absolute;
  right: 50px;
  top: 260px;
  width: 27.8vw;
  max-width: 356px;
}
#item .itemA .itemSlide{
  top: 280px;
}
#item .itemFigure .spec{
  display: flex;
  position: absolute;
  right: 50px;
  top: 908px;
}
#item .itemFigure .spec p{
  margin: 0 0 0 10px;
  padding: 6px 14px;
  font-size: 20px;
  border: 1px solid #ffffff;
  color: #ffffff;
}
#item .itemFigure .comment{
  position: absolute;
  right: 50px;
  top: 968px;
  background: rgba(0,0,0,0.6);
  width: 92.1vw;
  max-width: 1180px;
  padding: 24px;
  font-size: 20px;
  color: #ffffff;
}
#item .itemFigure h3 img{
  display: block;
  position: absolute;
  left: 40px;
  top: 552px;
  z-index: 99;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  #item .itemFigure .logoMasterlise{
    right: 3.9vw;
    top: 14.8vw; 
  }
  #item .itemFigure .itemSlide{
    right: 3.9vw;
    top: 20.3vw;
  }
  #item .itemA .logoMasterlise{
    top: 15.8vw; 
  }
  #item .itemA .itemSlide{
    top: 21.3vw;
  }
  #item .itemFigure .spec{
    right: 3.9vw;
    top: 70.93vw;
  }
  #item .itemFigure .spec p{
    margin: 0 0 0 0.78vw;
    padding: 0.15vw 1.09vw;
    font-size: 1.56vw;
  }
  #item .itemFigure .comment{
    right: 3.9vw;
    top: 75.6vw;
    padding: 1.87vw;
    font-size: 1.56vw;
  }
  #item .itemFigure h3 img{
    left: 1.56vw;
    top: 42vw; 
  }
}

/* ==================== itemA ==================== */
.itemA{
  background: url(../images/bg_item_a.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 87vw;
  max-height: 1114px;
}
.itemA h3 img{
  width: 63vw;
  max-width: 808px;
}
.itemA .productImg{
  display: block;
  position: absolute;
  left: 0;
  top: 120px;
  width: 41.4vw;
  max-width: 530px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .itemA .productImg{
    top: 9.4vw;
  }
}

/* ==================== itemB ==================== */
.itemB{
  background: url(../images/bg_item_b.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 87vw;
  max-height: 1114px;
}
.itemB h3 img{
  width: 56.71vw;
  max-width: 726px;
}
.itemB .productImg{
  display: block;
  position: absolute;
  left: 448px;
  top: 138px;
  width: 31.56vw;
  max-width: 404px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .itemB .productImg{
    left: 35vw;
    top: 10.71vw;
  }
}

/* ==================== itemC ==================== */
.itemC{
  background: url(../images/bg_item_c.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 87vw;
  max-height: 1114px;
}
.itemC h3 img{
  width: 63.43vw;
  max-width: 812px;
}
.itemC .productImg{
  display: block;
  position: absolute;
  left: 140px;
  top: 140px;
  width: 31.09vw;
  max-width: 398px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .itemC .productImg{
    left: 10.93vw;
    top: 10.93vw;
  }
}
#item .itemC .itemFigure .spec p{
  border: 1px solid #000000;
  color: #000000;
}

/* ==================== itemD ==================== */
.itemD{
  background: url(../images/bg_item_d.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 87vw;
  max-height: 1084px;
}
.itemD h3 img{
  width: 56.09vw;
  max-width: 718px;
}
.itemD .productImg{
  display: block;
  position: absolute;
  left: 368px;
  top: 180px;
  width: 40.46vw;
  max-width: 518px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .itemD .productImg{
    left: 28.75vw;
    top: 14.06vw;
  }
}

/* ==================== itemE ==================== */
.itemE{
  background: url(../images/bg_item_e.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 102.42vw;
  max-height: 1311px;
}
.itemE h3 img{
  width: 59.21vw;
  max-width: 758px;
}
.itemE .productImg{
  display: block;
  position: absolute;
  left: 140px;
  top: 174px;
  width: 40.15vw;
  max-width: 514px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .itemE .productImg{
    left: 10.93vw;
    top: 13.59vw;
  }
}

/* ==================== itemF G H ==================== */
.itemSmall{
  position: relative;
  margin: 0 auto;
  width: 92.18vw;
  max-width: 1180px;
  margin-bottom: 80px;
}
@media screen and (max-width: 1220px){
  .itemSmall{
    margin-bottom: 6.25vw;
  }
}
.itemSmall h3 img{
  width: 43.43vw;
  max-width: 556px;
}
.itemH h3 img{
  width: 66.40vw;
  max-width: 850px;
}
.itemSmall .flex .itemSlide{
  width: 34.84vw;
  max-width: 446px;
  margin-right: 40px;
}
@media screen and (max-width: 1220px){
  .itemSmall .flex .itemSlide{
    margin-right: 3.12vw;
  }
}
.itemSmallRightCol{
  flex: 2;
}
#item .itemSmall .spec{
  display: flex;
  margin-bottom: 20px;
}
#item .itemSmall .spec p{
  margin: 0 0 0 10px;
  padding: 6px 14px;
  font-size: 20px;
  border: 1px solid #000000;
  color: #000000;
}
@media screen and (max-width: 1220px){
  #item .itemSmall .spec{
    margin-bottom: 1.56vw;
  }
  #item .itemSmall .spec p{
    margin: 0 0 0 0.78vw;
    padding: 0.15vw 1.09vw;
    font-size: 1.56vw;
  }
}
#item .itemSmall .spec p:first-of-type{
  margin: 0;
}
#item .itemSmall .comment{
  background: rgba(255,255,255,0.7);
  width: 100%;
  padding: 24px;
  font-size: 20px;
  color: #000000;
  margin-bottom: 20px;
  line-height: 1.6em;
}
@media screen and (max-width: 1220px){
  #item .itemSmall .comment{
    padding: 1.87vw;
    font-size: 1.56vw;
    margin-bottom: 1.56vw;
  }
}
#item .illustrator{
  background: rgba(0,0,0,0.7);
  width: 100%;
  padding: 24px;
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
}
#item .illustrator b{
  display: block;
  font-size: 30px;
  margin-bottom: 20px;
}
#item .illustrator b:last-of-type{
  margin-bottom: 6px;
}
#item .illustrator b span{
  font-size: 22px;
}
#item .illustrator .flex{
  margin-bottom: 20px;
}
#item .illustrator .flex .photo{
  display: block;
  width: 15.15vw;
  max-width: 194px;
  height: 11.32vw;
  max-height: 145px;
  pointer-events: none;
  border: 1px solid #ffffff;
  margin-right: 20px;
}
#item .illustrator p{
  font-size: 15px;
  line-height: 1.8em;
}
#item .illustrator .illustratorComment{
  border: 1px solid #ffffff;
  padding: 10px;
}
@media screen and (max-width: 1220px){
  #item .illustrator{
    padding: 1.87vw;
    font-size: 1.56vw;
  }
  #item .illustrator b{
    font-size: 2.34vw;
    margin-bottom: 1.56vw;
  }
  #item .illustrator b:last-of-type{
    margin-bottom: 0.46vw;
  }
  #item .illustrator b span{
    font-size: 1.71vw;
  }
  #item .illustrator .flex{
    margin-bottom: 1.56vw;
  }
  #item .illustrator .flex .photo{
    margin-right: 1.56vw;
  }
  #item .illustrator p{
    font-size: 1.17vw;
  }
  #item .illustrator .illustratorComment{
    padding: 0.78vw;
  }
}
#item .itemSmall .pd0{
  padding: 0;
}
.itemG .itemSmallRightCol,
.itemH .itemSmallRightCol{
  display: flex;
  flex-direction: column;
}
.itemG .bx-pager,
.itemH .bx-pager{
  max-width: 444px;
  order: 1;
}

/* ==================== itemLo ==================== */
.itemLo{
  background: url(../images/bg_item_lo.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 99.45vw;
  max-height: 1273px;
  margin-top: -100px;
}
.itemLo h3 img{
  width: 59.37vw;
  max-width: 760px;
}
.itemLo .productImg{
  display: block;
  position: absolute;
  left: 84px;
  top: 186px;
  width: 45.31vw;
  max-width: 580px;
  pointer-events: none;
}
.sumishiki{
  width: 100px;
  position: absolute;
  top: 50px;
  right: -10px;
  pointer-events: none;
}
.bos{
  width: 220px;
  position: absolute;
  top: 10px;
  right: -10px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .itemLo{
    margin-top: -7.81vw;
  }
  .itemLo .productImg{
    top: 9.4vw;
  }
  .sumishiki{
    width: 7.81vw;
    top: 3.9vw;
    right: -0.6vw;
  }
  .bos{
    width: 17.18vw;
    top: 0.6vw;
    right: -0.6vw;
  }
}

/* ==================== ダブルチャンスキャンペーン ==================== */

#dcc{
  width: 79.84vw;
  max-width: 1022px;
  margin: 0 auto;
  pointer-events: none;
}
#dcc img{
  width: 100%;
}

/* ==================== キャンペーン ==================== */

#campaign{
  background: #000000 url(../images/bg_campaign.jpg) no-repeat bottom center;
  padding: 90px 0;
}
@media screen and (max-width: 1220px){
  #campaign{
    padding: 7.03vw 0;
  }
}
#campaign h2{
  text-align: center;
}
#campaign h2 img{
  width: 42.89vw;
  max-width: 549px;
  padding-bottom: 40px;
}
@media screen and (max-width: 1220px){
  #campaign h2 img{
    padding-bottom: 3.2vw;
  }
}
.campaign{
  display: block;
  width: 79.06vw;
  max-width: 1012px;
  margin: 0 auto;
  pointer-events: none;
}

/* ==================== SDBHとは？ ==================== */
#about{
  background: url(../images/bg_about.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 63.51vw;
  max-height: 813px;
  padding: 90px 0;
}
@media screen and (max-width: 1220px){
  #about{
    padding: 7.03vw 0;
  }
}
#about h2{
  text-align: center;
}
#about h2 img{
  width: 29.84vw;
  max-width: 382px;
  padding-bottom: 40px;
}
@media screen and (max-width: 1220px){
  #campaign h2 img{
    padding-bottom: 3.2vw;
  }
}
.aboutCol{
  width: 800px;
  margin: 0 auto;
  font-size: 20px;
  flex-direction: row-reverse;
}
@media screen and (max-width: 1220px){
  .aboutCol{
    width: 62.5vw;
    font-size: 1.56vw;
  }
}
.aboutCol p{
  background: rgba(255,255,255,0.7);
  width: 100%;
  padding: 0;
  font-size: 20px;
  color: #000000;
  margin-bottom: 20px;
  line-height: 1.6em;
}
@media screen and (max-width: 1220px){
  .aboutCol p{
    padding: 0;
    font-size: 1.56vw;
    margin-bottom: 1.56vw;
  }
}
.sdbhBnr{
  width: 100%;
}
.game{
  margin-left: 20px;
  display: block;
  width: 22.65vw;
  max-width: 290px;
  height: 34.14vw;
  max-height: 437px;
  pointer-events: none;
}
@media screen and (max-width: 1220px){
  .game{
    margin-left: 1.56vw;
  }
}

/* ==================== フッター ==================== */
footer{
  text-align: center;
}
footer a{
  font-size: 20px;
  border-bottom: 1px solid #000000;
  text-decoration: none;
  color: #000000;
}
footer a:hover{
  opacity: 0.4;
}
@media screen and (max-width: 600px){
  footer a:hover{
    opacity: 1;
  }
}
footer p{
  font-size: 14px;
  margin: 20px 0 40px;
}
@media screen and (max-width: 1220px){
  footer a{
    font-size: 1.56vw;
  }
  footer p{
    font-size: 1.09vw;
    margin: 1.56vw 0 3.12vw;
  }
}

/* ==================== 追従 ==================== */
.fixedBtn{
  display: block;
  position: fixed;
  z-index: 99999; 
}
.btnIchibankuji{
  left:20px;
  top: 10px;
  height: 10vw;
  max-height: 135px;
}
.btnPagetop{
  left:20px;
  bottom: 20px;
  height: 7vw;
  max-height: 61px;
}
.btnShoplist{
  right:20px;
  bottom: 20px;
  height: 16vw;
  max-height: 149px;
}

/* ==================== 表示非表示 ==================== */
.pc,.tb,.sp{
  display: none;
}
@media screen and (min-width: 769px){
  .pc{
    display: block;
  }
}
@media screen and (max-width: 768px) and (min-width: 601px){
  .tb{
    display: block;
  }
}
@media screen and (max-width: 600px){
  .sp{
    display: block;
  }
}

/* =================================================== */
/* ==================== タブレット ==================== */
/* =================================================== */
@media screen and (max-width: 768px){
  p {
    font-size: 2vw;
  }
  .txtL{
    font-size: 16px;
    line-height: 1.6em;
  }
  #firstView{
    height: 90vw;
    margin-bottom: 26%;
  }
  #firstView h1{
    bottom: 6%;
  }
  #firstView h1 img{
    width: 66%;
  }
  .catchCopy{
    bottom: -21vw;
  }
  .catchCopy img{
    width: 96%;
  }
  #gnavi{
    width: 96vw;
  }
  #gnavi img{
    height: 6vw;
  }
  #howto{
    padding: 10vw 0;
  }
  #howto h2 img{
    width: 70vw;
  }
  #howto p{
    margin-bottom: 8vw;
    font-size: 2.6vw;
  }
  #howto img{
    width: 96%;
  }
  #howto .date{
    padding-top: 3vw;
  }
  #movie h2 img,#item h2 img{
    height: auto;
  }
  #dcc{
    width: 98%;
  }
  #about{
    background: url(../images/bg_about_sp.jpg) no-repeat center top;
    background-size: contain;
    padding: 12vw 0;
    height: auto;
    max-height: 99999vw;
  }
  .aboutCol{
    display: block;
    width: 98%;
  }
  .aboutCol p{
    font-size: 2.2vw;
    text-align: center;
  }
  #campaign{
    padding: 12vw 0;
  }
  .campaign{
    width: 96%;
    max-width: 500px;
  }
  .sdbhBnr{
    display: block;
    margin: 0 auto;
    width: 96%;
  }
  .game{
    margin: 0 auto 4vw;
    width: 50vw;
    height: auto;
  }
  .btnIchibankuji {
    left: 10px;
    height: 16vw;
  }
  .btnPagetop {
    left: 14px;
    bottom: 14px;
    height: 10vw;
  }
  .btnShoplist {
    right: 14px;
    bottom: 14px;
    height: 20vw;
  }
  footer{
    padding-bottom: 18vw;
  }
}

/* =================================================== */
/* ==================== スマートフォン ================= */
/* =================================================== */
@media screen and (max-width: 600px){
  p {
    font-size: 3.4vw;
  }
  .txtL{
    font-size: 3.6vw;
  }
  #gnavi{
    flex-wrap: wrap;
    justify-content: center;
  }
  #gnavi a{
    display: block;
    margin: 0 2vw 2vw;
    width: 40vw;
  }
  #gnavi img{
    display: block;
    height: 10vw;
  }
  #howto p{
    font-size: 3vw;
    line-height: 1.6em;
  }
  .aboutCol p{
    font-size: 3.6vw;
  }
  footer a {
    font-size: 3vw;
  }
  footer p {
    font-size: 2.6vw;
  }
  #movie h2 img,
  #campaign h2 img,
  #about h2 img,
  #item h2 img{
    width: auto;
    height: 16vw;
    padding: 0;
    margin: 0 0 6vw;
  }
  #movie h2{
    margin-top: 2vw;
    margin-bottom: -3vw;
  }
  #item h2 img{
    margin-bottom: -4vw;
  }
  #item .itemCol{
    width: 94%;
    margin: 0 auto;
  }
  #item .itemFigure h3 img {
    display: block;
    position: absolute;
    width: auto;
    height: 43vw;
    z-index: 99;
    pointer-events: none;
    top: 90vw;bottom:0;left:0;right:0;
  }
  #item .itemFigure .logoMasterlise {
    position: absolute;
    width: 35%;
    top: 139vw;
    right:0;
  }
  #item .itemB .itemFigure .logoMasterlise,
  #item .itemD .itemFigure .logoMasterlise{
    right: auto;
    left: 0;
  }
  #item .itemFigure .itemSlide {
    position: relative;
    width: 100%;
    max-width: 99999vw;
    margin: 0 auto 0;
    padding-top: 146vw;
    top:0;bottom:0;left:0;right:0;
  }
  #item .itemFigure .spec {
    clear: both;
    display: flex;
    position: relative;
    padding: 4vw 0;
    top:0;bottom:0;left:0;right:0;
  }
  #item .itemFigure .spec p {
    margin: 0 0 0 0.78vw;
    padding: 1vw 2vw;
    font-size: 4vw;
  }
  #item .itemFigure .comment {
    position: relative;
    width: 100%;
    top:0;bottom:0;left:0;right:0;
  }  
  .itemA{
    background: url(../images/bg_item_a_sp.png) no-repeat top center,linear-gradient(#ffb400, #ff9a00);
    background-size: contain;
    width: 100%;
    height: auto;
    max-height: 99999vw;
    padding: 12vw 0 0;
  }
  .itemA .productImg{
    display: block;
    position: absolute;
    width: 108vw;
    margin: 0 0 0 -42vw;
    top:0; bottom:0;left:0;right:0;
  }  
  .itemB{
    background: url(../images/bg_item_b_sp.png) no-repeat top center,linear-gradient(#005cda, #004ae7);
    background-size: contain;
    width: 100%;
    height: auto;
    max-height: 99999vw;
    padding: 12vw 0 0;
  }
  .itemB .productImg{
    display: block;
    position: absolute;
    width: 80vw;
    margin: 0 0 0 32vw;
    top:0;bottom:0;left:0;right:0;
  }  
  .itemC{
    background: url(../images/bg_item_c_sp.png) no-repeat top center,linear-gradient(#00f0dc, #00f0ff);
    background-size: contain;
    width: 100%;
    height: auto;
    max-height: 99999vw;
    padding: 12vw 0 0;
  }
  .itemC .productImg{
    display: block;
    position: absolute;
    width: 80vw;
    margin: 0 0 0 -16vw;
    top:0; bottom:0;left:0;right:0;
  }  
  .itemD{
    background: url(../images/bg_item_d_sp.png) no-repeat top center,linear-gradient(#38aa00, #1a9200);
    background-size: contain;
    width: 100%;
    height: auto;
    max-height: 99999vw;
    padding: 12vw 0 0;
  }
  .itemD .productImg{
    display: block;
    position: absolute;
    width: 110vw;
    margin: 0 0 0 16vw;
    top:0;bottom:0;left:0;right:0;
  }  
  .itemE{
    background: url(../images/bg_item_e_sp.png) no-repeat top center,linear-gradient(#ff1800, #e50100);
    background-size: contain;
    width: 100%;
    height: auto;
    max-height: 99999vw;
    padding: 12vw 0 0;
  }
  .itemE .productImg{
    display: block;
    position: absolute;
    width: 104vw;
    margin: 2vw 0 0 -12vw;
    top:0; bottom:0;left:0;right:0;
  } 
  #item .illustrator .illustratorComment{
    padding: 4vw;
  }
  .itemLo{
    background: url(../images/bg_item_lo_sp.png) no-repeat top center,linear-gradient(#858686, #202020);
    background-size: contain;
    width: 100%;
    height: auto;
    max-height: 99999vw;
    padding: 12vw 0 0;
  }
  .itemLo .productImg{
    display: block;
    position: absolute;
    width: 104vw;
    margin: 2vw 0 0 -16vw;
    top:0; bottom:0;left:0;right:0;
  }
  #item .itemLo .itemFigure h3 img{
    height: auto;
    width: 100%;
    top: 84vw;
  }
  .itemSmall{
    width: 94%;
    margin-bottom: 12vw;
  }
  .itemH{
    margin-bottom: 0;
  }
  #item .itemSmall h3 img {
    width: auto;
    height: 25vw;
    margin-bottom: 2vw;
  }
  #item .itemSmall .flex{
    display: block;
    margin-bottom: 6vw;
  }
  #item .itemSmall .flex .itemSlide{
    width: 100%;
    margin: 0 auto;
  }
  #item .itemSmallRightCol{
    clear: both;
  }
  #item .itemSmallRightCol .spec{
    display: flex;
    position: relative;
    padding: 4vw 0;
    top:0;bottom:0;left:0;right:0;
    margin: 0;
  }
  #item .itemSmallRightCol .spec p{
    margin: 0 0 0 0.78vw;
    padding: 1vw 2vw;
    font-size: 4vw;
  }
  #item .itemSmall .comment{
    font-size: 3.4vw;
    padding: 0;
    margin-bottom: 6vw;
  }
  #item .illustrator {
    padding: 6vw 4vw;
  }
  #item .illustrator b{
    font-size: 5.4vw;
    margin-bottom: 1.56vw;
  }
  #item .illustrator b span{
    font-size: 5.4vw;
  }
  #item .illustrator b:last-of-type{
    margin-bottom: 2vw;
  }
  #item .illustrator .flex .photo {
    margin: 0 0 2vw;
    width: 100%;
    height: auto;
    max-width: 99999vw;
    max-height: 99999vw;
  }
  #item .illustrator p {
    font-size: 4vw;
  }
  .itemG .itemSmallRightCol div,
  .itemH .itemSmallRightCol div{
    order: 2;
  }
  .itemG .itemSmallRightCol .bx-pager,
  .itemH .itemSmallRightCol .bx-pager{
    order: 1;
    max-width: 98%;
    margin: 0 auto;
  }
  .sumishiki{
    width: 18vw;
    top: 6.6vw;
    left: auto;
    right: -0.8vw;
  }
  .bos{
    width: 24vw;
    top: 9vw;
    left: auto;
    right: -1vw;
  }
  .itemEBgEnd{
    display: block;
    background: url(../images/bg_item_f_sp.png) no-repeat top center;
    background-size: contain;
    padding-bottom: 4vw;
    width: 100%;
  }
  .itemLoBgEnd{
    display: block;
    background: url(../images/bg_item_lo_end_sp.png) no-repeat top center;
    background-size: contain;
    padding-bottom: 4vw;
    width: 100%;
  }
  #dcc{
    padding-bottom: 12vw;
  }
  footer{
    padding-bottom: 10vw;
  }
}
/* ==================== BANDAI SPIRITS ロゴ ==================== */
footer div{
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.bspLogo{
  display: block;
  position: absolute;
  bottom: -10px;
  right: 10px;
  width: 4.23vw;
  max-width: 50px;
  border: none;
}
.bspLogo img{
  width: 100%;
}
@media screen and (max-width: 600px){
  .bspLogo{
    display: block;
    bottom: 0;
    right: 0;
    position: relative;
    width: 12.4vw;
    margin: 8vw auto 0;
  }
}
@media screen and (min-width: 600px) and (max-width: 1530px){
  .btnShopFadeout{
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay:0;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode: forwards;
    animation-name: fadeout;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode: forwards;
    pointer-events: none;
  }
  .btnShopFadein{
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay:0;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode: forwards;
    animation-name: fadein;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode: forwards;
  }
}
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeout {
  0% {opacity: 1}
  100% {opacity: 0}
}