@charset "utf-8";

body{
	background:#f2f5f6;
}

#checkin header{
	border-bottom:1px solid #fff;
	-webkit-box-shadow: 0px 1px 1px #c9c9c9;
	-moz-box-shadow: 0px 1px 1px #c9c9c9;
	box-shadow: 0px 1px 1px #c9c9c9;
}

#checkin header div{
	display:block;
	color:#fff;
	font-size:16px;
	padding:12px 6px;
	background:#023d65;
}

#checkin header p{
 	background:#dedede;
    padding:8px;
	font-size:12px;
}


#checkin header a{
	width:6em;
	height:22px;
	font-size:12px;
	line-height:1.8;
	text-align:center;
	cursor:pointer;
	color:#000;

	background:#dbdbdb;
	background:linear-gradient(top, #dbdbdb 0%, #fff 100%);
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dbdbdb));
	background:-moz-linear-gradient(top, #fff, #dbdbdb);
	background:-o-linear-gradient(top, #fff, #dbdbdb);

	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;

	position:absolute;
	right:10px;
	top:10px;
}


#checkin form{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	background:#fff;
	overflow:hidden;
}

#checkin h2{
	padding:14px 0 14px 30px;
	position:relative;
	font-size:16px;
	cursor:pointer;
	border-top:1px solid #bbb;
}

#checkin h2:before{
	content:"";
	display:block;
	width:15px;
	height:15px;
	position:absolute;
	left:6px;
	top:16px;

	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #bbb;
	background:#dbdbdb;
	background-image:linear-gradient(top, #dbdbdb 0%, #fff 100%);
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dbdbdb));
	background-image:-moz-linear-gradient(top, #fff, #dbdbdb);
	background-image:-o-linear-gradient(top, #fff, #dbdbdb);

}

#checkin h2:after{
	display:block;
	content:"";
	position:absolute;
	left:10px;
	top:22px;
	width: 0;
	height: 0;
	border-style:solid;
	border-width:6px 4px 0 4px;
	border-color:#777 transparent transparent transparent;
}

#checkin h2.active:after{
	border-width:0 4px 6px 4px;
	border-color:transparent transparent #777 transparent;
	top:21px;
}

#checkin h2 span{ font-size:12px;font-weight:normal; }
#checkin h2 + div{ display:none; }

#memoBox,
#pubBox{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	margin-bottom:1px;
	padding:0 10px 20px 30px;
	border-bottom:1px solid #bbb;
}

#memoBox textarea{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	width:100%;
	min-height:10em;
}

#memoBox textarea:focus { background:#f7e9f7;}

#memoBox textarea + span{
	display:block;
	padding-top:4px;
	font-size:12px;
}

#memoBox #error{
	margin-top:12px;
	color:#c00;
	font-weight:bold;
}

#memoBox #error+textarea{ background:#F7E9F7;}

#counter{ font-weight:bold; }

#pubBox ul{
	padding-left:24px;
	overflow:hidden;
}

#pubBox li{
	float:left;
	padding-right:12px;
}

#pubBox input{ display:none; }


#pubBox input+label{
	display:block;
	width:48px;
	padding-top:54px;
	position:relative;
	font-size:10px;
	color:#011b8f;
	text-align:center;
}

#pubBox input+label:before{
	display:block;
	content:"";
	width:48px;
	height:48px;
	margin:0;
	padding:0;
	overflow:hidden;
	background-image:url(../../images/smartphone/bt_checkin_pub.png);
	background-repeat:no-repeat;
	background-size:144px auto;
	cursor:pointer;
	position:absolute;
	left:0;
	top:0;
}

#checkin_post_facebook + label:before {
  background-position:0 -48px;
}
#checkin_post_facebook:checked + label:before {
  background-position:0 0;
}
#checkin_post_twitter + label:before {
  background-position:-48px -48px;
}
#checkin_post_twitter:checked + label:before {
  background-position:-48px 0;
}
#checkin_public + label:before {
  background-position:-96px -48px;
}
#checkin_public:checked + label:before {
  background-position:-96px 0;
}

#bt_ci{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	padding:6px;
	border-top:1px solid #bbb;
	overflow:hidden;

}

#bt_ci button{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;

	display:block;
	width:100%;
	padding:20px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;

	background:#023d65;
	cursor:pointer;

	border:2px solid #fff;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;

	-moz-box-shadow:0 0 1px 0 rgba(1,27,43,1);
	-webkit-box-shadow:0 0 1px 0 rgba(1,27,43,1);
	box-shadow:0 0 1px rgba(1,27,43,1);

}

#bt_ci button:after{
	display:block;
	content:"";
	width:80px;
	height:80px;
	background: url(../../images/smartphone/icon_checkin01.png) no-repeat 0 0;
	position:absolute;
	right:4px;
	top:4px;
	opacity:0.3;
}


/* edit +++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++ */

#bt_ci2{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	padding:6px;
	border-top:1px solid #bbb;
	overflow:hidden;
}

#bt_ci2 button{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;

	display:block;
	padding:14px 20px;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-align:center;

	cursor:pointer;

	border:2px solid #fff;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;

	-moz-box-shadow:0 0 1px 0 rgba(1,27,43,1);
	-webkit-box-shadow:0 0 1px 0 rgba(1,27,43,1);
	box-shadow:0 0 1px rgba(1,27,43,1);

}


#bt_ci2 button:nth-child(1){
	width:56%;
	float:right;
	background:#023d65;
}

#bt_ci2 button:nth-child(2){
	width:41%;
	float:left;
	background:#bbb;
}





#ciHelp{
	background:#f2f5f6;
	border-top:1px solid #9c9c9c;
    overflow:hidden;
}

#ciHelp:before {
	display:block;
	content:"";
	height:4px;
	margin-bottom:18px;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#aaa), to(#f2f5f6));
	background-image:-moz-linear-gradient(top, #aaa, #f2f5f6);
	background-image:-ms-linear-gradient(top, #aaa, #f2f5f6);
	background-image:-o-linear-gradient(top, #aaa 0%, #f2f5f6 100%);
	background-image:linear-gradient(top, #aaa, #f2f5f6);
}


#ciHelp dt{
	display:block;
	width:12em;
	margin:12px auto 24px auto;
	background:#333;
	color:#fff;
	padding:4px 4px 6px;
	text-align:center;
	cursor:pointer;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	font-size:12px;
	position:relative;

}

#ciHelp dt:after{
	display:block;
	content:"";
	position:absolute;
	right:10px;
	top:8px;
	width:0;
	height:0;
	border-style:solid;
	border-width:6px 4px 0 4px;
	border-color:#fff transparent transparent transparent;
}


#ciHelp dt.active:after{
	top:7px;
	border-width:0 4px 6px 4px;
	border-color:transparent transparent #fff transparent;
}

#ciHelp dd{
	margin:8px;
	padding:8px;
	line-height:1.4;

}

#ciHelp dd p{margin-bottom:1em;}
#ciHelp dd p:last-child { text-align:center;}
#ciHelp dd a{ text-decoration:underline;}



#userList{
	display:block;
	margin:20px;
	text-decoration:underline;
	text-align:center;
}

div.checkin {
  position:absolute;
  right:6px;
  top:8px;
  width:3.6em;
  text-align:center;
}

input.checkin-btn {
  width: 47px;
  background-image: url(../../images/smartphone/icon_checkin01.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border: none;
  display: flex;
  justify-content: center;
  padding-top: 25px;
  background-position: center top;
  background-color: inherit;
  border-left: 1px solid #ddd;
  color:#000;
}

input.checkin-btn.checked {
  background-image: url(../../images/smartphone/icon_checkin02.png);
}
input.checkin-btn.on {
  background-image: url(../../images/smartphone/icon_checkin02.png);
}