@charset "utf-8";
body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background: #126896;
	margin: 0;
	padding: 0;
	color: #000;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, p {
	margin-top: 0px;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 5px;
	padding-left: 5px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}

.migi {
	text-align: right;
	font-size: 14px;
	color: #FFF;
	padding-top: 20px;
}


.hidari {
	text-align: left;
	font-size: 12px;
	color: #FFF;
	padding-top: 5px;
}


a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
	alignment-adjust: middle;
	font-size: 16px;
}
/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
.container {
	width: 996px;
	background: #FFF;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
}

/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
.header {
	background: #305376;
	background-image: url(../img/header2.png);
	height: 50px;
}

/* ~~ これはレイアウト情報です。~~ 

1) 余白は、div の上部または下部にのみ配置されます。この div 内のエレメントには、それ自体に余白があるので、ボックスモデル計算を行う必要がありません。ただし、div 自体に両側の余白やボーダーを指定した場合、その値が加算されたものが合計幅になることに注意してください。div 内のエレメントの余白を削除し、さらにその div 内に、全体のデザインに必要な幅や余白を指定していない 2 つ目の div を追加することもできます。

*/

.menu {
	height:29px;

}
	
#dropmenu{
	list-style-type: none;
	width: 996px;
	height: 29px;
	padding: 0;
	background: #264A68;
	/*border-radius: 3px 3px 0 0;*/

}
/*↑まずはメニュー全体のulの設定です。横幅を変えたいときは、この部分の横幅を変更するだけで大丈夫です。他の横幅は変更する必要ありません。高さについては、後で出てくる「#dropmenu li a」の上下のpaddingとfont-sizeの合計になります。

背景、ボーダーなどこのメニューで使っている色は、メインのカラーをひとつ選んでから0to255で提示された色を使っています。

*/

#dropmenu li{
  position: relative;
  width: 166px;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  /*border: 1px solid #E1E1E1;*/
}
/*↑今回メインメニューは6つですので166PXにしています。pxで指定しても構いませんが、パーセントで指定すると全体の大きさを変えるときに先ほどの「#dropmenu」の幅を変えるだけで済むので便利

です。

サブメニューの表示位置の基準となるため、position: relative;を指定しています。*/


#dropmenu li a{
  display: block;
  margin: 0;
  padding: 8px 0 7px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}

/*↑メインメニューのリンク部分です。line-height: 1;を指定しておくと、全体の高さが上下のpaddingとfont-sizeの合計になります。最初に指定した#dropmenuの高さですね。*/

#dropmenu li:hover > a{
  background: #8FCFF2;
  color: #000000;
  font-weight: bold;
}

/*↑マウスを乗せたときの色の設定になります。メインメニュー、サブメニュー共通です。*/



#dropmenu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	background-color: #264A68;
}
/*↑サブメニュー全体のulです。「#dropmenu li」を基準に絶対値で表示位置を指定します。「top: 

100%;」でメインメニューの真下に表示されることになります。
border-radiusで下側の角を丸くしています。*/

#dropmenu li ul li{
  overflow: hidden;
 /* width: 100%;*/
  width:166px;
  height: 0;
  color: #fff;
  font-weight: bold;
  text-align:center;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
/*↑メインメニューと一緒の幅がいいという場合は、100%にしてください。transitionでオンマウス時の変化に動きを付けてい

ます。

初期状態では「overflow: hidden;」「height: 0;」で表示されないようにしています。*/

#dropmenu li ul li a{
	padding:8px 7px;
	background: #264A68;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}
/*↑サブメニューのリンクです。メインメニューのリンクと違う部分のみ書いています。*/

#dropmenu li:hover ul li{
	overflow: visible;
	height:29px;

	
}
/*↑メインメニューにマウスを乗せた際のサブメニューです。高さは「#dropmenu li ul li a」の上

下のpadding8p+7pxxとfont-size14pxの合計の値になっています。*/


#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
/*↑一番下のサブメニューの下の角を丸くします。*/
}





.content {

	padding: 0px 0;
}

.side {
	float: left;
	width: 165px;
	background-color: #E2E2E2;
	padding-top: 10px;
	padding-left: 5px;
	/*height: 100%;*/
	padding-bottom: 20px;
}

.title {
	border-left: 10px;
	border-color: #903;
	border-style: solid;
	margin-top: 5px;
	margin-right: 5px;
	color: #903;
	background-color: #D7BFCD;
	border-right: 0px;
	border-bottom: 0px;
	border-top: 0px;
}

.title_2 {
	border-left: 10px;
	border-color: #036;
	border-style: solid;
	margin-top: 10px;
	margin-right: 5px;
	color: #036;
	background-color: #BBCFD9;
	border-bottom: 0px;
	border-right: 0px;
	border-top: 0px;
}

.main_contents {
	float: left;
	width:825px;	
}

.pho_com {
	height: 200px;
	float: left;		
}

#com {
	float: left;
	width: 315px;
	padding: 5px;
}

.main{
	clear: left;
	padding-top: 10px;
}

.main_contents_basic{
	width: 996px;
	background-color: B2B2B2;
}


.main_basic{
	width: 940px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #FFF;
	padding-top: 50px;
	padding-bottom: 20px;
	margin-left: 23px;
}

/* ~~ フッター ~~ */
.footer {
	padding: 0;
	background: #305376;
	background-image: url(../img/footer.png);
	height: 30px;
	clear: left;
	width: 996px;
}
.subtitle{
	background-color: #B2B2B2;
	color: #FFF;
	height: 30px;
	}
	
	.subtitle_town_kiyaku{
	background-color: #6FACB9;
	color: #FFF;
	height: 30px;
	}
	
  #sub_title {
	text-align: center;
	padding-top: 5px;
	 }

/*- Menu Tabs K--------------------------- */

 
	  
    #tabsK {
	float:left;
	width:100%;
	background:#6FACB9;
	font-size:14px;
	line-height:normal; 
      }
	  
	  
    #tabsK ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsK li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsK a {
      float:left;
      background:url("../img/tableft_B.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsK a span {
	float:left;
	display:block;
	background:url("../img/tabright_B.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#000;
	font-weight: bold;
      }

    #tabsK a:hover span {
      color:#000;
          background-position:100% -42px;
      }

		  
    #tabsK a:hover {
      background-position:0% -42px;
      }

        #tabsK #current a {
                background-position:0% -42px;
        }
        #tabsK #current a span {
                background-position:100% -42px;
        }