@charset "UTF-8";

/* ----- COMMON ----- */
#contents h1 { background: url(images/hd1.png) no-repeat; }
#contents #hd2 { background: url(images/hd2.png) no-repeat; }
#contents #hd2 h2 { color: #00aa87; font-size: 2.7rem; font-weight: bold; }
#contents h3 { color: #00aa87; font-size: 1.7rem; font-weight: bold; background: #ebebeb url(images/hd3.png) repeat-x 0 bottom; display: block; /*height: 30px;*/ padding: 5px 10px 5px 10px; margin-bottom: 20px; }
#contents h4 { font-size: 1.6rem; font-weight: bold; margin-bottom: 10px; }
#contents h4 span { color: #00aa87; }

/* ----- INDEX ----- */
#contents #hd2.index h2 span { /*left: 25px;*/ }
#contents #hd2.index h2 { color: #00aa87; /*padding-left:0.5em; text-indent:-0.5em; */}
#contents.index h4 a { font-weight: bold; background: url(images/icn_rotate.png) no-repeat 0 5px; display: block; margin-bottom: 15px; padding-left: 20px; }

#contents .lead { display: block; margin-bottom: 25px; }
#contents .lead p { /*font-size: 1.5rem;*/ margin-bottom: 15px; }
#contents .indexnav { /*font-size: 1.5rem;*/ font-weight: bold; display: block; margin-bottom: 40px; }
#contents .indexnav a { font-weight: bold; background: url(images/arrow_l.png) no-repeat 0 0; padding-left: 17px;}

#contents #l01, #contents #l02, #contents #l03 { display: block; position: relative; margin-bottom: 50px; }
#contents #l03 { margin-bottom: 100px; }
#contents #l01 ul, #contents #l02 ul, #contents #l03 ul { /*font-size: 1.5rem;*/ margin: 0 0 0 15px; }
#contents #l01 ul li, #contents #l02 ul li, #contents #l03 ul li { margin-bottom: 5px; padding-left:1em; text-indent:-1em; }
#contents #l01 .thumb, #contents #l02 .thumb, #contents #l03 .thumb { position: absolute; top: 40px; right: 0; }
#contents #l01 .thumb {}
#contents #l02 .thumb {}
#contents #l03 .thumb { top: 60px; right: 0; }

/* ----- NAV ----- */
nav .category { background: url(images/bg_nav_hd1.png) no-repeat; }

#s_menu > li > a:hover { background: #ccede6; }
#s_menu > li > a span { background:url('images/icn_rotate.png') no-repeat 0 18px;  }
#s_menu > li > a span.open { background:url('images/icn_rotate.png') no-repeat 0 -32px; }
#s_menu li ul { background:#f7f7f7; display: block; padding: 10px 0 5px 30px; border-bottom: 1px solid #b4b4b5; }
#s_menu li ul li a { font-size:1.3rem; font-weight:normal; background: url(images/arrow_s.png) no-repeat 0 3px; display:block; padding: 0 0 5px 15px; }
#s_menu li ul li a:hover {}
#s_menu .sub_menu { display:none; }

/* ----- CONTENTS ----- */
#contents #hd2.sol { height: 70px; padding: 55px 10px 0 10px; margin-bottom: 20px;  }
#contents #hd2.sol h2 { line-height: 3.5rem; }
#contents #hd2 h2 font { color: #333333; font-size: 2.2rem; font-weight: normal; }

#contents .task { display: block; position: relative; min-height:210px; height:auto !important; height:210px; margin-bottom: 40px; }
#contents.sol5 .task { min-height:190px; height:auto !important; height:190px; }
#contents.sol6 .task { min-height:420px; height:auto !important; height:420px; }
#contents .task .left { display: block; width: 435px; }
#contents .task .left dl { font-size: 1.6rem; background: #eaeaea; display: block; padding: 10px 10px; }
#contents .task .left dl dt { font-weight: bold; display: block; /*float: left; width: 90px; *//*margin-right: 15px; */}
#contents .task .left dl dt.t { color: #00aa87; }
#contents .task .left dl dd { font-weight: bold; display: block; float: left; /*width: 325px; */}
#contents .task .left dl dd.s { color: #0079c0; font-size: 1.7rem; }
#contents .task .left dl .line { border-bottom: 1px dotted #999999; padding-top: 10px; margin-bottom: 10px; }
#contents .task .right { display: block; text-align: center; position: absolute; top: -90px; right: 0; }
#contents .task .right p { font-weight: bold; margin-bottom: 5px; }

#contents .materialtask { border: 1px solid #00aa87; padding: 10px; }
#contents .processchart { display: block; text-align: center; width: 580px; }
#contents .processchart span { font-size: 1.2rem; }

/* WORK */
#contents .example_nav { display: block; margin-bottom: 30px; border-bottom: 2px solid #00aa87; position: relative; }
#contents .example_nav .active { position: absolute; bottom: -2px; }
#contents .example_nav li a { color: #848484; font-size: 1.7rem; font-weight: bold; background: #eaeaea; display: block; text-align: center; float: left; width: 365px; height: 55px; padding: 5px 0 0; }
#contents .example_nav li.e02 a { height: 40px; padding: 20px 0 0; }
#contents .example_nav.products li.e01 a { color: #fff; background: #00aa87; }
#contents .example_nav.products .active { left: 5px; }
#contents .example_nav.work li.e02 a { color: #fff; background: #00aa87; }
#contents .example_nav.work .active { left: 370px; }

#contents .item { display: block; /*padding-bottom: 30px;*/ margin-bottom: 30px; border-bottom: 3px dotted #848484;}
#contents .item .title { margin-bottom: 25px; padding: 0 10px; border-left: 5px solid #00aa87; }
#contents .item .title h3 { color: #333333; font-size: 2.4rem; font-weight: bold; background: none; height: auto; padding: 0; margin-bottom: 0; }
#contents .item .title h4 { color: #00aa87; font-size: 1.7rem; font-weight: bold; }
#contents .item .point { width: 100%; }
#contents .item .point tr { border-bottom: 20px solid #fff; }
#contents .item .point th { color: #fff; font-size: 1.3rem; background: #00aa87; text-align: center; width: 160px; padding: 5px 0; }
#contents .item .point td { padding: 4px 0 4px 20px; }
#contents .item .point td a { background: url(images/arrow_s.png) no-repeat 0 2px; padding: 0 20px 0 15px; }

#contents .item .text { font-weight: bold; background: #ccede6; display: block; padding: 15px; margin-bottom: 25px; }
#contents .item .text p, #contents .item .text a { font-weight: bold; }
#contents .item .image { display: block; }
#contents .item .image li { font-size: 1.2rem; font-weight: bold; display: block; text-align: center; float: left; width: 225px; min-height:210px; height:auto !important; height:210px;  margin: 0 9px 20px; }
#contents .item .image li img { margin-bottom: 5px; }

#contents .pagenav { text-align: center; }