/*
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;
}

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;
}

.post{ margin-bottom: 5em; }

#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%;
		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: 260px;
		height: 90px;
		margin: 0;
		position: absolute;
		top: 10px;
		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: 130%;
		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: 120%;
		font-weight: normal;
		line-height: 30px;
		padding: 0 0 0 40px;
		background: url(http://www.hp-webmagic.com/image/bg-h02.jpg) no-repeat 0 0;
		clear: both;
}

.post h3 { margin-top: 2em; }

h4,h5,h6 {
		font-size: 120%;
		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: 35px;
		margin-bottom: 10px;
		padding: 5px 5px 0;
}

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;
}

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

p.widget-title {
		background-color: #333;
		color: #fff;
		margin: 0;
		padding: 3px 10px;
}

.cat-item,
.page_item {
		margin: 0 0 1px;
		padding: 5px 0 5px;
		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.localnavi select { margin: 1em auto 0; }

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

ul.inquiry li {
		width: 220px;
		position: absolute;
}

ul.inquiry .btn01 {
		top: 50px;
		left: 10px;
}

ul.inquiry .btn02 {
		top: 110px;
		left: 10px;
}

ul.inquiry .btn03 {
		top: 170px;
		left: 10px;
}

ul.inquiry .btn04 {
		top: 230px;

		left: 10px;
}

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

ul.inquiry .btn01 a { background-position: 0 0; }
ul.inquiry .btn02 a { background-position: 0 -50px; }
ul.inquiry .btn03 a { background-position: 0 -100px; }
ul.inquiry .btn04 a { background-position: 0 -150px; }

ul.inquiry 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: #c00;
}

ul.inquiry .btn01 a:hover { background-position: -220px 0; }
ul.inquiry .btn02 a:hover { background-position: -220px -50px; }
ul.inquiry .btn03 a:hover { background-position: -220px -100px; }
ul.inquiry .btn04 a:hover { background-position: -220px -150px; }

/* ---------- 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;
}

/*========================================================================
===== #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
==============================================================================================*/
.post ul.ul-category-list {
		list-style-type: none;
		margin: 0;
		padding: 0;
}

.post ul.ul-category-list li {
		margin: 0;
		padding: 5px 0 5px 45px;
		background: url(http://www.hp-webmagic.com/image/wp-ul-category-list.jpg) no-repeat 0 50%;
		border-bottom: 1px dotted #ccc;
}

.post ul.ul-category-list a,
.post ul.ul-category-list a:hover { text-decoration: none; }

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

.h3-archive-title {
		line-height: 30px;
		margin: 0;
		padding-left: 40px;
		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;
}

/* -------------------------------------------------------- tag-text */
p.tag-text {
		clear: both;
		margin: 0 0 0.5em;
		padding: 5px;
		border-left: 2px solid #036;
}

/* ---------- tag-cloud -- */
p.tagtittle {
		line-height: 1.5em;
		margin: 0;
		padding: 5px 0 0 5px;
		border-left: 2px solid #036;
}

div.st-tag-cloud {
		width: 615x;
		line-height: 1.5em;
		margin: 0 0 1em;
		padding: 0 0 5px 13px;
		border-left: 2px solid #036;
}

.st-tag-cloud a {
		text-decoration: none;
		padding-right: 1em;
}

.st-tag-cloud a:hover { text-decoration: underline; }

/* -------------------------------------------------------- AdSense */
div.ad { clear: both; }

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

/* -------------------------------------------------------- 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%;
}

#content p.postmeta span { font-weight: normal; }

/* -------------------------------------------------------- page-navi */
ul.page-navi {
		list-style-type: none;
		margin: 2em 0 0.5em;
		padding: 5px;
		border-left: 2px solid #036;
}

.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: 120%;
		font-weight: normal;
		line-height: 30px;
		margin: 30px 0 10px;
		padding-left: 40px;
		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: 120%;
		font-weight: normal;
		line-height: 30px;
		margin: 30px 0 10px;
		padding-left: 40px;
		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: 30px;
		padding: 0 0 0 40px;
		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,
#menubox {
		font-size: 95%;
		width: 100%;
		overflow: hidden;
}

#infobox { margin: 0 0 20px; }

.info_ex{
		width: 440px;
		float: left;
		margin: 0 0 20px;
		padding: 0 5px;
}

#infobox h2 {
		font-size: 100%;
		font-weight: normal;
		text-align: left;
		line-height: 30px;
		height: 30px;
		margin: 0;
		padding: 0 0 0 50px;
		background: url(http://www.hp-webmagic.com/image/infobox-h2.jpg) no-repeat 0 0;
		color: #039;
}

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

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

#infobox ul span {
		font-weight: normal;
		padding-right: 0.5em;
}

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

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

#menubox h3 {
		font-size: 120%;
		font-weight: normal;
		line-height: 30px;
		padding: 0;
		background-image: none;
		color: #c33;
}

#menubox ul.localnavi {
		list-style-type: none;
		margin: 0 0 20px;
		width: 100%;
		overflow: hidden;
}

#menubox ul.localnavi li {
		width: 220px;
		float: left;
		margin: 0 5px 3px 0;
		background: url(http://www.hp-webmagic.com/image/gray.jpg);
}

#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: 120%;
		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: 30px;
		margin: 0;
		padding: 0 0 0 40px;
		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: 30px;
		margin: 0;
		padding: 0 0 0 40px;
		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: 120%;
		line-height: 30px;
		margin: 0;
		padding: 0 0 0 40px;
		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);
}