@charset "utf-8";

/* ---- initialize -------- */

body { 
	width:100%;
	margin:0;
	padding:0; 
	color:#000000;
	text-align:center;
	font-size:16px;
	line-height:23px; 
	height:100%;
	background:url(../images/bg.gif) top no-repeat;
	font-family:'メイリオ','ＭＳ Ｐゴシック','MS PGothic',Verdana,osaka,Meiryo,sans-serif;
}
#content {
	width: 900px;
	margin: 0 auto;
	padding: 30px 60px 0 60px;
	text-align: left;
	position: relative;
}

a { text-decoration:none; color:#005F30; }
a:visited{ color:#57770C; text-decoration:none; }
a:hover  { color:#1A7B79; text-decoration:underline; }
a:active { color:#57770C; text-decoration:underline; }

.indent {
	padding-left:1em;
	text-indent:-1em;
}
.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	zoom:1;
}

h2.line {
	border-bottom: solid 3px #e1e2ce;
	position: relative;
	font-size: 22px;
	color: #5C4C38;
	margin-top:10px;
	margin-bottom:10px;
	padding-left:5px;
}
h2.line:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #ebb200;
	left: -5px;
	bottom: -3px;
	width: 150px;
}

h2.box {
	position : relative;
	border : 1px solid #e8e8e8;
	border-radius : 4px;
	background-color : #ffffff;
	padding : 10px 10px 10px 22px;

	background : #fdfdfd;
	background : -moz-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #efefef));
	background : -webkit-linear-gradient(top,  #fdfdfd 0%, #efefef 100%);
	background : -o-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
	background : -ms-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
	background : linear-gradient(to bottom, #fdfdfd 0%, #efefef 100%);
	filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#efefef', GradientType=0 );

	font-weight : bold;
	font-size : 20px;
	line-height : 20px;
	letter-spacing : 4px;
	color : #766c60;
}
h2.box:after {
	content : '';
	position : absolute;
	top : 5px;
	left : 5px;
	width : 4px;
	height : calc(100% - 10px);
	background-color : #f1b92a;
	border-radius : 4px;
}

h3.accent {
	position : relative;
	padding : 3px 0 0 24px;
	height: 27px;
	font-weight : bold;
	font-size : 23px;
	line-height : 23px;
	letter-spacing : 1px;
	margin-top:10px;
	margin-bottom:10px;
}
h3.accent:after {
	content : '';
	position : absolute;
	top : 0;
	left : 0;
	width : 10px;
	height : 100%;
	background-color : #f1b92a;
}
h4 {
	font-weight : bold;
	font-size : 20px;
	line-height : 20px;
	color: #3e893c;
}

/* ---- header -------- */

#header {
	width: 900px;
	height: 110px;
	border-bottom: solid 1px #CCC;;
	margin-bottom: 20px;
}

#header h1 {
	float:left;
}

#header p {
	padding-top:48px;
	float:right;
}

#header div {
	display:none;
}

/* ---- maincontents -------- */
#maincontents {
	width:630px;
	float:left;
}

/* ---- subcontents -------- */

#subcontents {
	width:250px;
	padding-left:20px;
	float:right;
}

#sidemenu {
	border: solid 1px #999;
	margin-bottom: 10px;
}
#sidemenu div {
	border: solid 1px #FFF;
	background-color: #83c1fd;
	padding:10px;
}
#sidemenu div ul {
	box-shadow:2px 2px 3px 2px rgba(102,102,102,0.3);
	-webkit-box-shadow:2px 2px 3px 2px rgba(102,102,102,0.3);
	-moz-box-shadow:2px 2px 3px 2px rgba(102,102,102,0.3);
}
#sidemenu div ul li {
	border-top: solid 1px #999;
	border-left: solid 1px #999;
	border-right: solid 1px #999;
	list-style-type:none;
}
#sidemenu div ul li a {
	display: block;
	border-top: solid 1px #FFF;
	border-left: solid 1px #FFF;
	border-right: solid 1px #FFF;
	background-color: #F0F0F0;
	padding: 3px;
}
#sidemenu div ul li a img {
	vertical-align: middle;
	margin: 0 10px 0 5px;
}
#sidemenu div ul li a:link {
	color:#000;
}
#sidemenu div ul li a:visited {
	color:#000;
}
#sidemenu div ul li a:hover {
	color: #999;
	text-decoration: none;
	background-color: #FDFDFD;
}
#sidemenu div ul li s {
	display: block;
	border-top: solid 1px #E0E0E0;
	border-left: solid 1px #E0E0E0;
	border-right: solid 1px #E0E0E0;
	background-color: #A0A0A0;
	color:#D0D0D0;
	padding: 3px;
	text-decoration:none;
	cursor: default;
}
#sidemenu div ul li s img {
	vertical-align: middle;
	margin: 0 10px 0 5px;
}

/* ---- footer -------- */

#footer {
	width: 900px;
	height:60px;
	margin: 0 auto;
	padding:10px 20px 0 20px;
	position:relative;
	font-size:85%;
	text-align: right;
	background-color:#726A63;
	clear:both;
}
#footer .copyright {
	text-align:right;
	width:510px;
	position:absolute;
	top:10px;
	font-size:12px;
	right:20px;
	color:#FFFFFF;
}

/* ---- top -------- */

.topics {
	padding: 5px;
	font-size: 15px;
}
.topics dt {
	color: #12AC5F;
	float: left;
	width: 7.5em;
	padding-left: 20px;
	background-image: url(../images/arr_topics.gif);
	background-repeat: no-repeat;
	background-position: 0 center;
	font-weight: bold;
}

.topics dd {
	padding: 0 0 3px 9em;
	margin: 0 5px 5px 0;
	border-bottom: solid 1px #CCC;
}
.topics dd:last-child {
	border-bottom: none;
}

#top_info {
	border: solid 1px #cdcdcd;
	background-color:#f0f0f0;
	padding:10px;
	margin-top:20px;
	margin-bottom:10px;
}
#top_info img {
	display: block;
	float:left;
	border: solid 1px #cdcdcd;
}
#top_info p {
	display: block;
	float:left;
	padding-top:30px;
	padding-left:4px;
	color:#676767;
}
#top_info strong {
	font-size:18px;
}

#top_info dl {
	display: block;
	float:left;
	border-right: solid 1px #cdcdcd;
	border-bottom: solid 1px #cdcdcd;
	width:calc( 50% - 1px );
}
#top_info dt {
	font-size: 13px;
	font-weight: bold;
	padding-left:5px;
	display: block;
	float:left;
	clear:left;
	color: #FFF;
	background-color: #4EA370;
	border-top: solid 1px #cdcdcd;
	border-left: solid 1px #cdcdcd;
	width : calc( 70% - 6px );
}
#top_info dd {
	font-size: 13px;
	padding-right:5px;
	display: block;
	float:left;
	text-align:right;
	background-color: #FFFFFF;
	border-top: solid 1px #cdcdcd;
	border-left: solid 1px #cdcdcd;
	width : calc( 30% - 6px );
}
#top_info .name {
	margin-bottom:4px;
}
#top_info .data {
}

/* ---- input -------- */

#input dt {
	display: block;
	float:left;
	clear:left;
	padding-left:5px;
	padding-right:5px;
}
#input dd {
	display: block;
	float:left;
}
#input dl.date > dt {
	border-left: solid 5px #f1b92a;
	font-size: 20px;
	padding-left:10px;
	width:100px;
}
#input dl.date > span {
	font-size: 16px;
}
#input dl.date {
	padding-top:10px;
	padding-bottom:10px;
}
#input dl.sub dt {
	color: #12AC5F;
	font-weight: bold;
	font-size: 15px;
}
#input dl.sub {
	padding-bottom:5px;
}

#input input[type=text] {
	font-size:22px;
	width:100px;
}
#input textarea {
	resize: none;
	font-size:16px;
	width:450px;
	height:3em;
}
#input input[type=submit] {
	width:200px;
	height:40px;
}
#input .button1 {
	padding-top:20px;
	padding-bottom:20px;
	text-align:right;
}
#input .button1 input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}
#input .button2 {
	padding-top:10px;
	padding-bottom:20px;
	text-align:left;
}
#input .button2 input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}
#input .text {
	display: block;
	padding-left:5px;
	padding-top:20px;
	padding-bottom:10px;
}
/* ---- input_select -------- */
#input_select table {
	border-right: solid 1px #cdcdcd;
	border-bottom: solid 1px #cdcdcd;
}
#input_select th {
	background-color: #50a470;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
	padding: 3px 0;
}
#input_select td {
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
}

#input_select .button {
	padding-top:10px;
	padding-bottom:20px;
	text-align:center;
}
#input_select .button input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}
#input_select .date {
	font-size:14px;
	width:80px;
	padding:4px 0 4px 6px;
}
#input_select .walk {
	width:80px;
	text-align:center;
}
#input_select .memo {
	width:400px;
	text-align:center;
}
#input_select .delete {
	width:50px;
	text-align:center;
}
#input_select .holiday {
	color:#cd3300;
}
#input_select .walk input {
	font-size:16px;
	text-align:right;
	width:60px;
}
#input_select .memo input {
	font-size:16px;
	width:380px;
}
#input_select .delete a {
	font-size:12px;
	cursor:pointer;
}

/* ---- data -------- */

#data li {
	list-style-type:none;
	float:left;
}
#data li a {
	width:308px;
	height:30px;
}
#data table {
	border-right: solid 1px #cdcdcd;
	border-bottom: solid 1px #cdcdcd;
	width:620px;
	margin-bottom: 20px;
}
#tab1 th {
	background-color: #50a470;
}
#tab2 th {
	background-color: #704ea5;
}
#tab2 {
	display:none;
}
#data th {
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
	padding: 3px 0;
}
#data td {
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
}

#data .button input {
	width:120px;
	height:24px;
	font-size:14px;
	letter-spacing:1px;
}
#data .button select {
	width:120px;
	font-size:14px;
	height:24px;
}
#data .button {
	text-align:right;
	padding:10px;
}
#data .date {
	font-size:14px;
	width:80px;
	padding:4px 6px 4px 0;
	background-color: #e0f1f1;
	text-align:right;
}
#data .sun {
	color:#ff8989;
}
#data .sat {
	color:#8788ff;
}
#data .walk {
	width:100px;
	text-align:center;
}
#data .memo {
	width:435px;
	text-align:left;
}
#data .graph {
	width:435px;
	text-align:left;
}

#data .gray {
	background-color: #f0f0f0;
}

/* ---- ranking -------- */

#ranking dl {
	display: block;
	width: 49%;
	float: left;
	padding-top: 15px;
}
#ranking dt {
	display: block;
	padding-left:20px;

	font-weight: bold;
	color : #766c60;
}
#ranking dt:before {
	content: '■';
	margin-left:-1em;
	margin-right:0.5em;
	color: #309100;
	font-size:11px;
	line-height:11px;
	text-shadow: 2px 2px 0 #a1c800;
}
#ranking dd {
	display: block;
	padding-left:30px;
	padding-top:4px;
	margin-bottom:4px;
}
#ranking dd input[type=text] {
	font-size:16px;
	text-align:left;
	width:250px;
}

#ranking table {
	border-right: solid 1px #cdcdcd;
	border-bottom: solid 1px #cdcdcd;
	margin-bottom: 25px;
}
#ranking th {
	background-color: #50a470;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
	padding: 3px 0;
}
#ranking td {
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
}
#ranking b.myrank {
	color:#cd3360;
}
#ranking tr.myrank {
	background-color: #cde5eb;
}
#ranking .number {
	width: 100px;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
}
#ranking .name {
	width:380px;
	text-align:left;
	padding-left:10px;
}
#ranking .score {
	width:110px;
	text-align:right;
	padding-right:10px;
}
#ranking .button1 {
	clear:left;
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
}
#ranking .button1 input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}

/* ---- group -------- */
#group table {
	margin-left: 20px;
	width:600px;
	border-right: solid 1px #cdcdcd;
	border-bottom: solid 1px #cdcdcd;
}
#group th {
	background-color: #50a470;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
	padding: 3px 0;
}
#group td {
	padding:5px;
	border-left: solid 1px #cdcdcd;
	border-top: solid 1px #cdcdcd;
	vertical-align: middle;
}
#group .td_entry {
	width: 40px;
	text-align:center;
}
#group .td_remove {
	width: 140px;
	text-align:center;
}
#group input[type=text] {
	font-size:22px;
	width:300px;
}
#group textarea {
	resize: none;
	font-size:16px;
	width:450px;
	height:3em;
}
#group input[type=submit] {
	width:200px;
	height:40px;
}
#group .button1 {
	padding-top:0px;
	padding-bottom:10px;
	text-align:right;
}
#group .button1 input {
	width:200px;
	height:30px;
	font-size:16px;
	letter-spacing:1px;
}
#group .button2 {
	padding-top:15px;
	padding-bottom:0px;
	text-align:left;
}
#group .button2 a {
	width:300px;
	height:35px;
	font-size:18px;
	letter-spacing:1px;
}
#group .button3 {
	padding-top:15px;
	padding-bottom:0px;
	text-align:left;
}
#group .button3 a {
	width:300px;
	height:35px;
	font-size:18px;
	letter-spacing:1px;
}
/* ---- trivia -------- */

#trivia img {
	width:100%;
	max-width: 100%;
	height: auto;
}
/* ---- help -------- */

#help {
	font-size:15px;
	line-height:24px;
}
#help .faq {
	padding-left:20px;
}
#help .faq dt {
	padding-left:20px;
}
#help .faq dd {
	padding-left:30px;
}
#help .faq h4 {
	font-size:16px;
}
#help img {
	float:right;
}
#help h3, #help h4 {
	clear:right;
	margin-top:20px;
}
#help .korekara {
	padding-top: 20px;
	padding-bottom: 30px;
	font-weight : bold;
	font-size : 20px;
	line-height : 20px;
	color: #3e893c;
}

/* ---- setting -------- */
#setting input[type=text] {
	font-size:14px;
	padding: 2px 0 2px 6px;
	border: 1px solid #C6C9AC;
}
#setting {
	font-size:15px;
	line-height:24px;
}
#setting .text {
	padding-top:20px;
}
#setting dl {
	padding-top:20px;
	margin: auto;
}
#setting dt {
	display: block;
	padding-left:20px;

	font-weight: bold;
	color : #766c60;
}
#setting dt:before {
	content: '■';
	margin-left:-1em;
	margin-right:0.5em;
	color: #309100;
	font-size:11px;
	line-height:11px;
	text-shadow: 2px 2px 0 #a1c800;
}
#setting dd {
	display: block;
	padding-left:10px;
	padding-top:4px;
	margin-bottom:4px;
}
#setting .nickname dt {
	padding-top:5px;
	padding-bottom:5px;
	margin-left:5px;
	width:218px;
	background-color: #f1f2e8;
	display: block;
	float:left;
}
#setting .nickname dd {
	padding-top:5px;
	padding-bottom:5px;
	display: block;
	float:left;
}
#setting .nickname dd:last-child {
	padding-top:0;
	width:500px;
}
#setting .nickname input {
	width:300px;
}
#setting ul {
	padding-top:5px;
	padding-bottom:5px;
}
#setting li {
	display: block;
	float:left;
	text-align:center;
	width:25%;
}
#setting li img {
	display: block;
	margin:auto;
}
#setting .target_walk input {
	width:100px;
}
#setting .button {
	text-align:center;
	padding-bottom:20px;
}
#setting .button input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}
#setting .button2 {
}
#setting .button2 form {
	width:250px;
	float:left;
	text-align:right;
	padding-bottom:20px;
}
#setting .button2 input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}

#message {
	padding-bottom:20px;
}

#message .button input {
	width:176px;
	height:40px;
	font-size:20px;
	letter-spacing:1px;
}
#message textarea {
	width: 600px;
}

/* ---- session_error -------- */

#session_error p {
	padding-top:1em;
}
#session_error ul {
	padding-left:2em;
	padding-top:1em;
}
#session_error div {
	padding-top:1em;
	text-align:right;
}

/* ---- message -------- */

#message .message {
	padding-top:1em;
	padding-bottom:1em;
	font-size: 22px;
	text-align:center;
}
#message .button {
	text-align:center;
}
#message .button a {
	width:200px;
	height:35px;
	font-size:18px;
	letter-spacing:1px;
}