/*
Theme Name: Web Magic new
Theme URI: http://www.hp-webmagic.com/wordpress
Description: Web Magic
Author: ozawa
Author URI: http://www.hp-webmagic.com/
*/

* { margin: 0;padding: 0; }
.clear { clear: both; }
p { line-height: 1.8em;margin-bottom: 0.5em; }

body {
  text-align: center;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  margin: 0;
  padding: 0;
  background: url(http://www.hp-webmagic.com/image/bg-body.jpg) repeat-x 0 0;
}

#home { background: url(http://www.hp-webmagic.com/image/bg-body-home.jpg) repeat-x 0 0; }

/*========================================================================
===== レイアウト =========================================================*/
#header {
  width: 900px;
  height: 200px;
  margin: 0 auto;
}

#home #header {
  height: 420px;
  background: url(http://www.hp-webmagic.com/image/bg-header.jpg) no-repeat 0 140px;
}

#header-inner {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(http://www.hp-webmagic.com/image/bg-header-inner.jpg) no-repeat 0 0;
}

ul#globalnavi {
  list-style-type: none;
  width: 900px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 10;
}

#wrapper {
  text-align: left;
  width: 900px;
  margin: 0 auto 20px;
  padding: 0 10px;
}

#content {
  width: 630px;
  float: right;
  background-color: #fff;
}

#home #content {
  float: none;
  width: 100%;
  padding: 20px 0 0;
  background-color: transparent;
}

#sidebar {
  width: 240px;
  float: left;
  padding-top: 40px;
}

#sidebar-inner { background-color: #fff; }

#undernavi {
  clear: both;
  text-align: right;
}

#footer {
  text-align: center;
  padding-top: 40px;
  background: url(http://www.hp-webmagic.com/image/bg-footer.jpg) repeat-x 0 0;
}

#footer-inner {
  text-align: left;
  width: 900px;
  margin: 0 auto;
  padding: 2em 0 0;
}

#footer-info {
  text-align: left;
  margin: 0;
  padding: 20px 0 5px;
  background: url(http://www.hp-webmagic.com/image/bg-footer-info.jpg) repeat-x 0 0;
}

/*========================================================================
===== フォント ===========================================================*/
#header { font-size: 85%; }
#content { font-size: 85%; }
#sidebar { font-size: 85%; }
#undernavi { font-size: 80%; }
#footer { font-size: 80%; }

a:link {
  text-decoration: underline;
  background-color: transparent;
  color: #00f;
}

a:visited {
  text-decoration: underline;
  background-color: transparent;
  color: #90f;
}

a:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #f00;
}

/*========================================================================
===== ヘッダー ===========================================================*/
h1 {
  font-weight: normal;
  font-size: 100%;
}

h1 {
  position: absolute;
  top: 15px;
  right: 100px;
}

.sitemap {
  clear: both;
  line-height: 1.5em;
  margin-bottom: 0;
  position: absolute;
  top: 15px;
  right: 0;
}

.sitemap a,
.sitemap a:hover { text-decoration: none; }

.logo {
  width: 240px;
  height: 50px;
  margin: 0;
  position: absolute;
  top: 55px;
  left: 0;
}

.logo a,.logo a:hover { text-decoration: none; }

/*========================================================================
===== グローバルナビ =====================================================*/
#globalnavi li {
  float: left;
  width: 180px;
}

#skip { display: none; }

#globalnavi a {
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  line-height: 40px;
  background-image: url(http://www.hp-webmagic.com/image/bg-globalnavi.jpg);
  background-repeat: no-repeat;
  background-color: #eee;
  color: #006;
}

#navi01 a { background-position: 0 0; }
#navi02 a { background-position: -180px 0; }
#navi03 a { background-position: -360px 0; }
#navi04 a { background-position: -540px 0; }
#navi05 a { background-position: -720px 0; }

#globalnavi a:hover {
  text-decoration: none;
  background-color: #eee;
  color: #f00;
}

#navi01 a:hover { background-position: 0 -40px; }
#navi02 a:hover { background-position: -180px -40px; }
#navi03 a:hover { background-position: -360px -40px; }
#navi04 a:hover { background-position: -540px -40px; }
#navi05 a:hover { background-position: -720px -40px; }

/*========================================================================
===== コンテンツ内共通 ===================================================*/
img,img a,img a:hover {
  border: 0;
  text-decoration: none;
}

#content .right { text-align: right; }

h2 {
  font-size: 150%;
  font-weight: normal;
  text-align: center;
  height: 65px;
  margin: 0;
  padding: 15px 0 0;
  background: #eee url(http://www.hp-webmagic.com/image/bg-h01.jpg) no-repeat 0 0;
  color: #3366CC;
}

h3 {
  font-size: 140%;
  font-weight: normal;
  line-height: 50px;
  padding: 0 0 0 55px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
  clear: both;
}

h4,h5,h6 {
  font-size: 140%;
  font-weight: normal;
  line-height: 30px;
  margin: 40px 0 10px;
  padding: 0 0 0 55px;
  background: url(http://www.hp-webmagic.com/image/bg-h03.jpg) no-repeat 0 0;
}

p.topic-path {
  height: 40px;
  margin-bottom: 10px;
}

p.page-top {
  text-align: right;
  line-height: normal;
  padding-right: 15px;
  background: url(http://www.hp-webmagic.com/image/bg-pagetop.gif) no-repeat 100% 50%;
  clear: both;
}

#content span { font-weight: bold; }

p.img-left {
  float: left;
  margin: 0 1em 1em 0;
  line-height: 1;
}

p.img-right {
  float: right;
  margin: 0 0 1em 1em;
  line-height: 1;
}

/*========================================================================
===== サイドバー =========================================================*/
p.button-home {
  margin: 0 0 1px;
  padding: 0;
}

p.button-home a {
  text-indent: -9999px;
  text-decoration: none;
  width: 240px;
  height: 40px;
  display: block;
  margin: 0;
  padding: 0;
  background: url(http://www.hp-webmagic.com/image/home.jpg) no-repeat 0 0;
}

p.button-home a:hover {
  text-decoration: none;
  background: url(http://www.hp-webmagic.com/image/home.jpg) no-repeat -240px 0;
}

p.sidetitle {
  text-align: center;
  line-height: 30px;
  margin: 0 0 1px;
  padding: 0;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}

#home p.sidetitle { display: none; }

ul.localnavi {
  list-style-type: none;
  margin: 0 0 20px;
}

.cat-item,
.page_item {
  margin: 0;
  padding: 3px 0 2px;
  border-bottom: 1px solid #fff;
  background: url(http://www.hp-webmagic.com/image/gray.jpg);
  color: #ccc;
}

.cat-item a {
  text-decoration: none;
  padding: 0 0 0 10px;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 0 50%;
  color: #036;
}

.page_item a {
  text-decoration: none;
  padding: 0 0 0 10px;
  background: url(http://www.hp-webmagic.com/image/listmark03.gif) no-repeat 0 50%;
  color: #036;
}

.cat-item a:hover,
.page_item a:hover {
  text-decoration: none;
  background: url(http://www.hp-webmagic.com/image/listmark02.gif) no-repeat 0 50%;
  color: #f00;
}

/* ---------- フォーム -- */
ul.side-form {
  list-style-type: none;
  position: relative;
  width: 240px;
  height: 290px;
  margin: 0 0 20px;
  background: url(http://www.hp-webmagic.com/image/bg-side-form.jpg) no-repeat 0 0;
}

#home ul.side-form {
  width: 290px;
  background: url(http://www.hp-webmagic.com/image/bg-top-form.jpg) no-repeat 0 0;
}

.side-form li {
  width: 220px;
  position: absolute;
}

#home .side-form li { width: 270px; }

.side-form .navi01 {
  top: 50px;
  left: 10px;
}

.side-form .navi02 {
  top: 120px;
  left: 10px;
}

.side-form .navi03 {
  top: 190px;
  left: 10px;
}

.side-form a {
  text-decoration: none;
  display: block;
  width: 200px;
  line-height: 50px;
  padding-left: 20px;
  background-image: url(http://www.hp-webmagic.com/image/bg-side-form-li.jpg);
  background-repeat: no-repeat;
  background-color: #eee;
  color: #000;
}

#home .side-form a {
  width: 250px;
  line-height: 50px;
  background-image: url(http://www.hp-webmagic.com/image/bg-top-form-li.jpg);
}

.side-form .navi01 a { background-position: 0 0; }
.side-form .navi02 a { background-position: 0 -50px; }
.side-form .navi03 a { background-position: 0 -100px; }

.side-form a:hover {
  text-decoration: none;
  background-image: url(http://www.hp-webmagic.com/image/bg-side-form-li.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  color: #fff;
}

#home .side-form a:hover { background-image: url(http://www.hp-webmagic.com/image/bg-top-form-li.jpg); }

.side-form .navi01 a:hover { background-position: -220px 0; }
.side-form .navi02 a:hover { background-position: -220px -50px; }
.side-form .navi03 a:hover { background-position: -220px -100px; }

/* ---------- archives -- */
ul.archives {
  font-size: 80%;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
}

.archives li {
  float: left;
  width: 80px;
  overflow: hidden;
  margin: 0 0 0.5em;
  padding: 0;
}

.archives a {
  text-decoration: none;
  color: #036;
}

.archives a:hover {
  text-decoration: underline;
  color: #f00;
}

.rss {
  clear: both;
  width: 240px;
  height: 40px;
  margin: 0;
  padding: 0;
}

.rss a {
  text-indent: -9999px;
  width: 240px;
  height: 40px;
  display: block;
}

.rss a,
.rss a:hover {
  text-decoration: none;
  background: url(http://www.hp-webmagic.com/image/rss.jpg) no-repeat 0 0;
}

/* ---------- tag-cloud -- */
div.st-tag-cloud {
  text-align: left;
  line-height: 1.65em;
  width: 240px;
  float: right;
  margin: 0;
  padding: 0;
  border: none;
}

.st-tag-cloud a {
  text-decoration: none;
  margin: 0;
  padding: 0 10px 0 7px;
  background: url(http://www.hp-webmagic.com/image/listmark03.gif) no-repeat 0 50%;
}

/*========================================================================
===== #undernavi =========================================================*/
#undernavi ul {
  list-style-type: none;
  margin: 0;
  padding: 50px 0 0;
}

#undernavi li {
  display: inline;
  padding: 0 0 0 0.5em;
}

#undernavi li a {
  padding-left: 7px;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 0 50%;
}

/*========================================================================
===== #footer-inner ======================================================*/
ul.industry {
  list-style-type: none;
  margin: 0;
}

.industry li {
  width: 210px;
  height: 180px;
  float: left;
}

.industry li.box-margin { margin-right: 20px; }

.industry li span {
  display: block;
  margin: 0 0 5px 0;
  padding: 0 0 0 10px;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 0 50%;
  border-bottom: 1px solid #036;
}

.industry ul {
  list-style-type: none;
  line-height: 1.5em;
  margin: 0;
}

.industry ul li {
  float: none;
  display: inline;
  padding: 0 3px 0 0;
  background: none;
}

.industry li p { margin: 0 10px 10px 10px; }

/* ---------- インフォ -- */
div.under-info {
  width: 440px;
  float: left;
}

.under-info p { line-height: 1.5em; }

/* ---------- エリア -- */
div.area {
  width: 440px;
  float: right;
}

.area ul {
  list-style: none;
  line-height: 1.5em;
  margin: 0;
}

.area li {
  display: inline;
  padding: 0 0.5em 0 0;
}

#footer-inner p {
  clear: both;
  line-height: 1.5em;
  margin-bottom: 20px;
}

p.footer-logo {
  padding-left: 1em;
  line-height: 18px;
}

/* ---------- メニュー -- */
ul.footer-menu {
  list-style-type: none;
  margin: 0 0 0.5em;
  padding-left: 1em;
}

.footer-menu li {
  display: inline;
  padding-right: 1.5em;
}

.footer-menu a {
  text-decoration: none;
  padding-left: 7px;
  background: url(http://www.hp-webmagic.com/image/listmark03.gif) no-repeat 0 50%;
  color: #fff;
}

.footer-menu a:hover {
  text-decoration: none;
  background: url(http://www.hp-webmagic.com/image/listmark02.gif) no-repeat 0 50%;
  color: #ff0;
}

address {
  text-align: right;
  font-style: normal;
  padding: 0 1em 0 0;
  color: #fff;
}

address span { padding-left: 15px; }

/*==============================================================================================
                                                                                   CATEGORY PAGE
==============================================================================================*/
div.post-category{ margin-bottom: 5px; }

p.category-page-title {
  margin: 0;
  padding: 5px 0 4px 45px;
  background: url(http://www.hp-webmagic.com/image/bg-h03.jpg) no-repeat 0 50%;
  border-bottom: 1px dotted #ccc;
}

.category-page-title a,
.category-page-title a:hover { text-decoration: none; }

/*==============================================================================================
                                                                                    ARCHIVE PAGE
==============================================================================================*/

.h3-archive-title {
  line-height: 50px;
  margin: 0;
  padding-left: 55px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

.post-archive { margin-bottom: 4em; }

.post-archive .postmeta { clear: both; }

/*==============================================================================================
                                                                                    SINGLE PAGE
==============================================================================================*/
.post ul { margin-left: 2em; margin-bottom: 0.5em; } 
                          
/* -------------------------------------------------------- AdSense */
div.ad { margin: 2em 0; }

div.side-ad { margin: 0 auto 20px; }

/* -------------------------------------------------------- tag-text */
p.tag-text {
  clear: both;
  margin: 0 0 0.5em;
  padding: 5px;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}

/* -------------------------------------------------------- postmeta */
p.postmeta {
  clear: both;
  text-align: right;
  line-height: 1;
  margin: 0 0 1em;
  padding-right: 15px;
  background: url(http://www.hp-webmagic.com/image/bg-pagetop.gif) no-repeat 100% 100%;
}

/* -------------------------------------------------------- page-navi */
ul.page-navi {
  list-style-type: none;
  margin: 0 0 0.5em;
  padding: 5px;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}

.page-navi li {
  margin: 0;
  padding: 3px 0;
}

ul.page-navi a {
  text-decoration: none;
  margin: 0;
  padding-left: 15px;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 0 50%;
}

ul.page-navi a:hover {
  text-decoration: none;
  background: url(http://www.hp-webmagic.com/image/listmark02.gif) no-repeat 0 50%;
}

/* -------------------------------------------------------- st-related-posts -- */
ul.st-related-posts {
  list-style-type: none;
  margin: 0 0 1em;
  padding: 0;
}

.st-related-posts li {
  line-height: 30px;
  margin: 0;
  padding: 0 0 0 30px;
  background: url(http://www.hp-webmagic.com/image/bg-h04.jpg) no-repeat 0 50%;
}

ul.st-related-posts a,
ul.st-related-posts a:hover { text-decoration: none; }

/* -------------------------------------------------------- Related Entries -- */
ul.related-entries {
  list-style-position: inside;
  margin: 0 0 2em;
}

/* -------------------------------------------------------- pre blockquote -- */

pre {
  font-size: 95%;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  line-height: 1.5;
  width: 595px;
  margin: 1em 0;
  padding: 1em 15px;
  overflow: auto;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
  border-top: 5px solid #666;
}

pre span {
  font-weight: normal;
  color: #f00;
  padding: 0;
}

blockquote {
  margin: 1em 0;
  padding: 1em;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
  color: #003;
  border: 1px solid #ccc;
}

blockquote p {
  font-size: 90%;
  margin: 0 0 0.5em;
}

blockquote span {
  background-color: #eee;
  color: #006;
  padding: 0;
}

/* -------------------------------------------------------- DL CSS */
dl.css-property dt {
  font-weight: bold;
  margin: 0;
  padding: 0 0 0 1em;
  line-height: 2em;
  background-color: #999;
  color: #000;
}

dl.css-property dd {
  margin-bottom: 1em;
  padding: 0.2em 1em;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
  color: #000;
}

dl.css-property dd p { margin-bottom: 5px; }

/* -------------------------------------------------------- table-tag */
table.table-tag {
  width: 600px;
  margin: 0 0 2em;
  padding: 0;
}

.table-tag th {
  padding: 5px 0;
  border-bottom: 1px solid #cccccc;
  background-color: #eeeeee;
  color: #000000;
}

.table-tag td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid #cccccc;
}

/* -------------------------------------------------------- table-dtd */
table.table-dtd {
  width: 630px;
  margin: 0 0 2em;
  padding: 0;
}

.table-dtd td {
  width: 105px;
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
}

.table-dtd td.doctype {
  padding: 1em 10px;
  width: 600px;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
  border-top: 2px groove #036;
}

/* -------------------------------------------------------- FREE TEMPLATE */
ul.template-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.template-list li { margin-bottom: 20px; }

/* -------------------------------------------------------- server DL */
.dl-normal dt {
  font-size: 130%;
  font-weight: normal;
  line-height: 50px;
  margin: 30px 0 10px;
  padding-left: 55px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

.dl-normal dd { margin-bottom: 2em; }

.dl-normal dd p { margin-bottom: 0.5em; }

/*==============================================================================================
                                                                                         comment
==============================================================================================*/
div#comments { margin: 1em 0 0; }

p.p-comment-title {
  font-size: 130%;
  font-weight: normal;
  line-height: 50px;
  margin: 30px 0 10px;
  padding-left: 55px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

dl.dl-comment-list { margin: 4em 0 1em 25px; }

.dl-comment-list dt {
  margin-bottom: 5px;
  border-bottom: 1px solid #cccccc;
}

.dl-comment-list dd {
  margin: 0 0 2em;
  padding: 0;
}

/* -------------------------------------------------------- form */
#comments form { margin: 0; }

#comments form p { margin-bottom: 5px; }

#comments form label {
  display: block;
  width: 220px;
  float: left;
  clear: both;
  margin: 0;
  padding: 2px 0;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 95% 0;
}

#comments form input { padding: 2px; }

#author,#email,#url,#comment { width: 400px; }

#comment { height: 150px; }

#submit { clear: both; }

/*==============================================================================================
                                                                                       INEX PAGE
==============================================================================================*/
dl.top-info {
  width: 288px;
  height: 260px;
  float: left;
  margin: 0 0 30px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

dl.left,
dl.middle { margin-right: 15px; }

.top-info dt {
  font-weight: normal;
  line-height: 40px;
  padding: 0 0 0 55px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

.top-info dd {
  font-size: 95%;
  margin: 0;
  padding: 10px 9px;
  background-color: #fff;
}

#infobox {
  font-size: 95%;
  width: 440px;
  float: left;
}

#menubox {
  font-size: 95%;
  width: 450px;
  float: right;
  overflow: hidden;
}

#infobox h2 {
  font-size: 120%;
  font-weight: normal;
  text-align: center;
  height: 40px;
  margin: 0;
  padding: 15px 0 0;
  background: url(http://www.hp-webmagic.com/image/bg-h01.jpg) no-repeat 0 0;
}

#infobox ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#infobox li {
  margin: 0;
  padding: 2px 0 2px 10px;
  border-bottom: 1px dotted #ccc;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 0 50%;
}

#infobox a {
  text-decoration: none;
  color: #00f;
}

#infobox a:hover {
  text-decoration: none;
  color: #f00;
}

#menubox ul {
  list-style-type: none;
  margin: 0 0 20px;
  width: 220px;
  float: left;
}

#home div.st-tag-cloud {
  text-align: left;
  line-height: 1.65em;
  width: 220px;
  float: right;
  margin: 0;
  padding: 0;
  border: none;
}

#home .rss {
  clear: both;
  width: 100%;
  height: 40px;
  margin: 0;
}

#home .rss a {
  text-indent: -9999px;
  width: 100%;
  height: 40px;
  display: block;
}

#home .rss a,
#home .rss a:hover {
  text-decoration: none;
  background: url(http://www.hp-webmagic.com/image/rss.jpg) no-repeat 0 0;
}

/* ====================================================== プラン */
ul.ul-plan {
  list-style: none;
  margin: 0;
  padding: 0 0 2em;
}

.ul-plan li { margin: 0 0 2em; }

.ul-plan hr {
  clear: both;
  color: #fff;
  border: 0;
}

.ul-plan img {
  display: block;
  width: 220px;
  float: left;
  margin: 0;
}

.ul-plan p {
  width: 400px;
  float: right;
}

.ul-plan span {
  text-align: center;
  display: block;
  margin-bottom: 0.5em;
  color: #036;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}

ul.plan-ex {
  list-style: none;
  margin: 0 0 2em;
}

.plan-ex li {
  margin: 0 0 2em;
  padding: 0 0 0 5px;
  color: #336600;
  border-left: 5px solid #eee;
}

.plan-ex li p {
  margin: 0 0 0.5em 2em;
  padding: 0 10px;
  color: #000;
  border-bottom: 1px dotted #ccc;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}

ul.plan-ex ul {
  margin: 0 0 0.5em 4em;
  padding: 0;
  color: #000;
}

.plan-ex ul li {
  margin: 0 0 0.5em;
  padding: 0;
  color: #000;
  border-left: none;
}

/* ====================================================== 流れ */
dl.dl-flow {
  margin: 0 0 20px;
  padding: 0;
  background: url(http://www.hp-webmagic.com/image/bg-dl-flow.jpg) repeat-y 0 0;
}

.dl-flow dt {
  font-size: 130%;
  text-decoration: underline;
  margin: 0;
  padding: 0 0 0 100px;
  color: #39f;
}

.dl-flow dd {
  margin: 0 0 20px;
  padding: 10px 0 9px 100px;
  border-bottom: 1px dotted #ccc;
}

.dl-flow #step01 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step01.jpg) no-repeat 0 0; }
.dl-flow #step02 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step02.jpg) no-repeat 0 0; }
.dl-flow #step03 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step03.jpg) no-repeat 0 0; }
.dl-flow #step04 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step04.jpg) no-repeat 0 0; }
.dl-flow #step05 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step05.jpg) no-repeat 0 0; }
.dl-flow #step06 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step06.jpg) no-repeat 0 0; }
.dl-flow #step07 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step07.jpg) no-repeat 0 0; }
.dl-flow #step08 { background: url(http://www.hp-webmagic.com/image/bg-dl-flow-step08.jpg) no-repeat 0 0; }

p.button-form img a,
p.button-form img a:hover {
  text-decoration: none;
  border: 0;
}

/* ====================================================== 料金 */
.dl-price-child {
  margin: 0 0 20px;
  padding: 0;
}

.dl-price-child dt {
  font-size: 120%;
  line-height: 40px;
  margin: 0;
  padding: 0 0 0 50px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

.dl-price-child dt a,
.dl-price-child dt a:hover {
  text-decoration: none;
  color: #036;
}

.dl-price-child dd {
  margin: 0 0 50px;
  padding: 0;
}

.dl-price-child table {
  width: 630px;
  margin: 0 0 5px;
  padding: 0;
}

.dl-price-child th,
.dl-price-child td {
  text-align: left;
  margin: 0;
  padding: 6px;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}

.dl-price-child th {
  font-weight: normal;
  width: 60%;
}

.dl-price-child .colspan {
  text-align: right;
  background: none;
}

.dl-price-child table p {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.dl-price-child th p {
  padding: 6px 10px 6px;
  background-color: #fff;
  color: #036;
  border: 1px outset #fff;
}

.dl-price-child td p { padding: 0 0 0 20px; }

.dl-price-child th span {
  display: block;
  font-weight: normal;
  font-size: 80%;
  margin: 5px 0 0 15px;
  padding: 4px 5px 4px;
  border: 1px inset #eee;
  color: #000;
}

.dl-price-ex dt {
  font-size: 120%;
  line-height: 40px;
  margin: 0;
  padding: 0 0 0 50px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

.dl-price-ex dd {
  margin: 0;
  padding: 10px 0 30px 20px;
}

/* -------------------- blog --*/
.dl-wp dt {
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #ccc;
}

.dl-wp dd {
  margin: 0 0 2em;
  padding: 0;
}

/* ====================================================== インフォ */
div.info1 ul { margin-left: 2em; }

div.info1 h5,div.info1 h6 {
  font-size: 120%;
  font-weight: normal;
  line-height: normal;
  margin: 0;
  padding: 5px 0 5px 28px;
  background: url(http://www.hp-webmagic.com/image/bg-h04.jpg) no-repeat 0 50%;
}

/*==============================================================================================
                                                                                       MAP PAGE
==============================================================================================*/
div.ddsg-pagenav { margin: 0 0 1em; }

.ddsg-wrapper h2 {
  text-align: left;
  font-size: 130%;
  line-height: 50px;
  margin: 0;
  padding: 0 0 0 45px;
  background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
}

.ddsg-wrapper ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.ddsg-wrapper ul li {
  margin: 0;
  padding: 0 0 0 15px;
  background: url(http://www.hp-webmagic.com/image/list-mark01.gif) no-repeat 0 0;
}

.ddsg-wrapper ul ul {
  margin: 0 0 2em 1em;
  padding: 0;
}

.ddsg-wrapper ul ul li {
  margin: 0;
  padding: 0 0 0 10px;
  background: url(http://www.hp-webmagic.com/image/listmark01.gif) no-repeat 0 50%;
}

.ddsg-pagenav p {
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 2em;
  background: url(http://www.hp-webmagic.com/image/bg-dotted.jpg);
}