@charset "UTF-8";

/*
 * main color: #00A975
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
button,
/*
dl, dt, dd, ul, ol, li,
*/
fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video, canvas {
        margin: 0;
            padding: 0;
}


html { -webkit-text-size-adjust: none; }

body{
	font-family:skia;
}

/* for iPad */
@media screen and (min-width:480px){
	div#title{
	    border:none;/* solid 1px #000;  */
	    background-color: #fff;  
	    -webkit-box-shadow: rgba(0,0,0,.2) 1px 2px 4px;  

	    color: rgba(0,0,0,1.0);  
	    font-size:18pt; 
	    font-weight:bold;  
	    text-align:left;
	    text-shadow: rgba(0,0,0,0.3) 0px -1px 1px;  

	    padding:0.2em 0.5em;
	    position:absolute; 
	    width:520px;
	    height:64px;
	    top:8px; 
	    left:-48px; 
	    z-index:2; 
	    padding-left:64px;
	    
	    opacity: .7;

	    -webkit-transform: rotateZ(-15deg);
	    -moz-transform: rotate(-15deg);
	}

	div#titlesub{
		font-size:10pt;
		font-weight:normal;
	}
}


/* for iPhone */
@media screen and (max-width:480px){
	div#title{
	    border:none;/* solid 1px #000;  */
	    background-color: #fff;  
	    -webkit-box-shadow: rgba(0,0,0,.2) 1px 2px 4px;  

	    color: rgba(0,0,0,1.0);  
	    font-size:14pt; 
	    font-weight:bold;  
	    text-align:left;
	    text-shadow: rgba(0,0,0,0.3) 0px -1px 1px;  

	    padding:0.2em 0.5em;
	    position:absolute; 
	    width:480px;
	    height:48px;
	    top:-8px;
	    left:-64px; 
	    z-index:2; 
	    padding-left:64px;
	    
	    opacity: .7;

	    -webkit-transform: rotateZ(-15deg);
	    -moz-transform: rotate(-15deg);
	}

	div#titlesub{
		font-size:9pt;
		font-weight:normal;
	}
}


div#header > div#logo{
	margin:0 0; float:left;
}
div#header > div#tooltitle{
	float:right; font-size:24pt; font-weight:bold; color:#54bb94; margin:0.5em 0;
}
@media screen and (max-width:480px){
	div#header > div#logo{
		float:none;
		margin:auto auto;
		text-align:center;
	}
	div#header > div#tooltitle{
		float:none; 
		text-align:center;
		font-size:24pt; font-weight:bold; color:#54bb94; margin:0.5em 0;
	}
}

div.page{
    position:absolute; 
    top:0px; 
    left:0px;
    display: none;
/*    background:white;*/
	width:768px;
	height:1024px;
/*
    width:100%;
    height:100%;
*/
    overflow:hidden;
	border: solid 1px silver;
}

div.entry-page {
	background-color: #fff;  
	position:absolute; 
	left:-192px; 
	top:-256px;
	display: none;
	width:1152px;
	height:1536px;
	overflow:hidden;
	border: solid 1px silver;
}


/* I don't know why but it's too heavy for iPhone4 */
/* iPad only */
/* if zoom, it's heavy too for iPad... */
/*
@media screen and (min-width:480px){
	div.page{
		-webkit-box-shadow: rgba(0,0,0,.5) 2px 4px 8px;
		border: none;
	}
}
*/


.map{
	position:absolute;
	left:192px;
	top:256px;
	width:768px;
	height:1024px;
}

.local{
	position:absolute;
	width:768px;
	height:1024px;
	top:0px;
	left:0px;
}
.bingomark{
    -webkit-transform-style: preserve-3d;           /* 3D表現使用する */
    -webkit-perspective: 100;                       /* パース(遠近感)の設定 */
    -webkit-animation-iteration-count: infinite;    /* 繰り返しの回数は無限 */
    -webkit-animation-direction: normal;            /* アニメの再生方向 */
    -webkit-animation-duration: 1.0s;               /* アニメの再生時間 */
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: ani_rotX;
}
@-webkit-keyframes ani_rotX{
  from {
    opacity:1.0;
    -webkit-transform: scale(1.0);
  }
  to {
    opacity:0.0;
    -webkit-transform: scale(2.0);
  }
}


div.page > img, div.entry-page > img {
	-webkit-transform: translate3d(0px, 0px, 0px) !important;
}


div.button{
/*
	position:absolute;
*/
	z-index:2;
	width:56px;
	height:56px;
	background:white;
    -webkit-border-radius: 8px; 
	-webkit-box-shadow: rgba(0,0,0,.5) 1px 2px 8px; 
	position:relative;
}
div.button > img{
	position:relative;
	top:4px;
	left:4px;
	width:48px;
	height:48px;
}

div.enable{
	opacity:0.5;
}
div.disable{
	opacity:0.2;
}
div.active{
	opacity:0.9;
}


div.navigatebutton{
	z-index:2;
}
div.navigatebutton > img{
	width:48px;
	height:48px;
}



.disablebtn{
	opacity: .3;
}

div#bottombar{
	z-index:3;
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:64px;
	display: -webkit-box; 
	display:-moz-box; 
	-moz-box-orient: horizontal; 
	-webkit-box-orient: horizontal;
	border:none 1px orange;
}

div#bottombar > div{
	display:-webkit-box; 
	display:-moz-box; 
	-moz-box-align: center; 
	-webkit-box-align: center;
	border:none 1px pink;
}

div.marginleft{
	margin-left:16px;
}
div.marginright{
	margin-right:16px;
}

/*	iphone
*/
@media screen and (max-width:480px){
	div.button{
		width:40px;
		height:40px;
	}
	div.button > img{
		width:32px;
		height:32px;
	}

	div.marginleft{
		margin-left:8px;
	}
	div.marginright{
		margin-right:8px;
	}

}





.panel{
	list-style-type: none; margin: 0; padding: 0;
}
.panel li{
	border: none 8px silver;
	margin: 16px 24px; 
	padding: 0px; 
	float: left; 
	width: 144px; 
	height: 177.375px; 
	font-size: 8pt; 
	text-align: center;
	position:relative;
	-webkit-box-shadow: rgba(0, 0, 0, .8) 1px 2px 8px;
	-moz-box-shadow: rgba(0, 0, 0, .8) 1px 2px 8px;
}
@media screen and (max-width:480px){
	.panel li{
		float:none;
		display:box;
		margin: 1em auto;
	}
}

img.mapthumb, span.mapthumb{
	width:144px;
	height:177.375px;
}
span.mapthumb {
	color: #ccc;
	font-size: 24pt;
	text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 1px;
	display: block;
	padding: 77px 5px;
}
div.maptitle{
	position:absolute;
	left:-16px;
	bottom:16px;
	background: white;
	width:128px;
	height:2em;
	font-size:9pt;
	overflow:hidden;
	padding:4px 8px;
	text-align:left;
	-webkit-box-shadow: rgba(0, 0, 0, .6) 1px 2px 4px;
	-moz-box-shadow: rgba(0, 0, 0, .6) 1px 2px 4px;
	border: none 1px silver;
	color:gray;
	font-weight:bold;
	white-space:nowrap;
	z-index:2;
	opacity: 1.0;
	-webkit-transform: rotateZ(-10deg);
	-moz-transform: rotate(-10deg);
}
p.maplead {
	position: absolute;
	left: -16px;
	top: -12px;
	font-size: 11px;
	font-weight: bold;
}

.pushbutton {
	padding: 4px 10px 12px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background: 
		-webkit-gradient(  
			linear,  
			0% 0%,  
			0% 100%,  
			from(rgba(255, 255, 255, 0.7)),
			to(rgba(0, 0, 0, 0.3)),
			color-stop(0.60,rgba(255, 255, 255, 0.1)),
			color-stop(0.70,rgba(155, 155, 155, 0.2))
		);
	background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 60%, rgba(155, 155, 155, 0.2) 70%, rgba(0, 0, 0, 0.3));
	border: solid 2px #00b774;
	font-size:20pt;
	font-family: sans-serif;
	font-weight:bold;
	color:#00b774;
	-webkit-box-orient: horizontal;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-moz-box-orient: horizontal;
	-moz-box-align: center;
	-moz-box-pack: center;
	display: -webkit-box;
	display: -moz-box;
/*
	display:block;
*/
}

/*
.pushbutton:hover {
	background-color: #00b774;
	color:#ffffff;
	text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 1px;
}
*/

.deleteBtn{
	position:absolute;
	z-index:1;
	top:-14px;
	right:-14px;
	width:34px;
	height:34px;
	background:none;
}
.deleteBtn img{
	width:34px;
	height:34px;
	position:absolute;
	top:0px;
	left:0px;
}

.plusBtn{
	position:absolute;
	z-index:1;
	top:4px;
	left:4px;
	width:34px;
	height:34px;
	background:none;
}
.plusBtn img{
	width:34px;
	height:34px;
	position:absolute;
	top:0px;
	left:0px;
}
.minusBtn{
	position:absolute;
	z-index:1;
	top:4px;
	left:57px;
	width:34px;
	height:34px;
	background:none;
}
.minusBtn img{
	width:34px;
	height:34px;
	position:absolute;
	top:0px;
	left:0px;
}




.nowloading {
/*	background: url('../images/nowloading24.png') top left no-repeat;*/
	width: 24px;
	height: 24px;
	-webkit-transform-style: preserve-3d;           /* 3D表現使用する */
	-webkit-perspective: 100;                       /* パース(遠近感)の設定 */
	-webkit-animation-iteration-count: infinite;    /* 繰り返しの回数は無限 */
	-webkit-animation-direction: normal;            /* アニメの再生方向 */
	-webkit-animation-duration: 3.0s;               /* アニメの再生時間 */
	-webkit-animation-timing-function: linear;
	-webkit-animation-name: ani_rotZ;
	opacity: .5;
	overflow:hidden;
}

@-webkit-keyframes ani_rotZ{
	from {
		-webkit-transform: rotateZ(0deg);
	}
	to {
		-webkit-transform: rotateZ(360deg);
	}
}



/* EMG
 *
*/
@media screen{
    div.emg{
        clear:both;
    }
    div.emg table{
        margin:0 auto;
        border:solid 1px black;
    }
}

@media print{
    div.emg{
        display:none;
    }
}