@charset "utf-8";

/* Web標準テンプレート
 * Copyright (C) 2006 WEBTHINK. All rights reserved.
 * http://www.webthink.jp/
 *
 * バージョン：1.03
 * 作成日：2006年 2月26日
 * 更新日：2007年 1月 6日 */

/*
 * Version 1.03
 * ・初期化処理を initialize.css に分割
 */


/* 外部ファイル構成 */
/*************************************************************/
/*
 *  HTML
 *  └import.css
 *     ├initialize.css
 *     ├base.css
 *     ├print.css
 *     ├mac-ie5.css
 *     ├win-ie5x.css
 *     ├win-ie5.css
 *     └win-ie55.css
 *
 */


/* CSS構造 */
/*************************************************************/
/*
 *  body
 *  └#wrapper
 *     ├#header ヘッダー領域
 *     ├#naviation ナビゲーション領域
 *     ├#content コンテンツ領域
 *     │ └#crumb パンくず 
 *     ├#sidebar サイドバー領域
 *     └#footer フッター領域
 *  　    └#copyright 著作権表示
 *
 */


/* プロパティの指定順序 */
/*************************************************************/
/*
 *  display
 *  list-style
 *  position
 *  float
 *  clear
 *  width
 *  height
 *  margin
 *  padding
 *  border
 *  background
 *  color
 *  font
 *  text-decoration
 *  text-align
 *  vertical-align
 *  white-space
 *  other text
 *  content
 *
 *  http://www.mozilla.org/css/base/content.css
 *
 */


/* リンク */
/*************************************************************/

a:link {
	color: #339933;
}

a:visited {
	color: #339933;
}

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

#wrapper {
	width: 748px;
	margin: 0 auto;
	background-image: url(../image/background.gif);
	background-repeat: repeat-y;
	text-align: center;
}

/* ヘッダー領域 */
/*************************************************************/

#header {
}


/* コンテンツ領域 */
/*************************************************************/

#content {
	text-align: left;
	margin: 10px 20px;
}

/* campaign */

#campaign {
	width: 700px;
	margin-bottom: 2em;
}

#campaign .box {
	border: 1px solid #CCCCCC;
	padding: 10px 15px;
}

#campaign .left {
	float: left;
	width: 325px;
}

#campaign .left p {
	color: #006600;
}

#campaign .left .notice {
	margin-top: 1em;
}

#campaign .left .notice p,
#campaign .left .notice h3 {
	color: #666666;
	font-size: 12px;
}

#campaign .right {
	float: right;
	width: 325px;
}

#campaign .right h3 {
	color: #CC0000;
	font-weight: bold;
}

#campaign .right p {
	color: #666666;
	margin: 0.6em;
}

/* tab */

#tab .tab-box {
	width: 680px;
	margin-bottom: 2em;
	padding: 18px 0 10px 18px;
	border: 1px solid #CCCCCC;
	text-align: center;
}

#tab .curve-box {
	float: left;
	width: 327px;
	height: 165px;
	background-image: url(../image/tab_background.gif);
	background-repeat: no-repeat;
	text-align: left;
	margin-top: 0;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 0;
}

#tab .curve-box2 {
	float: left;
	width: 327px;
	height: 180px;
	background-image: url(../image/tab_background2.gif);
	background-repeat: no-repeat;
	text-align: left;
	margin-top: 0;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 0;
}

#tab .no {
	float: left;
	width: 22px;
	height: 127px;
	margin-left: 8px;
	padding-top: 8px;
	display: inline;
}

#tab h3 {
	padding-top: 8px;
}

#tab .image {
	float: right;
	padding-right: 1px;
}

#tab .text {
	float: left;
	width: 207px;
	height: 102px;
}

#tab .text2 {
	float: left;
	width: 166px;
	height: 102px;
}

#tab .text p {
	margin: 8px 0 0 8px;
}

#tab .text2 p {
	margin: 8px 0 0 8px;
}

#campaign,
#tab,
#tab #tab1,
#tab #tab2,
#tab #tab3,
#step {
	clear: both;
}

#tab2,
#tab3 {
	display: none;
}

#tab ul {
	height: 49px;
}

#tab li {
	display: inline;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	text-indent: -9999px;
}

#tab li a {
	display: block;
	float: left;
	height: 50px;
	margin-right: 8px;
	text-decoration: none;
}

#tab1 li#tab1-navi1 a { width: 228px; background: url(../image/tab.gif)    0   50px; }
#tab1 li#tab1-navi2 a { width: 228px; background: url(../image/tab.gif) -236px  0;   }
#tab1 li#tab1-navi3 a { width: 228px; background: url(../image/tab.gif) -472px  0;   }
#tab2 li#tab2-navi1 a { width: 228px; background: url(../image/tab.gif)    0    0;   }
#tab2 li#tab2-navi2 a { width: 228px; background: url(../image/tab.gif) -236px 50px; }
#tab2 li#tab2-navi3 a { width: 228px; background: url(../image/tab.gif) -472px  0;   }
#tab3 li#tab3-navi1 a { width: 228px; background: url(../image/tab.gif)    0    0;   }
#tab3 li#tab3-navi2 a { width: 228px; background: url(../image/tab.gif) -236px  0;   }
#tab3 li#tab3-navi3 a { width: 228px; background: url(../image/tab.gif) -472px 50px; }

#tab1 li#tab1-navi1 a:hover  { width: 228px; background: url(../image/tab.gif)    0   50px; }
#tab1 li#tab1-navi2 a:hover  { width: 228px; background: url(../image/tab.gif) -236px 50px;   }
#tab1 li#tab1-navi3 a:hover  { width: 228px; background: url(../image/tab.gif) -472px 50px;   }
#tab2 li#tab2-navi1 a:hover  { width: 228px; background: url(../image/tab.gif)    0   50px;   }
#tab2 li#tab2-navi2 a:hover  { width: 228px; background: url(../image/tab.gif) -236px 50px; }
#tab2 li#tab2-navi3 a:hover  { width: 228px; background: url(../image/tab.gif) -472px 50px;   }
#tab3 li#tab3-navi1 a:hover  { width: 228px; background: url(../image/tab.gif)    0   50px;   }
#tab3 li#tab3-navi2 a:hover  { width: 228px; background: url(../image/tab.gif) -236px 50px;   }
#tab3 li#tab3-navi3 a:hover  { width: 228px; background: url(../image/tab.gif) -472px 50px; }

/* comparison */

#comparison table {
	margin: 1em 0;
	width: 700px;
	text-align: center;
}

#comparison p {
	margin: 0 auto;
	width: 105px;
	font-size: 0.8em;
	text-align: left;
}

#comparison em {
	color: #CC0000;
	font-size: inherit;
}

#comparison th {
	background-color: #F0F0F0;
	color: #666666;
	font-weight: bold;
	text-align: center;
}

#comparison .gray {
	background-color: #CCCCCC;
}

#comparison th,
#comparison td {
	padding: 0.6em 0;
	border: 1px solid #999999;
}

/* step */

#step {
	width: 700px;
}

#step .box {
	border: 1px solid #CCCCCC;
	padding: 10px 15px;
}

#step p {
	margin: 0.5em 0 0.5em 0.3em;
	color: #663300;
}

#step #step1 {
	float: left;
	width: 221px;
}

#step #step1 table {
	width: 221px;
}

#step #step2 {
	float: left;
	width: 200px;
}

#step #step2 table {
	width: 200px;
}

#step #step2 .notice p {
	font-size: 0.8em;
}

#step #step3 {
	float: left;
	width: 143px;
	padding-top: 45px;
}

#step #arrow {
	float: left;
	width: 45px;
	padding-top: 124px;
	text-align: center;
}

/* その他 */

.button {
	margin: 1em 0;
	text-align: right;
}

.small {
	font-size: 10px;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 120%;
}

/* フッター領域 */
/*************************************************************/

#footer {
	clear: both;
}

#copyright {
}

/* clearfix */
/*************************************************************/

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}