/*******************************************/
/*******************************************/
/********* note computer *******************/
/*******************************************/


html {
 width:100%
}


body { 
color:#333333;
 }

image{ border:0pt }


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

/****** head_pc ******/

	#head{
		position:absolute;
		left:0px;
		top:0px;
		height:250px;
		width:100%;
		background-color:white
		}


	#title {
	 	position:absolute;
                left:10px;
                top:5px;
		height:50px;
		
                                }
        
        #title a { 
                  font-size:25pt;
                  text-decoration:none;
                  }
	#title img {
		height:50px;
		}

	#title2 {
		color:#0000AA;
               	font-family:sans-serif;
		font-size:11pt;
		position:absolute;
		top:28px;
		left:160px;
		}



/**** pagelist_pc ***/
#pagelist{
        position: absolute;  
	width:300px;
        background-color:#FFFFFF;
    	top:50px;
	left:5px;
        
		}


/* .menu_pc */
.menu ul{
  margin:0;
  padding:0;
}
.menu ul li {
  list-style: none;
  margin:5px 1px;
  padding:0;
  font-size:14px;
  float: left;
  position: relative;
  width: 130px;/*親メニューの幅*/
  height: 25px;/*親メニューの高さ*/
  line-height: 25px;
  background:#BBB;/*親メニューの背景色*/
  color: #000;/*親メニューの文字色*/
  text-align:center;
  font-weight:normal;
}
.menu ul li a {
  color: #000;
  display: block;
  text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
  background:#777;/*ホバー時の親メニューの背景色*/
  color:#fff;/*ホバー時の親メニューの文字色*/
 
}
.menu ul li ul {
  position: absolute;
  top: 25px;/*親メニューの高さと同じにする*/
 
  width: 0px;/*これをゼロにしたら動きよくなった拓*/
  z-index: 100;
}
.menu ul li ul li {
  visibility: hidden;
  overflow: hidden;
  width: 250px;/*サブメニューの幅*/

  height: 0;
  background:#FFF;/*サブメニューの背景色*/
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
  background:#333;/*ホバー時のサブメニューの背景色*/
  color:#FFF;
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
  visibility: visible;
  overflow: visible;
  margin:0;
  padding:0;
  font-size:13px;
  line-height:25px;
  text-align:center;
  font-weight:normal;
  height:25px;/*サブメニューの高さ*/

 left:50px;/*真下じゃなくするとどう*/

  z-index: 10;
}
.menu * {
  -webkit-transition: 0.01s;
  -moz-transition: 0.01s;
  -ms-transition: 0.01s;
  -o-transition: 0.01s;
  transition: 0.01s;
}




/**** pagelist2_pc ***/
#pagelist2 ul li{
	width:50%;
	}


/*** right_pc ***/
#right {	
        background-color:#FFF;
	width:90%;	}

	
/****** main_pc *******/
#main{
    position:absolute;
    top:10px;
    left:280px;
    background-color:#FFF;
    width:630px; 
    font-size:11pt;
    text-indent:10px;
    padding:20px;
	line-height:18px
}


#headline {
	background-color:#FFFFFF;
	border-style:solid;
         border-color:#0000AA;
	border-width:1px 2px 1px 2px;
         color:#0000AA;
         font-size:16pt;
         font-weight:bold;
         margin:20px 0px;
         padding:3px;
	line-height:23px
	}


h3 {
	background-color:#FFFFFF;
	border-style:solid;
         border-color:#0000AA;
	border-width:0px 0px 1px 7px;
         color:#0000AA;
         font-family:arial;
         font-size:13pt;
         font-weight:bold;
         margin:20px 0px;
         padding:5px;
	line-height:20px
	}


.caption{
	background-color:#FFFFFF;
	border-style:solid;
         border-color:#0000AA;
	border-width:0px 0px 1px 7px;
         color:#0000AA;
         font-family:arial;
         font-size:13pt;
         font-weight:bold;
         margin:20px 0px;
         padding:5px;
	line-height:20px
	}

#link ul li {
              width:200px;
}


/****** address_pc ******/
#address{
    position:absolute;
    width:300px;
    left:100px;
	font-style:normal;
    border-color:#FF99F4;
    border-width:1px;
    border-style:solid;
    padding:0.3em 1em

}


#searchbox {
                margin:10px 10px;
		height:100px;
		width:250px;
		font-family:sans-serif;
		font-size:10pt;
		line-height:20px;
		}



/*************/
/****************************/
/**********************************************/
/************************************************/
/*********** smart ***********************/

@media only screen and (max-width: 1000px) {

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


html {
 width:97%
}

img {
   width:97%;
}


/****** head_smart ******/

	#head{
		position:absolute;
		left:0px;
		top:0px;
		height:60px;
		width:100%;
		background-color:white
		}

	#title {
	 	position:absolute;
                left:3px;
                top:5px;
		height:50px;
                width:200px;
		
                                }
        
        #title a { 
                  font-size:25pt;
                  text-decoration:none;
                  }
	#title img {
		height:45px;
                width:130px;
		}

	#title2 {
		color:#0000AA;
               	font-family:sans-serif;
		font-size:12px;
		position:absolute;
		top:25px;
		left:150px; 
                width:150px;
		}


/**** pagelist_smart ***/
#pagelist{
	position:absolute;
	top:50px;
	left:0px;
	width:100%;
        height:540px;
        overflow:scroll;
        
	}


/*.menu_smart*/
.menu ul{
  margin:0;
  padding:0;
}
.menu ul li {
  list-style: none;
  margin:3px 1px;
  padding:0;
  font-size:14px;
  float: left;
  position: relative;
  width: 200px;/*親メニューの幅*/
  height: 25px;/*親メニューの高さ*/
  line-height: 25px;
  background:#EEE;/*親メニューの背景色*/
  color: #000;/*親メニューの文字色*/
  text-align:center;
  font-weight:normal;
}
.menu ul li a {
  color: #000;
  display: block;
  text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
  background:#777;/*ホバー時の親メニューの背景色*/
  color:#fff;/*ホバー時の親メニューの文字色*/
 
}
.menu ul li ul {
  position: absolute;
  top: 25px;/*親メニューの高さと同じにする*/
  width: 0px;/*これをゼロにしたら使いやすくなった拓*/
  z-index: 100;
}
.menu ul li ul li {
  visibility: hidden;
  overflow: hidden;
  width: 300px;/*サブメニューの幅*/
  height: 0;
  background:#FFF;/*サブメニューの背景色*/
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
  background:#333;/*ホバー時のサブメニューの背景色*/
  color:#FFF;
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
  visibility: visible;
  overflow: visible;
  margin:0;
  padding:0;
  font-size:13px;
  line-height:25px;
  text-align:left;
  font-weight:normal;
  height:25px;/*サブメニューの高さ*/


 left:0px;/*真下じゃなくするとどう*/

  z-index: 10;
}
.menu * {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/**** pagelist2_smart ***/
#pagelist2 ul li{
	width:80%;
	}



/***right_smart***/
#right {	
        background-color:#FFFFFF;
	width:100%
	}

	
/****** main_smart *******/
#main{
  	top:600px;
	left:5px;
	position:absolute;
    background-color:#FFFFFF;
    width:100%;
    font-size:14px;
    text-indent:10px;
    padding:1px;
     line-height:19px;
	color:#333333;
	
}


#headline {
	background-color:#FFFFFF;
	border-style:solid;
         border-color:#0000AA;
	border-width:1px 0px 1px 0px;
         color:#0000AA;
         font-size:16px;
         font-weight:bold;
         margin:20px 0px;
         padding:5px;
	line-height:30px;
         width: 100%;

       
	}


.caption{
	background-color:#FFFFFF;
	border-style:solid;
         border-color:#0000AA;
	border-width:0px 0px 1px 7px;
         color:#0000AA;
     
         font-size:14px;
         font-weight:bold;
         margin:20px 0px;
         padding:5px;
	line-height:18px;
        width:100%;
       
	}



#link {
   position:relative;
   left:1px;
}


/****** address_smart ******/
#address{
    position:relative;
    left:0px;
    width:230px;
    font-style:normal;
    font-size:8px;
    line-height:12px;
    border-color:#FF99F4;
    border-width:1px;
    border-style:solid;
    padding:1px 5px;

}

#searchbox {
                position:relative;
                left:0;
                margin:10px 10px;
		height:100px;
		width:250px;
		font-family:sans-serif;
		font-size:10px;
		line-height:20px;
		}

}



/*************/
/****************************/
/**********************************************/
/************************************************/
/*********** smart_320 ***********************/

@media only screen and (max-width: 320px) {

/**** pagelist_smart320 ***/
#pagelist{
	position:absolute;
	top:50px;
	left:0px;
	width:100%;
        height:1150px;
        overflow:scroll;
        
	}
/******main_smart320*******/
#main{
       position:absolute;
  	top:1210px;
	left:0px;
	
    background-color:#FFFFFF;
    width:100%;
    font-size:14px;
    text-indent:10px;
    padding:1px;
     line-height:19px;
	color:#333333;
	
}



}