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

/*  Page1で使用  */
div.roulette_board_wap {
background:url(../image/otameshi_roulette_container.jpg) no-repeat;
height:774px;
position:relative;
}

/*  Page2で使用  */
div.roulette_board_wap2 {
background:url(../image/otameshi_roulette_after_container.jpg) no-repeat;
height:624px;
position:relative;
}

/*  キャンペーン期限の配置  */
div.roulette_deadline_section {
position:absolute;
right:10px;
top:10px;
}

/*  ルーレットはroulette_sectionのDivの中にAbsoluteで配置  */
div.roulette_board_section {
position:relative;
width:948px;
top:-20px;
}

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

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

/*  オーダーボタンの配置  */
div.order_button_section {
position:relative;
height:90px;
top:-34px;
}

.roulette_order_image {
position:absolute;
width:454px;
height:90px;
top:490px;
left:150px;
}

.roulette_form {
position:absolute;
width:600px;
height:45px;
top:609px;
left:76px;
}

/*  ストップボタンの配置  */
div.stop_button_section {
position:relative;
}

.roulette_stop_image {
position:absolute;
width:454px;
height:90px;
left:247px;
top:-10px;
}

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

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

.stop_button_section a:hover img {
opacity:1 !important;
}

/* The Modal (background) */
.modal {
display:none; /* Hidden by default */
position:fixed; /* Stay in place */
z-index:2; /* Sit on top */
padding-top:20px; /* 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(../image/otameshi_roulette_no1.png);
border-radius:25px;
margin:auto;
padding:0;
border:1px solid #888;
height:653px;
width:760px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 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:-300px; opacity:0}
to {top:0; opacity:1}
}

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

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

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

.myBtn {
visibility:hidden;
top:-20px;
}


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

/*  Page1の上部で使用  */
div.container1 {
background:url(../image/otameshi_slot_container1.jpg) no-repeat;
height:430px;
}

/*  Page1の下部で使用  */
div.container2 {
background:url(../image/otameshi_slot_container2.jpg) no-repeat;
height:430px;
}

/*  Page2で使用  */
div.container {
background:url(../image/otameshi_slot_after_container.jpg) no-repeat;
height:430px;
}

/*  ルーレットはroulette_sectionのDivの中にAbsoluteで配置  */
div.roulette_section{
position:relative;
height:430px;
}

div.three-container{
position:absolute;
top:70px;
left:210px;
}

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

div.roulette2{
position:absolute;
left:185px;
top:-1px;
}

div.roulette3{
position:absolute;
left:365px;
top:-1px;
}

#overlay1{
position:absolute;
left:5px;
top:-1px;
width:163px;
height:280px;
z-index:100;
background:transparent url(../image/otameshi_slot_transparent.png) no-repeat;
}

#overlay2{
position:absolute;
left:185px;
top:-1px;
width:163px;
height:280px;
z-index:100;
background:transparent url(../image/otameshi_slot_transparent.png) no-repeat;
}

#overlay3{
position:absolute;
left:365px;
top:-1px;
width:163px;
height:280px;
z-index:100;
background:transparent url(../image/otameshi_slot_transparent.png) no-repeat;
}

/*  ストップボタンの配置  */
div.button_section{
position:relative;
}
#stop_image{
position:absolute;
width:454px;
height:90px;
left:248px;
top:10px;
}
#stop_image2{
position:absolute;
width:454px;
height:90px;
left:248px;
top:10px;
}

/* 結果表示用 */
.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;}
50%{opacity:0;}
80%{opacity:0.5;}
100%{opacity:1;}
}
@-moz-keyframes kekka_hyouji{
0%{opacity:0;}
50%{opacity:0;}
80%{opacity:0.5;}
100%{opacity:1;}
}
@-o-keyframes kekka_hyouji{
0%{opacity:0;}
50%{opacity:0;}
80%{opacity:0.5;}
100%{opacity:1;}
}
@keyframes kekka_hyouji{
0%{opacity:0;}
50%{opacity:0;}
80%{opacity:0.5;}
100%{opacity:1;}
}

.roulette_bg {
background:url(../image/otameshi_slot_result_bg.jpg) left top no-repeat;
background-size:contain;
}