@charset "UTF-8";

/* 初期化 */
* {margin: 0; padding: 0; line-height: 100%;}

/* 基本 */
.clear {clear: both;}
img {border: 0px;}

/* リンク色 */
a:link,a:visited {color: #0000ee; text-decoration: none;}
a:active, a:hover {color: #EE6401; text-decoration: underline;}

/* 全体 */
body {text-align: center; background: #FFFFFF; font-family:"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka",sans-serif;}
#toolbar {width: 800px; margin: 0 auto; padding: 20px 0;text-align: center;}
#toolbar p {color: #000000;}
#toolbar .button {text-align: center;}
#toolbar .sample {text-align: center;}

/* メイン画像 */
#toolbar h1 {width: 800px; height: 200px; background: url(../img/header.jpg) no-repeat 50% 0; text-indent:-9999px; color: #333333;}

/* ツールバー紹介 */
#explain {width: 735px; margin: 25px auto 0px auto; text-align: left;}
#explain div.left {width: 42%; float: left; text-align: left;}
#explain div.right {width: 58%; float: left; text-align: right;}
#explain p {font-size: 13px; line-height: 1.6em; margin-bottom: 15px;}
#explain p strong {line-height: 1.6em;}
/* ツールバー紹介 見出し */
#explain h2 {border-left: solid 6px #DD0000; color: #000000; font-size: 21px; margin-bottom: 15px; padding-left: 10px;}
/* ツールバー紹介 強調文字 */
#explain p span {color: #DD0000; line-height: 1.4em; font-size: 15px;}


/* 機能説明 */
#function {width: 735px; margin: 20px auto 10px auto; text-align: left;}
#function div.left {width: 367px; float: left;}
#function div.right {width: 367px; float: left;}
#function p {font-size: 13px; line-height: 1.6em; margin-bottom: 10px; padding: 0 30px 0 0;}
#function p.mg {margin-bottom: 30px;}
#function p.capture {text-align: center;}
#function p.captureL {text-align: center; margin:75px 0 0;}
/* 機能説明 見出し */
#function h2 {border-left: solid 6px #DD0000; color: #000000; font-size: 21px; margin-bottom: 20px; padding-left: 10px;}
/* 機能説明 強調文字 */
#function p span{color: #f8422a; line-height: 1.4em;}
/* 右カラムのリスト */
#function li{
list-style:none;
font-size:13px;
margin:5px 0 0;
line-height:1.4em;
}

/* 注意事項等 */
#attention {width: 735px; margin: 20px auto 0 auto; background: #f2f2f2; border: solid 1px #cccccc; text-align: left;}
#attention .contents {background: #FFFFFF; border: dotted 1px #cccccc; margin: 10px; padding: 0 10px 10px 10px;}
#attention .contents h4 {font-size: 13px;  margin: 10px 0;}
#attention .contents p {font-size: 13px; line-height: 1.6em;}
#attention .contents table {margin: 0px 0 10px 0;}
#attention .contents td {font-size: 13px; color: #000000; line-height: 1.6em; vertical-align: top;}
#attention .contents td.indent {width: 20px; text-align: center;}
#attention .contents .line {width: 100%; height: 2px; background: url(../img/dotline.gif) repeat-x;}
#attention .contents ul {margin-top: 5px;}
#attention .contents li {list-style: none; background: url(../img/link_arrow.gif) 0 3px no-repeat; font-size: 12px; color: #333333; padding: 0 0 8px 13px;}
#attention .contents li a:link,#attention .contents li a:visited {padding-left: 13px; background: url(../img/link_bg.gif) 0 2px no-repeat;}
#attention .contents li a:active,#attention .contents li a:hover {padding-left: 13px; background: url(../img/link_bg_on.gif) 0 2px no-repeat;}