@charset "Shift_JIS";

/*
*	Title	: mocha
*	Version	: 1.0
*	URI	: http://spky.org/
*
*	Index:
*
*	1. Settings
*	2. Elements
*	3. Hypertext
*	4. Context
*	5. Layout
*/

/*==========================================

	1. Settings

===========================================*/

*{
	margin: 0;
	padding: 0; }

body{
	background: url("mocha_img/bodyBg.gif") repeat-x 0% 0% #dbd6c4;
	color: #555;
	font-size: 13px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	line-height: 1.5; }

p{
	margin: 0 0 0.5em; }

br{
	letter-spacing: normal; }

hr{
	display: none; }

/*==========================================

	2. Elements

===========================================*/

/*------------------------------------------
	2-1. Inline Element
-------------------------------------------*/

em,
em *{
	font-weight: normal;
	font-style: normal;
	color: #514733; }

strong,
strong *{
	font-weight: bold;
	color: #514733; }

ins{
	text-decoration: underline; }

del{
	text-decoration: line-through;
	color: #888; }

q{
	background: #9d9182;
	padding: 0 0.1em; }

cite{
	font-style: oblique; }

code,
samp{
	font-family: monospace; }

kbd{
	color: #000;
	font-weight: bold;
	font-family: monospace; }

var{
	font-style: normal; }

dfn{
	padding: 0 1em;
	font-style: normal; }

abbr,
acronym{
	border-bottom: dotted 1px #eee;
	cursor: help; }

img{
	border: none;
	vertical-align: bottom; }

/*------------------------------------------
	2-2. Block Element
-------------------------------------------*/

blockquote{
	background: #9d9182;
	margin: 10px 0;
	padding: 10px 15px 5px; }

	blockquote[title]:before {
		content: attr(title);
		display: block;
		background: url("mocha_img/line.gif") repeat;
		margin: 0 0 0.5em;
		padding: 0 0.5em;
		font-style: oblique;
		text-align: right; }

	blockquote p{
		margin: 0 0 5px; }

pre{
	width:95%;
	overflow:scroll;
	margin: 10px auto;
	padding: 10px 15px;
	background: #9d9182;
	border: solid 1px #b8b4a0;
	color: #d1cec2; }

	html>/**/body pre{
		width:auto;
		overflow:auto; }

address{
	}

/*------------------------------------------
	2-3. List Element
-------------------------------------------*/

ol{
	list-style: decimal outside;
	margin: 10px 2.5em; }

ol li,
li ol li{
	list-style-type: decimal; }

ul{
	list-style: circle outside;
	margin: 10px 2.5em; }

ul li,
li ul li{
	list-style-type: ciecle; }

dl{
	list-style-position: inside;
	margin: 10px 0; }

dl dt{
	font-weight: bold; }

dl dd{
	margin: 0 0 0 1em; }

/*------------------------------------------
	2-4. Form
-------------------------------------------*/

form{
	}

fieldset{
	border: none; }

legend{
	font-size: 107%;
	font-weight: bold; }

label{
	font-size: 100%; }

input,
textarea,
select{
	background: #d1cec2;
	border: solid 1px #999;
	vertical-align: middle;
	margin: 0 0 0.2em;
	font-size: 100%;
	font-family: Tahoma, Verdana, "ＭＳ Ｐゴシック", sans-serif; }

	input#BUTTON{
		padding: 0 10px;
		background: #c4dae5;
		color: #fff;
		border: none;
		cursor: pointer; }

option,
optgroup,
optgroup option{
	font-family: Tahoma, Verdana, "ＭＳ Ｐゴシック", sans-serif; }

	optgroup{
		background: #a3998c;
		font-weight: normal; }

	optgroup option{
		background: #d1cec2;
		margin: 0;
		padding: 0 0 0 1em;
		font-weight: normal; }

/*------------------------------------------
	2-5. Tables
-------------------------------------------*/

table{
	font-size: 100%;
	border-collapse: separate;
	border: solid 1px #8b8070; }

table tr th{
	font-weight: bold;
	padding: 0.1em 0.5em;
	border: solid 1px #8b8070;
	background: url("mocha_img/line.gif") repeat #8b8070; }

table tr td{
	padding: 0 0.5em;
	border: solid 1px #8b8070; }

caption{
	text-align: center; }

/*==========================================

	3. Hypertext

===========================================*/

a{
	font: inherit; }

a:link{
	color: #c4dae5; }

a:visited{
	color: #c4dae5; }

a:hover,
a:active,
a:focus{
	color: #deea80; }

/*==========================================

	4. Context

===========================================*/

h1{
	font-size: 167%;
	color: #565656;
	padding: 30px 20px 0; }

h2{
	font-size: 167%;
	color: #a3998c;
	margin: 0 0 0.5em; }

h3{
	font-size: 122%;
	margin: 1em 0;
	padding: 1em 0 0 1em;
	background: url("mocha_img/h3.gif") repeat-y 0% 0%; }

h4{
	font-size: 107%;
	margin: 0.5em 0;
	padding: 0 0.5em;
	background: url("mocha_img/h4.gif") repeat; }

h5{
	font-size: 100%; }

h6{
	font-size: 100%; }

/*==========================================

	5. Layout

===========================================*/

/*------------------------------------------
	5-1. div#PAGETOP
-------------------------------------------*/

#PAGETOP{
	width: 720px; 
	margin: 0 auto;
	text-align: left;
	position: relative; }

/*------------------------------------------
	5-2. div#HEADER
-------------------------------------------*/

#HEADER{
	height: 250px;
	background: url("mocha_img/headerIMG.gif") no-repeat 15px 100%; }

	#HEADER h1{
		}

	ul#PAN{
		list-style: none outside;
		margin: 0 20px; }

	ul#PAN li{
		list-style-type: none;
		display: inline;
		font-size: 92%; }

	ul#PAN li a{
		background: url("mocha_img/pan.gif") no-repeat 100% 50%;
		padding: 0 9px 0 0; }

/*------------------------------------------
	5-3. div#MENU
-------------------------------------------*/

#MENU{
	}

	#MENU h2{
		display: none; }

	#MENU ul{
		list-style: none outside;
		margin: 0;
		text-align: right;
		position: absolute;
		top: 40px;
		right: 20px; }

	#MENU ul li{
		list-style-type: none; }

		#MENU a{
			font-size: 122%;
			text-decoration: none; }

		#MENU ul li.menu-on a:link,
		#MENU ul li.menu-on a:visited{
			color: #deea80; }

#ADSENSE{
	text-align: center;
}

/*------------------------------------------
	5-4. div#KIZI
-------------------------------------------*/
		
#KIZI{
	margin: 0 20px;
	padding: 20px 0 0; }

	#KIZI .text{
		background: url("mocha_img/textBg.gif") no-repeat 50% 100% #a3998c;
		border-top: solid 1px #8b8070;
		margin: 0 0 15px;
		padding: 20px 30px; }

	ul.modori{
		list-style: none outside;
		margin: 0 -15px;
		text-align: right; }

	ul.modori li{
		list-style-type: none; }

		ul.modori li a{
			text-decoration: none; }


#INFO{
	text-align: center;
}

#INFO a:link { color: #a3998c; } 
#INFO a:visited { color: #a3998c; } 
#INFO a:hover { color: #a3998c; } 
#INFO a:active { color: #a3998c; }
 
/*------------------------------------------
	5-5. div#FOOTER
-------------------------------------------*/

#FOOTER{
	background: url("mocha_img/footerBg.gif") no-repeat 50% 0% #8b8070;
	margin: 0 20px;
	padding: 5px 15px; }

	#FOOTER h2{
		display: none; }

	#FOOTER ul{
		list-style: none outside;
		margin: 0;
		padding: 0.5em;
		text-align: center; }

	#FOOTER ul li{
		list-style-type: none;
		display: inline;
		margin: 0 0.5em;}

	#FOOTER ul li address{
		display: inline;
		font-style: normal; }

	#FOOTER ul li a{
		text-decoration: none; }
		
	#FOOTER a:link { color: #a3998c; } 
	#FOOTER a:visited { color: #a3998c; } 
	#FOOTER a:hover { color: #a3998c; } 
	#FOOTER a:active { color: #a3998c; }

/* 編集しないでください */

* html h3,
* html h4,
* html #FOOTER,
* html blockquote {
	height: 1%; }