@charset “utf-8”;
html,body{
margin: 0;
padding: 0;
width:100%;
overflow-x : hidden;
}
#_pcp,#_pcp_mini{
display:none;
}
*{
-webkit-tap-highlight-color:rgba(0,0,0,0);
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
outline:none;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.clearfix:after{
content: "";
clear: both;
display: block;
}
#cover{
position:relative;
max-width:650px;
margin:0 auto;
}
.head{
max-width:650px;
z-index:2;
width:100%;
position:fixed;
height:50px;
margin-bottom:5px;
box-shadow: -1px 5px 4px -4px rgba(0,0,0,0.3);
}
.demo{
position:relative;
width:30px;
height:30px;
border-radius:5px;
text-align:center;
padding-top:5px;
float:left;
}
.howto .inb{
margin-top:15px;
}
.howto span{
height:30px;
display:block;
margin-left:40px;
margin-bottom:10px;
line-height:30px;
}
.head .pn{
#margin-right:40px;
margin-right:5px;
transition: margin-right 300ms cubic-bezier(0.17,0.04,0.03,0.94);
background-image: url(../img/pm.png);
background-position: right center;
background-size: 60px auto;
background-repeat: no-repeat;
color:#fff;
font-size:10px;
position:absolute;
right:10px;
top:0;
height:100%;
padding-top:15px;
text-align:right;
line-height:10px;
padding-right:70px;
z-index:1;
}
.mark{
width:10px;
height:10px;
position:absolute;
background-color:#999;
border-radius:10px;
top:28px;
left:92px;
margin-left:40px;
transition: margin-left 300ms cubic-bezier(0.17,0.04,0.03,0.94);
z-index:3;
border:1px solid #fff;
}
.green{
background-color:#688A08;
}
.yellow{
background-color:#B18904;
}
.main-btn{
position:relative;
margin-top:-50px;
}
.main-btn-add{
margin-left:-40px;
}
#mypush-btn,#news-btn,#site-btn{
position:absolute;
width:25px;
height:25px;
border-radius:25px;
border:2px solid #fff;
cursor:pointer;
top:13px;
z-index:2;
background-position: center center;
background-size: 70%;
background-repeat: no-repeat;
}
.sbtn,.nbtn,.mbtn{
width:20px;
height:20px;
display:inline-block;
border-radius:20px;
border:1px solid #fff;
cursor:pointer;
background-position: center center;
background-size: 70%;
background-repeat: no-repeat;
}
#news-btn{
left:115px;
}
#site-btn{
left:75px;
}
#mypush-btn{
left:155px;
}
#mypush{
opacity:.5;
top:12px;
padding:3px 7px;
border-radius:7px;
border:3px solid #fff;
cursor:pointer;
color:#fff;
position:absolute;
font-size:12px;
right:15px;
}
#mypush:hover{
opacity:1;
}
#icon{
width:40px;
height:40px;
display:block;
overflow:hidden;
border-radius:5px;
margin:5px 5px 5px 10px;
}
#icon img{
width:100%;
height:100%;
}
#main{
padding:55px 5px 5px 5px;
}
#news{
}
#news ul,#news li,#news h2{
list-style-type:none;
padding:0;
margin:0;
}
#news li .box{
z-index:1;
cursor:pointer;
box-shadow: 3px 3px 3px -3px rgba(0,0,0,0.3);
background-color:rgba(255,255,255,1);
margin-bottom:5px;
border-radius:5px;
overflow:hidden;
position:relative;
height:100px;
transition: margin-top 300ms cubic-bezier(0.17,0.04,0.03,0.94);
transition: margin-left 300ms cubic-bezier(0.17,0.04,0.03,0.94);
}
#news .box .cov{
padding:7px 10px;
}
#news .box:last-child{
margin-bottom:0;
}
#news .date{
font-size:10px;
display:block;
color:#aaa;
}
#news .body span{
display:block;
text-decoration:none;
font-weight:bold;
color:#666;
line-height:16px;
font-size:14px;
margin-top:3px;
margin-bottom:2px;
max-height:32px;
overflow:hidden;
}
#news .ex{
#height:32px;
line-height:16px;
overflow:hidden;
display:block;
font-size:12px;
color:#777;
}
#news .bl{
position:absolute;
height:11px;
bottom:0;
margin-left:90px;
width:100%;
background-color:#fff;
}
#news .icon{
width:100px;
height:100px;
overflow:hidden;
float:left;
margin-right:15px;
display:block;
}
#news .icon img{
width:100%;
height:100%;
}
#news .add{
background-color:#688A08;
box-shadow: 1px 3px 1px -2px rgba(0,0,0,0.2) inset;
position:absolute;
width:17px;
height:17px;
right:5px;
top:3px;
border-radius:20px;
background-position: center center;
background-size: 70%;
background-repeat: no-repeat;
}
#site-btn,.sbtn{
background-image:url(../img/point.png);
}
#news-btn,#mypush-btn,#news .add,.nbtn,.mbtn{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAABH1JREFUaIHtmkFoI1UYx9+8mWkaE9kQKXVVWBcUQXfB3cOCStcVRHBR8KLiwYMgexAWVqzgMSqKi/XmYQ8evAnRkywlAaE1i3vRpS09CMsaCi1Zt+lmZjozaWbe+97nZapNSNt5aeZNLP2dJjPz5f1/vDdv3kxCiCJKpRK1bfsrjAjDEG3bvqSqfaUgoomI3+J/hNsbADCddr6h47ru5cjPQsT3EPFpRPwEEQNERNd1X0o749BARINz/msk/EXPsR+j4f2dqjxUQRtjlNInou2NnmMWIYRomvaMghyEEDXCTAixFm1fQsRTiGgg4gVCyBuEEBKG4YKCHOpotVofIKKIhrWNiMuIuIWIyDnHer1+Pu2MQwERc+12+03XdX9CRI594JwjY6zi+/73ruu+hYi5tHNL02g0TniedxUAbveT3AsAuO153tVGo3EibY99qVarOcdxrgDAPVnRPuL3HMe5srS0NJo9btv2WSFE7aCivXDOa81m82zafl202+3nAWB92LLbAMA9xthzaXsSQgixLOs85/x+UrLbcM5blmWlO5tHw/jvpGV3cHd9ff1MKrLVajUXBMEfCmURETEIgt8bjcYDyoU3Nzc/Ui27jeu6nyqV3draOgkAd9MSBoD7tm2fHCT7QGtpSulnlNKHB6kdBpTSYiaT+XygWtmC1dXVoq7rFwZpbJiMjY294jhOUbZOWnhycvJ1Xdcfk60bNpTSiWw2+5psnS5zMiJqnPMvDcN4UrahJOCcZw3D+GF+fh7j1mgyDTSbzQeLxeKflNJH5eMNHwBo6Lr+lKZpXtwaqSENAELTtI58tGQAgGOzs7OPJNZAGIbPIqKf1u2oFwBA2eWmVA+bpvkQIUT9KmcXKKWkUCgYUjWSbQjJ81UQe8IiRM1LvJHiSPiwcyR82DkS3gvOeVI5BkY201EPH3akhA3DkHq6UoFsJtlreEouTvLIZootPDc3ZwghLspHShZEvIiIUg8QsXAc5xwAiP0e2VQDAGJjY+NcXI9YPVwul/VMJvMxpXTkrmFKqZbP56fL5XKs11WxBBBRZ4ydNk1z5IQJIYQxhqZpLmuaBmlnGTl27THP807ncrm8yjDDwvd9L5/PL8c6uVarTXQ6nWtCiCDtCWlQhBBBp9O5VqvVJvaURUTd87zraQceFpFL12TWNaQZYy8YhnGjd///GOScT5mm+dv2jq7bEmPsQ3J4ZAkhRIuc/qVLmHM+pjZP8vQ6dQlns9mv1cZJnl6nLuFKpXIrDMObaiMlRxiGNyuVyq09T0LE44yxn9OeYQ9K5HC816/vBFUqlej09PTLuq5PUdq93BZC7Pl5t339jvV+9076HYuzTwhBAODGzMzML6VSaRR/KTkiURK951qW9WKhUHgbYP+HGE3TNMbYN+Pj43eSzJQojuO8KzPRtFqtU2lnPhCtVusY5/xOHFnf96+Tw7DKazab7+wnGwSBa1lWOv+hTALf99/nnLf6yXLO/1pZWXk17YxDZ3Fx8cza2trqTtl6vV5dWFh4XGWOfwB/NZuCix+zvwAAAABJRU5ErkJggg==);
}
#next{
display:none;
color:#000;
font-weight:bold;
opacity:.2;
font-size:16px;
text-align:center;
cursor:pointer;
margin-top:15px;
margin-bottom:10px;
}
/* TOGGLE */
.pushbox{
position:absolute;
right:7px;
z-index:0;
#display:block;
display:none;
margin-top:-100px;
border-radius:5px;
width:120px;
height:90px;
background-color:#fff;
text-align:center;
}
.pushsite,.pushsite2,.pushbox .btn{
display:inline-block;
text-decoration:none;
font-size:10px;
color:#fff;
line-height:78px;
width:50px;
height:50px;
opacity:.8;
float:right;
border-radius:0 3px 0 0;
background-size:40%;
background-repeat:no-repeat;
background-position:center 10px;
border-left:1px solid #fff;
}
.pushsite2{
top:29px;
border-radius:0;
}
.pushbox .read{
background-image:url(../img/file.png);
}
.pushbox .move{
background-image:url(../img/point.png);
}
.pushbox .home{
background-image:url(../img/home.png);
}
.pushbox input[type="checkbox"]{
  display: none;
}
.pushbox .btn{
position:absolute;
top:auto;
bottom:0;
height:32px;
border-radius:0 0 3px 0;
cursor:pointer;
}
.pushbox .lever{
position:absolute;
top:0;
background-color:#fff;
line-height:25px;
text-align:right;
padding-right:7px;
font-size:10px;
  color: #999;
  font-weight: normal;
  display: inline-block;
left:22px;
width:75px;
height:26px;
  border: 1px solid #ccc;
  border-radius:20px;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.pushbox .lever:before{
  display: inline-block;
  content:'';
  position: absolute;
  left: 2px;
  top:1px;
  border: 1px solid #e5e5e5;
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius:100%;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.pushbox input[type="checkbox"]:checked + .lever{
	background: #688A08;
   	border-color:#688A08;
	color: #fff;
	line-height:25px;
	text-align:left;
	padding-left:7px;
}
.pushbox input[type="checkbox"]:checked + .lever:before{
	left: 100%;
	margin-left: -23px;
	border-color: #fff;
}
.blinking{
    -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

#prompt,#message{
display:none;
position:fixed;
width:250px;
height:110px;
top:50%;
left:50%;
margin-left:-125px;
margin-top:-55px;
border-radius:10px;
z-index:20;
box-shadow: 0 0 8px #aaa;
background-color:#688A08;
}
.btn_yes,.btn_no{
display:inline-block;
position:absolute;
width:50%;
text-align:center;
color:#fff;
bottom:0;
font-size:14px;
height:30px;
line-height:30px;
border-top:1px solid #719608;
border-radius:0 0 0 10px;
cursor:pointer;
}
.btn_yes:hover,.btn_no:hover{
background-color:rgba(255,255,255,.2);
}
.btn_yes{
border-right:1px solid #719608;
left:0;
}
.btn_no{
border-radius:0 0 10px 0;
border-left:1px solid #5E7D07;
right:0;
}
#prompt .title,#message .title{
font-size:10px;
color:#fff;
text-align:center;
height:20px;
line-height:20px;
border-radius:10px 10px 0 0;
}
#prompt .exp,#message .exp{
background-color:rgba(255,255,255,.05);
overflow:hidden;
line-height:16px;
padding:0 15px 15px 15px;
color:#fff;
font-size:14px;
width:100%;
height:60px;
border-bottom:1px solid #5E7D07;
position:relative;
}
#prompt .exp span,#message .exp span{
height:55px;
display: table-cell;
vertical-align: middle;
}
#message .btn_no{
width:100%;
border-radius:0 0 10px 10px;
border-left:1px solid #719608;
border-top:1px solid #719608;
}
.redmess{
background-color:#B40431 !important;
}
.redmess .btn_no,.redmess .btn_yes{
border-color:#C50535 !important;
}
.redmess .exp{
border-color:#A1062D !important;
}
.bluemess{
background-color:#0489B1 !important;
}
.bluemess .btn_no,.bluemess .btn_yes{
border-color:#318DAB !important;
}
.bluemess .exp{
border-color:#057FA4 !important;
}
.yellowmess{
background-color:#886A08 !important;
}
.yellowmess .btn_no,.yellowmess .btn_yes{
border-color:#957509 !important;
}
.yellowmess .exp{
border-color:#7A5F08 !important;
}

#backcover{
z-index:10;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
display:none;
}
.zoom-cov{
width:100%;
position:fixed;
bottom:110px;
left:50%;
margin-left:-18px;
z-index:3;
}
#zoom{
position:absolute;
width:36px;
height:36px;
background-color:#000;
border-radius:36px;
opacity:.5;
border:3px solid #aaa;
background-image:url(../img/zoom.png);
background-size:65%;
background-repeat:no-repeat;
background-position:center center;
display:none;
cursor:pointer;
}
.zoom-cov .sel{
	display:none;
	margin-left:-57px;
	bottom:15px;
        width:150px;
        border-radius:10px;
        padding:0;
        position: absolute;
        color: #19283C;
        background: #F6F6F6;
        border: 2px solid #688A08;
        z-index: 1;
        box-shadow: 0 0 8px #aaa;
}
.zoom-cov .sel:before{
        content: "";
        position: absolute;
        bottom: -8px; left: 50%;
        margin-left: -9px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 9px 9px 0 9px;
        border-color: #eee transparent transparent transparent;
        z-index: 0;
}
.zoom-cov .sel:after{
        content: "";
        position: absolute;
        bottom: -12px; left: 50%;
        margin-left: -10px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #688A08 transparent transparent transparent;
        z-index: -1;
}
.zoom-cov .sel .bx{
border-radius:10px;
position:relative;
max-height:257px;
-webkit-overflow-scrolling:touch;
overflow-y:auto;
border-radius:0;
overflow-x:hidden;
}
.zoom-cov .sel span{
display:block;
font-size:12px;
border-top:1px solid #fff;
border-bottom:1px solid #ddd;
padding:10px 0;
cursor:pointer;
text-align:center;
}
.zoom-cov .sel .bx span{
padding:10px 12px;
line-height:12px;
text-align:left;
}
.zoom-cov .sel > span:first-child{
border-top:none;
border-radius:7px 7px 0 0;
height:25px;
padding:0;
line-height:25px;
font-size:10px;
color:#fff;
background-color:#688A08;
}
.zoom-cov .sel > span:last-child{
border-bottom:none;
border-radius:0 0 10px 10px;
background-color:#eee;
}
.zoom-cov .sel .bx span:hover{
background-color:#eee;
}
.new .dis{
display:block;
position:absolute;
right:28px;
color:#688A08;
font-weight:bold;
top:0;
padding:4px 7px 0 7px;
}

/* APP ADV */
.app-cov{
display:none;
margin:0 auto;
position:fixed;
bottom:0;
width:100%;
height:50px;
z-index:1;
max-width:650px;
}
.app-adv
{
box-shadow: 0 -3px 3px -3px rgba(0,0,0,0.4);
width:100%;
background-color:#fff;
display:inline-block;
color:#000;
text-decoration:none;
cursor:pointer;
}
.app-adv:hover,.app-adv:active
{
background-color:#EFFBF8;
}
.app-adv .app-icon
{
float:left;
width:38px;
height:38px;
border-radius:5px;
margin:7px 7px 7px 3px;
}
.app-adv .app-dl
{
float:right;
height:38px;
margin:7px 3px 7px 7px;
}
.app-adv span
{
font-weight:bold;
font-size:10px;
display:block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height:13px;
}
.app-adv .t
{
margin-top:7px;
}
.app-adv span:last-child
{
color:#777;
font-weight:normal;
font-size:9px;
}
#help{display:none;}
/* PC */
@media screen and (min-width: 650px){
	#loader{
		margin-left:150px;
	}
	.zoom-cov{
		margin-left:132px;
	}
	#help{
		font-size:12px;
		display:block;
		padding:50px 0 0 0;
		position:fixed;
		margin-left:-307px;
		padding-bottom:15px;
		top:0;
		width:300px;
		height:100%;
	}
	.explain{
		position:relative;
		-webkit-overflow-scrolling:touch;
		overflow-y:auto;
		overflow-x:hidden;
		padding:10px;
		border:2px solid #ddd;
		margin:7px 0 0 7px;
		background-color:#fff;
		border-radius:7px;
		height:100%;
	}
	.app-cov{
		max-width:950px;
		padding-left:300px;
	}
	#main{
		margin-left:300px;
	}
	#cover,.head{
		max-width:950px;
	}
        .desc{
		margin-top:5px;
                padding-left:5px;
                font-size:10px;
                margin-bottom:3px;
        }
	.copy{
		width:100%;
		text-align:center;
		text-decoration:none;
		color:#999;
		display:block;
		margin-top:35px;
		margin-bottom:15px;
		padding-top:10px;
		border-top:1px solid #ddd;
		font-size:10px;
	}
	.stitle{
		color:#fff;
		font-weight:bold;
		text-align:center;
		line-height:30px;
		border-radius:5px;
		height:30px;
		margin-bottom:15px;
	}
	.welcome{
		margin-top:10px;
		margin-bottom:20px;
	}
        .howto{
		margin-top:35px;
                margin-bottom:20px;
        }
	.qrcode{
		margin-top:35px;
		margin-bottom:20px;
	}
	.qrcode img{
		width:65px;
		height:65px;
		float:left;
		margin-right:5px;
	}
	.qrcode span{
		line-height:12px;
		text-align:justify;
		font-size:10px;
		padding-top:5px;
	}
	.qrcode .url{
		width:100%;
		height:35px;
		font-size:10px;
		font-weight:bold;
		text-align:center;
		border:1px solid #ccc;
		border-radius:5px;
		line-height:35px;
	}
	.caution{
		margin-top:15px;
	}
	.browser{
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		width:100%;
		margin-top:15px;
		height:60px;
		margin-bottom:15px;
		background-image:url(../img/browser.png);
	}
	.brs{
		font-size:10px;
		color:#777;
	}
	.brs span{
		display:block;
		text-align:right;
		font-size:10px;
	}
	#help h2{
		font-size:14px;
		margin:0;
		padding:0;
		border-bottom:2px solid;
		margin-bottom:10px;
		padding-bottom:5px;
	}
.use-sv{
border-radius:7px;
margin:30px 0;
opacity:.7;
position:relative;
}
.use-sv:hover{
opacity:1;
}
#own{
text-decoration:none;
text-align:center;
font-weight:bold;
cursor:pointer;
width:100%;
height:40px;
display:block;
}
#own .e{
display:block;
line-height:40px;
color:#fff;
font-size:14px;
}
#own .f{
color:#fff;
width: 0;
height: 0;
border: 7px solid transparent;
border-left: 7px solid;
right:10px;
top:13px;
position:absolute;
}
}
#nolist{
width:100%;
text-align:center;
display:none;
}
#nolist span{
opacity:.3;
margin-top:150px;
display:inline-block;
width:80px;
height:80px;
background-image: url("../img/nolist.png");
background-repeat:no-repeat;
background-position: center center;
background-size:100% 100%;
}
#rap,#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
text-align:center;
z-index:4;
}
#loader span{
font-size:10px;
color:#666;
display:inline-block;
position:absolute;
top: 50%;
width:80px;
margin-top:25px;
margin-left:-40px;
}
#rap{
#opacity:.77;
#background-color:#fff;
}
#loader{
background-image: url("../img/loader.gif");
background-repeat:no-repeat;
background-position: center center;
background-size:32px 32px;
}