@charset "shift_jis";

/*
=========================================================================
このスタイルシートファイルではレイアウト(段組み)の指定 及び 余白の指定を
行っています。
フォントサイズ等の見た目に関するデザインは style.css で行って下さい。
-------------------------------------------------------------------------
           http://template.hp-webmagic.com/ http://www.hp-webmagic.com */

div {
  margin: 0;
  padding: 0;
}

/*
=========================================================================
                                               全体の幅指定と共通指定部分
========================================================================*/

body {
  text-align: center;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
}

#wrapper {
  text-align: left;
  margin: 0 auto;
  width: 860px;/* ここを変更 */
}

#globalnavi { width: 176px; }

/* 以下変更不要 */
#container { width: 100%; }

#undernavi { clear: both; }

#footer {
  width: 100%;
  height: 61px;
}

/*
=========================================================================
                                                       ヘッダーの高さ指定
========================================================================*/
#header {
  width: 100%;
  height: 280px;
}

/*
=========================================================================
                                   コンテンツ部分とサイドバー部分の幅指定
=========================================================================
[2-1] 1カラム
[2-2] 2カラム左サイドバー
[2-3] 2カラム右サイドバー
[2-4] 3カラム

2カラムと3カラムは 全体の幅[wrapper] で指定した幅を超えないように！*/

/*
[2-1] 1カラム
------------------------------------------------------------------------*/

#column-one #content { width: 100%; }

/*
[2-2] 2カラム左サイドバー
------------------------------------------------------------------------*/

/* コンテンツ */
#column-two-left #content {
  width: 660px;
  float: right;
}

/* サイドバー */
#sidebar {
  width: 200px;
  float: left;
}

/*
[2-3] 2カラム右サイドバー
------------------------------------------------------------------------*/

/* コンテンツ */
#column-two-right #content {
  width: 660px;
  float: left;
}

/* サイドバー */
#sidebar {
  width: 200px;
  float: right;
}

/*
[2-4] 3カラム
------------------------------------------------------------------------*/
  
/* コンテンツとサイドバーを囲む枠[1][2]を足したもの */
#column-three .container-inner {
  width: 680px;
  float: left;
}

/* [1] コンテンツ */
#column-three #content {
  width: 480px;
  float: right;
}

/* [2] 左サイドバー */
#column-three #sidebar {
  width: 200px;
  float: left;
}

/* 右サイドバー */
#right-sidebar {
  width: 180px;
  float: right;
}

/*
=========================================================================
                                                   余白はここで指定します
========================================================================*/
/*
ヘッダー外枠と内枠との余白
------------------------------------------------------------------------*/
.header-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

/*
ヘッダー外枠とコンテンツ部分との余白
------------------------------------------------------------------------*/
#container { margin: 40px 0 0; }

/*
コンテンツ部分とサイドバー部分との余白
------------------------------------------------------------------------
[1]1カラム
[2]2カラム左サイドバー
[3]3カラム右サイドバー
[4]3カラム*/

/* [1]1カラム */
#column-one .content-inner { margin: 0 0 50px; }

/* [2]2カラム左サイドバー */
#column-two-left .content-inner { margin: 0; }

/* [3]3カラム右サイドバー */
#column-two-right .content-inner { margin: 0 30px 50px 0; }

/* [4]3カラム */
#column-three .content-inner { margin: 0 15px 50px; }

/*
サイドバー外枠と内枠との余白
------------------------------------------------------------------------*/
.sidebar-inner { margin: 0 0 50px; }

/*
フッター外枠と内枠との余白
------------------------------------------------------------------------*/
.footer-inner {
	height: 30px;
	margin-top: 0;
	margin-right: 20px;
	margin-bottom: 0;
	margin-left: 20px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}