@charset "utf-8";

/*=================
全般的なスタイル
===================*/

*{
	margin:0; padding:0;	
}
body{
	background-color:#cccccc;	
	background-image:url("images/bg_page.png");
	background-size: cover;
	font-size:95%;		
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height:1.5;	
	color:#333333;		
}
div#pagebody{
	width:1000px; margin:0px auto;		
	background-color:#ffffff;		
	background-image:url("images/bg_pagebody.png");
	background-repeat:repeat-y;					  
}

img{
	border:0;
}						

p{
	width:660px;		
	margin:5px;		
	text-indent:1em;	
}

hr {
	clear:both;		
	width:680px;		
	margin:10px 0px;		
	border:1px dotted #cccccc;	
}

/*===============
ヘッダ
=================*/
div#header{
	height:80px;				
}
div#header h1{
	padding:10px 0px 5px 20px;		
}
div#header  img{
	width:420px;height:60px;
	}	

/*===============
メインメニュー
=================*/
ul#menu{
	width:960px; height:50px;	
	margin:0px 20px;			
}
#menu li{
	list-style-type:none;	
	display:inline;			
	float:left;				
}
#menu li a{
	background-color:navy;	
	color:white;			
	display:block;			
	width:240px;height:35px; 
	padding:15px 0px 0px 0px;
	text-align:center;		
	text-decoration:none;	
	background-image:url(images/bg_menu1.png);		
	background-repeat:no-repeat;								
}
#menu li a:hover{
	background-color:#000066;
	background-image:url(images/menu.png);		
}

div.info_message {padding: 10px 10px;}

.infoimg_img{
	display:block;				
	width:80%; height:40%;	
	margin:0px 0px 20px 0px;	
	float:none;			
}
/*===============
ヘッダ画像
=================*/
#img_index{
	width:960px;height:360px;		
	margin: 0px auto;
	padding:0px;

}
#img_subpage{
	width:960px;height:240px;	
	margin:5px 15px;			
}
/*===============
サブメニュー（左カラム）
=================*/
div #submenu h2 {
	width:160px; height:43px;
	padding:17px 0px 0px 100px;
	font-size:16px;
	background-image:url(images/bg_h2.png);
	background-repeat:no-repeat;	
	background-color:#000033;
	color:#ffffff;
}

div#submenu{
	width:260px;
	margin:10px 10px 25px;
	float:left;
}
div#submenu ul li{
	list-style-type:none;	
}
div#submenu ul li a{
	display:block;						
	height:45px;						
	padding:15px 0px 0px 30px;			
	text-decoration:none;				
	border-bottom:1px dotted gray;	
	background-image:url(images/bg_submenu.png);
	background-repeat:no-repeat;		
	color:#333333;						
}
div#submenu ul li:first-child a {
	border-top:1px dotted gray;		
}
div#submenu ul li a:hover{
	text-decoration:underline;		
}
div#submenu ul li a:before {
	content: url("images/icon_submenu.png");	
	margin:0px 10px 0px 0px;		
	vertical-align:text-top;			
}

.invisibleFrame {
	padding:25px 0px 0px 0px;
}
/*===============
インフォメーション（右カラム）
=================*/
div#info{
	width:660px;			
	float:left;		
	padding:10px 20px 0px 0px;
}
h3{
	font-size:14px;			
	width:660px;			
	padding:10px 0px 10px 20px;		
	background-color:#003399;		
	color:#ffffff;					/*文字色*/
	border-radius:3px;				/*角丸にする*/
}
.infoimg_index{
	width:200px;height:150px;		
	margin:5px 20px 20px;			
	float:left;					
}

hr{
	clear:both;						/*フロート配置をクリアする*/
}
.dex{
	font-size: 22px;
	color: red;
}
/*===============
フッタ
=================*/
div#footer{
	clear:both;						
	height:40px;					
	padding:10px 0px 0px 0px;		
	font-size:x-small;				
	text-align:center;				
}

/*===============
フッタ
=================*/
div#mail{
	padding:10px 0px 10px 20px;		

}

/*===============
ボタン
=================*/
.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}
.btn:hover {
  opacity: 1;
}

.coment{
  padding: 15px 30px;
  background-color: #3c58e6;
  cursor: pointer;
  box-shadow: 0 7px #1e2b6e;	
}
.coment:active{
  box-shadow:none;
  position:relative;
  top:7px;
}