@charset "utf-8";

/* --------------------browser reset-------------------- */
* {margin:0; padding:0; font-style:normal;}
fieldset {border:0;}
li {list-style:none;}
img {border:0;}

a:link {color:#d48415; text-decoration:underline;}
a:visited {color:#a26510; text-decoration:underline;}
a:hover {color:#d48415; text-decoration:underline;}
a:active {color:#a26510; text-decoration:none;}

.no {clear:both; display:none;}
.hd {visibility:hidden; height:0; font-size:0;}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

.float-l {float:left;}
.float-r {float:right;}
.float-c {clear:both;}

/* base */
body{font-family:"Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;	background-color:#c0c0c0;}
.lead {margin-bottom:40px; color:#333; font-size:14px; font-weight:bold; line-height:1.5; text-align:center;}

/* layout */
#container01 {background-color:#fff; width:900px; margin:0 auto;}
#container02 {background-color:#fff; width:800px; margin:0 auto; padding-bottom:20px; color:#333;}
#header {background:url(../images/bg.gif) no-repeat; height:498px; padding:22px 0 0 0; text-align:center;}

#menu {background:#d7dee8; padding:0 0 15px 20px;}
#copyright {padding:10px 0px;background-color:#36588e; color:#fff; text-align:center; font-size:12px; line-height:100%;}

/* menu */
#side_menu01{text-align:center;	width:780px;}
#side_menu01 li {float:left; margin:13px 8px 0 0;}
#side_menu02 {text-align:center; width:603px; margin:0 0 0 97px;}
#side_menu02 li {float:left; margin:7px 8px 0 0;}


/* --------------------Contents-------------------- */
#contents #main {width:800px; background:#fff url(../images/bg_main.gif) left top repeat-y;}
/* ----------Header---------- */
#contents #headerarea {position:relative; width:800px; height:252px; background:#fff url(../images/illust.gif) left top no-repeat;}
#contents #headerarea h1 {position:absolute; width:500px; height:78px; top:12px; left:0;}

/* ----------Left Block---------- */
#contents #txtblock p, #contents #txtblock2 p {margin-bottom:16px; font-size:14px; line-height:21px;}
#contents #txtblock a, #contents #txtblock2 a {font-size:12px; line-height:1.4;}
#contents #main li {margin-bottom:16px; font-size:16px; line-height:21px;}
#contents #main li.type3 {margin-bottom:1px; padding-left:15px; background:url(../images/type3.gif) 0 2px no-repeat; font-size:14px; line-height:19px;}
#contents #main dl {width:530px; margin:0 0 25px 20px; font-size:14px; line-height:21px;}
#contents #main dl.merit {margin:0 0 35px 40px;}
#contents #txtblock2 em {color:#556729; font-weight:bold;}

/* -----Text----- */
#contents #main #txtblock {position:relative; float:left; width:578px; margin:20px 20px  20px 0;}
#contents #txtblock h2 {position:absolute; width:400px; height:78px; top:-101px; left:0;}
/* -----Text2----- */
#contents #main #txtblock2 {position:relative; float:left; width:578px; margin:55px 20px  20px 0;}
#contents #txtblock2 h2 {position:absolute; width:400px; height:78px; top:-136px; left:0;}
/* -----Image----- */
#contents #main #imgblock {position:relative; float:left; width:596px; margin:20px 2px  20px 0;}
#contents #imgblock h2 {position:absolute; width:400px; height:78px; top:-101px; left:0;}
#contents #imgblock p {margin-bottom:16px; font-size:14px; line-height:21px;}
#contents #imgblock a {font-size:12px; line-height:1.4;}

/* -----Text List----- */
#contents #main ol {width:530px; margin:0 auto;}
#contents #main ol li.num1 {padding-left:20px; background:url(../images/num1.gif) 0 0px no-repeat;}
#contents #main ol li.num2 {padding-left:20px; background:url(../images/num2.gif) 0 0px no-repeat;}
/* -----Text List2----- */
#contents #main dl dt {line-height:1.3; margin-bottom:5px; color:#556729; font-size:16px; font-weight:bold;}
#contents #main dl dd {padding-left:25px;}
#contents #main dl dt.num1 {padding-left:20px; background:url(../images/num1.gif) 0 0px no-repeat;}
#contents #main dl dt.num2 {padding-left:20px; background:url(../images/num2.gif) 0 0px no-repeat;}
#contents #main dl dt.num3 {padding-left:20px; background:url(../images/num3.gif) 0 0px no-repeat;}
#contents #main dl dt.num4 {padding-left:20px; background:url(../images/num4.gif) 0 0px no-repeat;}
#contents #main dl dt.num5 {padding-left:20px; background:url(../images/num5.gif) 0 0px no-repeat;}
#contents #main dl dt.num6 {padding-left:20px; background:url(../images/num6.gif) 0 0px no-repeat;}

/* -----Text Result----- */
#contents #main .resultblock {margin:0 20px; background-color:#f7f6f0; border:1px solid #d7dee8; padding:10px;}
#contents #main h3 {width:528px; margin:20px 0 0 20px; padding:5px; font-size:16px; font-weight:bold; line-height:21px; color:#36588e; text-align:center; background-color:#d7dee8;}
#contents #main ul {width:540px;}
#contents #main .resultblock li {font-size:14px;}
#contents #main .resultblock ul.data {margin-bottom:10px;}
#contents #main .resultblock ul li.type1 {margin-bottom:1px; padding-left:11px; background:url(../images/type1.gif) 0 5px no-repeat; line-height:19px;}
#contents #main .resultblock ul li.type2 {margin-bottom:1px; padding-left:14px; background:url(../images/type2.gif) 0 4px no-repeat; line-height:19px;}


/* ----------Right Block Navi---------- */
#contents #main #navblock {float:right; width:202px; height:100%; top:252px; left:598px; padding-bottom:20px; background-color:#d7dee8;}
#contents #navblock ul {width:184px; height:590px; margin:9px auto 0 auto; background:url(../images/navi.gif) left top no-repeat;}
#contents #navblock li {width:184px; height:80px; margin-bottom:5px; font-size:0; line-height:0;}
#contents #navblock li a {display:block; width:184px; height:80px; font:0/0 sans-serif; text-indent:-8888px;}
#contents #navblock li.about a {background-position:0 0;}
#contents #navblock li.howto a {background-position:0 85px;}
#contents #navblock li.merit a {background-position:0 170px;}
#contents #navblock li.limit a {background-position:0 255px;}
#contents #navblock li.result a {background-position:0 340px;}
#contents #navblock li.concern a {background-position:0 425px;}
#contents #navblock li.knowhow a {background-position:0 510px;}
#contents #navblock li a:hover {background:url(../images/navi.gif) left top no-repeat;}
#contents #navblock li.about a:hover {background-position:-184px 0;}
#contents #navblock li.howto a:hover {background-position:-184px -85px;}
#contents #navblock li.merit a:hover {background-position:-184px -170px;}
#contents #navblock li.limit a:hover {background-position:-184px -255px;}
#contents #navblock li.result a:hover {background-position:-184px -340px;}
#contents #navblock li.concern a:hover {background-position:-184px -425px;}
#contents #navblock li.knowhow a:hover {background-position:-184px -510px;}
#contents #navblock li .nolink {display:block; width:184px; height:80px; font:0/0 sans-serif; text-indent:-8888px; background:url(../images/navi.gif) left top no-repeat;}
#contents #navblock li.about .nolink {background-position:-368px 0;}
#contents #navblock li.howto .nolink {background-position:-368px -85px;}
#contents #navblock li.merit .nolink {background-position:-368px -170px;}
#contents #navblock li.limit .nolink {background-position:-368px -255px;}
#contents #navblock li.result .nolink {background-position:-368px -340px;}
#contents #navblock li.concern .nolink {background-position:-368px -425px;}
#contents #navblock li.knowhow .nolink {background-position:-368px -510px;}

/* -----Knowhow----- */
#contents #main #sceneblock {position:relative; float:left; width:598px; margin:20px 0;}
#contents #sceneblock h2 {position:absolute; width:400px; height:78px; top:-101px; left:0;}
#contents #sceneblock h3 {margin:0 auto 15px auto; width:564px; background-color:#ffffff;}
#contents #sceneblock p {font-size:14px; line-height:21px; text-align:center; margin-bottom:15px;}
#contents #sceneblock p .orange { font-weight:bold; color:#f7ac21; }
#contents #sceneblock p.lead {text-align:left; margin-left:30px;}
#contents #sceneblock p.scenebtn a {display:block; width:107px; height:36px; margin:0 auto; background:url(../knowhow/img/scene_btn_off.gif) left top no-repeat; font:0px/0px sans-serif; text-indent:-8888px;}
#contents #sceneblock p.scenebtn a:hover {background:url(../knowhow/img/scene_btn_on.gif);}