@charset "utf-8";

*{
	margin:0;
	padding:0;
}
body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 120%;
	line-height: 1.4;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background: url(../img/bg_main.svg) top center no-repeat;
	background-size: 100%; 
	overflow-x: hidden;
}
::selection { background-color: orange; }
::-moz-selection { background-color: orange; }


/* ----------------------- RESET CSS ----------------------- */

a {
	color: black;
	text-decoration: none;
}
a:focus { outline: none; }
a:hover, a:active { outline: 0; }

img {
	vertical-align: middle;
	outline: none;
	border-style: none;
}

ul, ol { list-style-type: none; }


/* ----------------------- MAIN CONTS ----------------------- */

/* main -------------------------------------------- */

section{
  margin: 0 auto;
  padding: 13px 0;
  text-align: center;
  transition: all 1s ease-out;
  width: 90%;
}

#error{
	display: none;
	background: url(../img/bg_caution.svg) center top no-repeat;
	font-size: 16px;
	height: 120px;
	margin-top: 70px;
	padding-top: 54px;
}

#intro{
	width: 80%;
}

.btn_slot{
  /* background: red; */
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  cursor:pointer;
  display: block;
  margin: 0 auto;
  padding: 0 1em;
  text-align:  center;
  max-width: 200px;
  width: 70%;
  z-index: 999;
}

.btn_slot_anim{  animation: btn_bounce 2s infinite; }

.btn_slot_start{
	background: linear-gradient(to bottom, #e01 22%, #b01 100%);
	border: 5px solid #a40012;
	box-shadow: 0px 5px 0px #a40012;
}

.btn_slot_stop{
	background: linear-gradient(to bottom, #2b7cde 22%, #134cbf 100%);
	border: 5px solid #148;
	box-shadow: 0px 5px 0px #148;
}


@keyframes btn_bounce {
  15%{ transform: rotateZ(5deg) }
  30%{ transform: rotateZ(-5deg) }
}

/* #slot -----------*/
.body_slot {
  /* background: url(../img/img_slot_body.svg) center bottom no-repeat; */
  margin: 0 auto 10px;
  /* width: 95%; */
  /* height: 550px; */
  padding: 0 0 20px;
}

.slot_body_inner{
	background: linear-gradient(to bottom, #eee 10%, #ccc 100%);
	border-radius: 6px;
	display:flex;
	justify-content:space-between;
	margin: 10px auto;
	min-width: 270px;
	max-width: 320px;
	width: 91%;
	height: 95px;
	padding: 10px;
}

.slot_board{
	flex-basis: 30%;
	background-position: center top;
	background-repeat: repeat-y;
	transition-property: background-position;
	transition-duration: 3s;
	transition-timing-function: ease-out;
}

.slot_board_left{
	background-image: url(../img/img_slot_banmen_l.svg) ;
}

.slot_board_center{
	background-image: url(../img/img_slot_banmen_c.svg);
	transition-delay: .1s;
}

.slot_board_right{
	background-image: url(../img/img_slot_banmen_r.svg);
	transition-delay: .2s;
}

.slot_board_stop{
	transition-duration: 3s;
	transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

/* 結果画面 */

#messages{
	background: url(../img/img_title_bord.svg) center no-repeat;
	background-size: contain;
	height: 150px;
	/*min-width: 320px;*/
	/*max-width: 340px;*/
	width: 100%;
	margin: 0 auto;
	padding: 90px 0 10px;
	position: relative;
	text-align: center;
}

#messages img{
	/*width: 100%;*/
}

#hello, #seeyou{
	width: 100%;
	max-width: 370px;
}

.txt_title{
	margin-top: -6px;
}

.txt_sorry{
	transform: translate(20px,0);
}


.img_pina_stampget{
	position: absolute;
	right: -10px;
	bottom: -16px;
}

.txt_stampget{margin: 0}