/*------------------------------------------------------------------------------
* roulette
*------------------------------------------------------------------------------*/

/*  wapper  */
div.roulette_board_wap { 
width:320px;
margin:0 auto;
position:relative;
}

/*  キャンペーン期限の配置  */
/*  Page1で使用  */
div.roulette_deadline_section {
position:absolute;
right:0;
top:50px;
width:75px;
height:45px;
z-index:2;
}

/*  Page2で使用  */
div.roulette_deadline_section2 {
position:absolute;
right:0;
top:0;
width:75px;
height:45px;
z-index:2;
}

/*  ルーレットはroulette_sectionのDivの中にAbsoluteで配置  */
/*  Page1で使用  */
div.roulette_board_section {
position:relative;
height:inherit;
margin-right:auto;
margin-left:auto;
background-image:url(../../shared/img/1640/otms_roulette_container.jpg);
background-position:left top;
background-repeat:no-repeat;
-moz-background-size:100% auto;
-webkit-background-size:100% auto;
-o-background-size:100% auto;
background-size:100% auto;
}

/*  Page2で使用  */
div.roulette_board_section2 {
position:relative;
height:inherit;
margin-right:auto;
margin-left:auto;
background-image:url(../../shared/img/1640/otms_roulette_after_container.jpg);
background-position:left top;
background-repeat:no-repeat;
-moz-background-size:100% auto;
-webkit-background-size:100% auto;
-o-background-size:100% auto;
background-size:100% auto;
}

.roulette_back_img {
height:320px;
width:320px;
margin:auto;
display:block;
}

.roulette_overlay_img {
position:absolute;
left:0;
top:0;
height:320px;
width:320px;
margin:auto;
display:block;
z-index:1;
}

/*  オーダーボタンの配置  */
div.order_button_section {
position:relative;
height:45px;
width:320px;
margin-right:auto;
margin-left:auto;
z-index:10;
}

.roulette_order_image {
position:absolute;
width:227px;
height:45px;
top:225px;
left:26px;
margin-top:-10px;
}

.roulette_form {
position:absolute;
width:275px;
height:27px;
top:275px;
left:0;
}

/*  ストップボタンの配置  */
.roulette_stop_image {
width:320px;
height:45px;
}

/*  ルーレットにストップリンクの配置  */
.roulette_stop {
position:absolute;
width:280px;
height:280px;
top:20px;
left:20px;
z-index:3;
}

/* The Modal (background) */
.modal {
display:none; /* Hidden by default */
position:fixed; /* Stay in place */
z-index:2; /* Sit on top */
padding-top:10px; /* Location of the box */
left:0;
top:0;
width:100%; /* Full width */
height:100%; /* Full height */
overflow:auto; /* Enable scroll if needed */
background-color:rgb(0,0,0); /* Fallback color */
background-color:rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position:relative;
/* background-color:rgba(255, 255, 255, 0.9); */
background-image:url(../../shared/img/1640/otms_roulette_no1.png);
border-radius:12px;
margin:40px auto 0;
padding:0;
height:312px;
width:280px;
-moz-background-size:280px auto;
-webkit-background-size:280px auto;
-o-background-size:280px auto;
background-size:280px auto;
box-shadow:0 2px 4px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
-webkit-animation-name:animatetop;
-webkit-animation-duration:0.4s;
animation-name:animatetop;
animation-duration:0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-150px; opacity:0}
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-150px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
.close_button {
color:#aaa;
float:right;
font-size:14px;
font-weight:bold;
}

.close_button:hover,
.close_button:focus {
color:black;
text-decoration:none;
cursor:pointer;
}

.myBtn {
visibility:hidden;
}


/*------------------------------------------------------------------------------
* Slot
*------------------------------------------------------------------------------*/

div.roulette_section{
position:relative;
height:210px;
}

div.roulette_container {
display:inline-block;
}

div.container_bg {
margin:0 auto;
background:url(../../shared/img/1636/otms_slot_container_bg.jpg) left top repeat-y;
height:inherit;
}

div.container {
margin:0 auto;
width:320px;
background:url(../../shared/img/1636/otms_slot_container.jpg) left top no-repeat;
background-size:320px auto;
height:inherit;
}

div.three-container{
position:absolute;
width: 270px;
top:35px;
left:25px;
}

div.roulette1{
position:absolute;
left:2px;
top:-1px;
}

#overlay1{
position:absolute;
left:2px;
top:-1px;
width:82px;
height:141px;
z-index:100;
background:transparent url(../../shared/img/1636/otms_slot_transparent.png) no-repeat;
background-size: 83px auto;
}
div.roulette2{
position:absolute;
left:92px;
top:-1px;
}
#overlay2{
position:absolute;
left:92px;
top:-1px;
width:82px;
height:141px;
z-index:100;
background:transparent url(../../shared/img/1636/otms_slot_transparent.png) no-repeat;
background-size: 83px auto;
}
div.roulette3{
position:absolute;
left:185px;
top:-1px;
}
#overlay3{
position:absolute;
left:185px;
top:-1px;
width:82px;
height:141px;
z-index:100;
background:transparent url(../../shared/img/1636/otms_slot_transparent.png) no-repeat;
background-size: 83px auto;
}

/* 結果表示 */
.roulette_img-kekka {
-webkit-animation: kekka_hyouji 3.0s ease 0s;
-moz-animation: kekka_hyouji 3.0s ease 0s;
-o-animation: kekka_hyouji 3.0s ease 0s;
animation: kekka_hyouji 3.0s ease 0s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}

@-webkit-keyframes kekka_hyouji{
0%{opacity: 0;}
99%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes kekka_hyouji{
0%{opacity: 0;}
99%{opacity: 0;}
100%{opacity: 1;}
}
@-o-keyframes kekka_hyouji{
0%{opacity: 0;}
99%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes kekka_hyouji{
0%{opacity: 0;}
99%{opacity: 0;}
100%{opacity: 1;}
}

.roulette_bg {
background:url(../../shared/img/1636/otms_slot_result_bg.jpg) left top no-repeat;
background-size:contain;
}