﻿
.main-contents-inner-bg{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9ead5+29,ffffff+57 */
background: #f9ead5; /* Old browsers */
background: -moz-linear-gradient(top,  #f9ead5 70%, #ffffff 87%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f9ead5 70%,#ffffff 87%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f9ead5 70%,#ffffff 87%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ead5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.main-contents-inner-bg{
	background: url(https://demo.ebisumart.com/client_info/PHITEN/view/userweb/ext/cp/omikuji/img/02.png) no-repeat;
	background-position: 0px 780px;
}
#hako {
  margin: 150px auto 50px;

}

#main{
	margin:900px auto 0;
    width: 700px;
    position: relative;
	padding-bottom: 80px;
}

#omikuji {
  position: relative;
	top:-550px;
	left: 40%;
}
#bou {
  height: 260px;
  top: -60px;
  left: 60px;
  overflow: hidden;
  position: absolute;
	}
#bou img {
  margin: 260px 0 0 -18px;
}
#hako {
  top: 0px;
  left: -25px;
  position: absolute;
	
}
#startBtn {
  margin-left: -130px;
  position: absolute;
 top:-750px;
  left: 50%;
  cursor: pointer;
}
#startBtn:hover {
  opacity: 0.8;
}
#icon {
  width: 1px;
  position: absolute;
  top: 200px;
  left : 50px;
}
#icon img {
  width: 100%;
}

#bodyArea {
	width: 640px;
	padding: 0 50px;
	margin: 50px auto;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
	border: 4px double #333;
}
table#result {
	width: 100%;
	margin: 0 0 20px;
	padding: 1px;
	/*border: 4px double #333;*/
	/*background: #ffffff;*/
	display: none;
	border-collapse: collapse;
}
table#result thead {
	/*border: 1px solid #333;*/
	border-left: none;
	border-bottom: none;
}
table#result thead th {
	width: 50%;
	margin: 0;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	color: #333;
	/*border-left: 1px solid #333;*/
}
#result tbody {
	/*border: 1px solid #333;*/
}
table#result tbody th {
	padding: 10px;
	color: #333;
	/*border-bottom: 1px solid #333;
	border-left: 1px solid #333;*/
	width: 50%;
}
table#result tbody td {
	padding: 10px;
	/*border-bottom: 1px solid #333;
	border-left: 1px solid #333;*/
}
table.establishment {
	width: 640px;
	margin: 20px 0 50px;
	padding: 0;
	border-collapse: collapse;
	/*border-top: 1px solid #090;
	border-left: 1px solid #090;*/
}
table.establishment th, table.establishment td {
	margin: 0;
	padding: 10px;
	/*border-bottom: 1px solid #090;
	border-right: 1px solid #090;*/
}
.ataribody{padding: 2% 0;}
.kouso{width: 60%;height: auto;margin-bottom: 50px;}
.atari_links{margin-bottom: 50px;}
/* Wobble To Top Right */
@-webkit-keyframes hvr-wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}
33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}
49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}
66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes hvr-wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}
33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}
49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}
66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes rotateArea {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.hvr-wobble-to-top-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	cursor: pointer;
}
.hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus .hvr-wobble-to-top-right:active {
	-webkit-animation-name: hvr-wobble-to-top-right;
	animation-name: hvr-wobble-to-top-right;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
.hvr-wobble-to-top-right.after {
	-webkit-animation-name: rotateArea;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}
table#result tbody td {
	text-align: center;
}
table#result tbody td.hyakunin, table#result tbody th {
	padding: 18px 10px 10px;
	text-align: center;
}
table.establishment {
	margin: 20px 0;
}
#bodyArea {
	padding: 0 50px 50px;
}
@media screen and (max-width:764px) {
#bodyArea {
	padding: 0 20px 20px;
}
#bodyArea, table.establishment, table#result {
	width: 100%;
	box-sizing: border-box;
}
.hvr-wobble-to-top-right {
	width: 100%;
	max-width: 315px;
	height: auto;
}
table#result tbody td.hyakunin {
	padding: 10px;
}
table#result tbody td.hyakunin {
	text-align: left;
}
table#result tbody td.hyakunin rp, table#result tbody td.hyakunin rt {
	display: none;
}
}