body {
	color: #333333;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	max-width: 800px;
	height: auto;
	background-image: url(image/bg.gif);
	background-repeat: repeat-y;
	background-position: top center;
	border-top:solid  #008DD5 5px ;

}

.haba {
	border: 0; 
	width:100%;
}

.haba02 {
	border: 0; 
}
@media screen and (min-width: 100px) and (max-width: 600px) {
.haba02 {
	width:100%;
	margin: 10px 0px 10px 0px;

}
}

.haba03 {
	border: 0; 
}
@media screen and (min-width: 100px) and (max-width: 500px) {
.haba03 {
	width:60%;
	margin: 10px 0px 10px 0px;

}
}


.haba04 {
	border: 0; 
	margin: 0px 20px 0px 20px;
	width:250px;
}
@media screen and  (max-width: 500px) {
.haba04 {
	border: 0; 
	width:100%;
	margin: 10px 0px 10px 0px;

}
}



/**************　　全体枠　*********************/

#baseframe {
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 5px 0px 0px 0px;
	background-color: #ffffff;

}

a:link {
	color: #503010;
	text-decoration: none;
}

a:visited {
	color: #503010;
	text-decoration: none;
}

a:hover {
	color: #1010f0;
	text-decoration: underline;
}

a:active {
	color: #2B3060;
	text-decoration: none;
}


/********　　ヘッダー説明　**************/
#intro {
	font-size: 10pt;
	margin: 0px 0px 0px 0px;
	padding: 5px 10px 0px 10px;
	color:#888888;
	line-height:120%;
	text-align:left;
	background-color: #ffffff;
}

#intro a:link {
	color: #333333;
	text-decoration: none;
}

#intro a:visited {
	color: #333333;
	text-decoration: none;
}

#intro a:hover {
	color: #f0f010;
	text-decoration: none;

}

#intro a:active {
	color: #f03333;
	text-decoration: none;
}

/********　　メイン　**************/
#main {
	font-size: 12pt;
	line-height:150%;
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding: 5px 20px 10px 20px;
	background-color: #ffffff;
	height: 130%;
	clear:both;
	color:	#333333;
	border-bottom:solid #d6e7ff 0px ;
	border-left:solid #d6e7ff 0px ;
	border-right:solid #d6e7ff 0px ;
	border-top:solid #d6e7ff 0px ;
}
@media screen and (min-width: 100px) and (max-width: 550px) {
#main {
	width:93%;
	padding: 5px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
}
}


#main a:link {
	color: #ffffff;
	text-decoration: none;
}

#main a:visited {
	color: #ffffff;
	text-decoration: none;
}

#main a:hover {
	color: #B6480B;
	text-decoration: underline;
}

#main a:active {
	color: #f03333;
	text-decoration: none;
}



h1 {
	padding: 3px 0px 0px 0px;
	margin: 0px;
	font-size: 10pt;
}


h2 {
	color: #000000;
	font-size: 18px;
	margin: 15px 5px 15px 0px;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 20px;
	border-bottom:solid #555555 1px ;
	border-left:solid #008DD5 15px ;
	border-right:solid #EADDB5 0px ;
	border-top:solid #EADDB5 0px ;
}


h3 {
	color: #000000;
	font-size: 16px;
	margin: 15px 5px 15px 0px;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 20px;
	border-bottom:solid #555555 1px ;
	border-left:solid #555555 0px ;
	border-right:solid #EADDB5 0px ;
	border-top:solid #EADDB5 0px ;
}


h4 {
	color: #000000;
	font-size: 16px;
	margin: 15px 5px 0px 0px;
	padding: 10px 0px  0px 0px;
}

/********　　右サイド　**************/

#contents {
	font-size: 11pt;
	line-height:140%;
	width: 520px;
	height: auto;
	padding: 0px 5px 0px 5px;
	margin: 0px 5px 0px 5px;
	color:#503010;

}




/********　　見出し　**************/

.subheader  {
	font-weight: bold;
	font-size:  16pt;
	line-height:140%;
	color: #555555;

	text-decoration: none;
	margin : 3px 3px 10px 3px;
	padding: 3px 3px 3px 5px;
	border-bottom:solid #cccccc 1px ;
	border-left:solid #008DD5 10px ;
	border-right:dotted #80a050 0px ;

}




#categ01 {
	float:left;
	margin : 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#categ01 a:link {
	background-image: url(image/menu01a.gif);
}
#categ01 a:visited {
	background-image: url(image/menu01a.gif);
}
#categ01 a:hover {
	background-image: url(image/menu01b.gif);
}
#categ01 a:active {
	background-image: url(image/menu01b.gif);
}

#categ02 {
	float:left;
	margin : 0px 0px 0px 1px;
	padding: 0px 0px 0px 0px;
}
#categ02  a:link {
	background-image: url(image/menu02a.gif);
}
#categ02  a:visited {
	background-image: url(image/menu02a.gif);
}
#categ02  a:hover {
	background-image: url(image/menu02b.gif);
}
#categ02 a:active {
	background-image: url(image/menu02b.gif);
}


#categ03 {
	float:left;
	margin : 0px 0px 0px 1px;
	padding: 0px 0px 0px 0px;
}
#categ03  a:link {
	background-image: url(image/menu03a.gif);
}
#categ03  a:visited {
	background-image: url(image/menu03a.gif);
}
#categ03  a:hover {
	background-image: url(image/menu03b.gif);
}
#categ03 a:active {
	background-image: url(image/menu03b.gif);
}


#categ04 {
	float:left;
	margin : 0px 0px 0px 1px;
	padding: 0px 0px 0px 0px;
}
#categ04  a:link {
	background-image: url(image/menu04a.gif);
}
#categ04  a:visited {
	background-image: url(image/menu04a.gif);
}
#categ04  a:hover {
	background-image: url(image/menu04b.gif);
}
#categ04 a:active {
	background-image: url(image/menu04b.gif);
}



/********　　スマホメニュー　************/

#sma-menu {
	background-color: #fff;
	padding: 5px 0px 0px 0px;
}

#menu01  {
	float: left;
	color:#000000;
	font-size: 10pt;
	display: block;
	text-align: center;
	background-color: #ffdc75;
	line-height:300%;
	text-indent: 0px;
	text-decoration: none;
	width:142px;
	margin : 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-top:0px #dddddd solid;
	border-left:1px #dddddd solid;
	border-right:0px #dddddd solid;
	border-bottom:0px #cccccc solid;
}


@media screen and (min-width: 100px) and (max-width: 550px) {
#menu01 {
	width:100%;
	padding: 0px 0px 0px 0px;
	margin : 1px 0px 0px 0px;
}
}
@media screen and (min-width: 550px) {
#sma-menu {
	display:none;
}
}

@media screen and (min-width: 100px) and (max-width: 550px) {
#sma-menu {
	width:100%;
	padding: 0px 0px 0px 0px;
	margin : 10px 0px 0px 0px;
}
#left-con {
	display:none;
}
}

#menu01 a {
	display: block;
}
#menu01 a:link {
	color:#fff;
	background-color: #008DD5;
	text-decoration: none;
}

#menu01 a:visited {
	color:#fff;
	background-color:#008DD5;
	text-decoration: none;
}

#menu01 a:hover {
	color:#fff;
	background-color: #4AB3E7;
	text-decoration: none;
}

#menu01 a:active {
	text-decoration: none;
}




/********　　　************/

#left-con {
	font-size: 10pt;
	line-height:120%;
	color: #805050;
	height:50px;
	padding: 0px 0px 2px 0px;
	margin: 0px 0px 0px 0px;
	border-bottom:solid #eeeeee 0px ;
	background-color: #00a0c0;
}
#left-con  a:link {
	display: block;
	color: #805050;
	text-decoration: none;
}

#left-con  a:visited {
	display: block;
	color: #805050;
	text-decoration: none;
}

#left-con  a:hover {
	display: block;
	color: #702030;
	background-color: #ffe0f0;
	text-decoration: none;
}

#left-con a:active {
	display: block;
	color: #805050;
	text-decoration: none;
}


#footerfooter {
	font-size: 13px;
	background-color: #008DD5;
	text-align: center;
	padding: 15px 0px  10px 0px;
	margin: 10px 0px 0px 0px;
	color: #ffffff;
}


#footerfooter a {
	color: #ffffff;
}


#footerfooter a:link{
	color: #ffffff;
}

#footerfooter a:visited{
	color: #ffffff;
}

#footerfooter  a:hover{
	color: #ffffff;
}




#footer2 {
	font-size: 14px;
	text-align: center;
	padding: 20px 0px 0px 0px;
	color: #333333;
	border-top:solid #cccccc 1px ;
}


#footer2 a {
	color: #555555;
}


#footer2 a:link{
	color: #555555;
}

#footer2 a:visited{
	color: #555555;
}

#footer2  a:hover{
	color: #555555;
}
 



#m-p {
	background-color: #ffe0e0;
	border-bottom:dotted #f03030 3px 
}


#m-y {
	background-color: #ffff00;
}


#box01 {
	font-size:  11pt;
	line-height:140%;
	padding: 10px 20px 10px 20px;
	margin: 10px 20px 10px 20px;
	background-color: #e0f0ff;
}

#setumei {
	font-size:  11pt;
	color: #555555;
	line-height:130%;
	padding: 10px 10px 10px 10px;
	margin: 0px 10px 0px 10px;
	background-color: #f0f0f0;
}


#setumei a:link {
	color: #f0f0f0;
	text-decoration: none;
}

#setumei a:visited {
	color: #f0f0f0;
	text-decoration: none;
}

#setumei a:hover {
	color: #a39184;
	text-decoration: none;
}

#setumei a:active {
	color: #f0f0f0;
	text-decoration: none;
}





#otamesi {
	font-size:  14pt;
	color: #333333;
	line-height:130%;
	text-align: center;
	padding: 10px 10px 10px 10px;
	margin: 0px 0px 0px 0px;
}

#bb {
	font-size:  18pt;
	color: #333333;
	text-align: center;
	background-color: #ffffff;
	line-height:130%;
	padding: 20px 10px 20px 10px;
	margin: 10px 10px 30px 10px;
	border: #008DD5 8px solid;
}


#ll {
	font-size:  20pt;
	color: #000000;
	line-height:130%;
	padding: 20px 20px 20px 20px;
	margin: 0px 0px 0px 0px;
	text-align:center;

}

#box01 {
	font-size:  12pt;
	color: #ffffff;
	line-height:130%;
	padding: 20px 20px 20px 20px;
	margin: 20px 20px 20px 20px;
	background-color: #937F64;

}


#kakaku {
	font-size:  18pt;
	color: #ff0000;
	line-height:130%;
}

#aka {
	font-size:  12pt;
	font-weight:bold;
	color: #ff0000;
	line-height:130%;
}
#rinen {
	font-size:  14pt;
	font-weight:bold;
	color: #008dd5;
	line-height:130%;
	background-color: #f0f0f0;
}


#link {
	font-size:  10pt;
	color: #333333;
	line-height:130%;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	background-color: #f0f0f0;
}
#link a:link {
	color: #0000ff;
	text-decoration: underline;
}

#link a:visited {
	color: #0000ff;
	text-decoration: underline;
}

#link a:hover {
	color: #ff0000;
}

#link a:active {
	color: #333333;
}

#link2 {
	font-size:  11pt;
	color: #333333;
	line-height:130%;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
}
#link2 a:link {
	color: #008DD5;
	text-decoration: underline;
}

#link2 a:visited {
	color: #008DD5;
	text-decoration: underline;
}

#link2 a:hover {
	color: #ff0000;
}

#link2 a:active {
	color: #008DD5;
}

#guide {
	font-size:  12pt;
	color: #333333;
	line-height:130%;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	background-color: #f0f0f0;
	clear:both;
}
#guide a:link {
	color: #333333;
}

#guide a:visited {
	color: #333333;
}

#guide a:hover {
	color: #333333;
}

#guide a:active {
	color: #333333;
}


#streight {
	font-size:  12pt;
	color: #333333;

	padding: 0px 0px 0px 0px;
	margin: 20px 30px 0px 50px;
	text-decoration: none;
}

#streight02 {
	font-size:  12pt;
	color: #333333;
	line-height:150%;
	padding: 10px 20px 20px 20px;
	margin: 10px 0px 0px 0px;
	text-decoration: none;
	background-color: #f0f0f0;
}

#streight02 a:link {
	font-weight:bold;
	color: #008Dff;
	text-decoration: none;
}

#streight02 a:visited {
	font-weight:bold;
	color: #008Dff;
	text-decoration: none;
}

#streight02 a:hover {
	color: #ff0000;
	text-decoration: none;
}

#streight02 a:active {
	color: #008Dff;
	text-decoration: none;
}


#small {
	font-size:  10pt;
	line-height:110%;
	padding: 0px 0px 0px 0px;
	margin:  5px 0px 10px 5px;
}

#onegai {
	font-size:  14pt;
	line-height:140%;
	padding: 10px 10px 10px 10px;
	margin:  5px 0px 10px 5px;
	border:solid  #008DD5 1px ;

}
/********　種類　　*****/

#shurui {
	float: left;
	font-size:  13pt;
	line-height:120%;
	text-align: center;
	padding: 10px 10px 10px 10px;
	margin:  5px 0px 10px 0px;
}
#shurui a:link {
	color: #0000f0;
}

#shurui a:visited {
	color: #0000f0;
}

#shurui a:hover {
	color: #f00000;
}

#shurui a:active {
	color: #333333;
}
#cr-last {
	clear:both;
}

/********　豆タイトル　　*****/


#title01 {
	font-size:  18pt;
	line-height:120%;
	padding: 0px 5px 5px 5px;
	margin:  5px 0px 10px 0px;
	border-bottom: #008DD5 3px solid;
}

/********　テーブル　　*****/

td,p,div{font-size:11pt;}
.tb{ 
border:1px solid #555555; 
border-collapse:collapse; 
}
.tb td{ 
border:1px solid #555555; 
border-collapse:collapse; 
}
.btn{
border-style:solid;
border-color:#333333;
border-width:1px;
background-color:#D8D8D8;
}



/********　画像マウスオーバー時にフェードアウト　　*****/
.fade {   
    -webkit-transition: 0.1s ease-in-out;   
       -moz-transition: 0.1s ease-in-out;   
         -o-transition: 0.1s ease-in-out;   
            transition: 0.1s ease-in-out;   
}   
.fade:hover {   
    opacity: 0.8;   
    filter: alpha(opacity=80);   
}