@charset "utf-8";
/* トップページ
------------------------------------------------------------------------------------------ */

/* テンプレート
------------------------------------------------------------------------------------------ */
ul.temp-top-btn { list-style-type: none; width: 100%; overflow: hidden; margin: 0 0 1em; padding: 0; }
ul.temp-top-btn li { text-align: center; font-weight: bold; margin: 0 0 2px; padding: 0; }
ul.temp-top-btn a { text-decoration: none; display: block; width: 100%; height: 4em; line-height: 4em; margin: 0; padding: 0; background: #06c url(/prx/000/http/www.css-designsample.com/image/btnArrow.png) no-repeat 100% 50%; background-size: auto 24px; color: #fff; }
ul.template-list { width: 100%; overflow: hidden; margin: 0; padding: 0; }
ul.template-list li { list-style-type: none; width: 180px; margin: 0 auto 2em; padding: 0; }
ul.template-list p { font-size: 85%; line-height: 1.2em; margin: 0; padding: 0; }
dl.template-list-top, dl.template-list-business { margin: 0; padding: 0; }
.template-list-top dt, .template-list-business dt { margin: 0; padding: 0; }
.template-list-top dd, .template-list-business dd { width: 100%; margin: 0 0 30px; overflow: hidden; }
.template-list-top img { display: block; width: 260px; margin: 0 auto 15px; padding: 0; }
.template-list-top p { line-height: 1.2em; margin-bottom: 0.5em; }
.template-list-business dt span { font-weight: normal; padding-left: 1.5em; }
.template-list-business img { display: block; width: 300px; float: left; margin: 0 auto 1em; padding: 0; border-bottom: 1px solid #ccc; }
.template-list-business p { clear: both; line-height: 1.5em; margin-bottom: 0.5em; }
.template-list-business table { margin: 0; padding: 0; }
.template-list-business td { text-align: left; margin: 0; padding: 0.3em 1em 0.3em 0; }
.template-list-business table a { text-align: center; text-decoration: none; display: block; width: 8em; line-height: 1.5em; background-color: #06c; color: #fff; }
.template-list-business table a:hover { text-decoration: none; background-color: #eee; color: #c33; }
@media (min-width: 768px) {
ul.template-list li { width: 180px; height: 220px; float: left; margin: 0 0 5px; }
.template-list-top dd, .template-list-business dd { margin: 0 0 20px; }
.template-list-top img { float: left; margin: 0 1em 0 0; }
.template-list-business img { margin: 0 10px 10px 0; }
}
@media (min-width: 1024px) {
ul.temp-top-btn li { width: 32%; float: left; margin: 0 0 1%; padding: 0 1% 0 0; }
ul.temp-top-btn a { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
ul.temp-top-btn a:hover { background: #eee url(/prx/000/http/www.css-designsample.com/image/btnArrow.png) no-repeat 100% 50%; background-size: auto 24px; color: #06c; }
}
/* リンク
------------------------------------------------------------------------------------------ */
.dl-linkinfo dt { padding-bottom: 0.2em; border-bottom: 1px solid #ccc; }
.dl-linkinfo dd { margin: 0; padding-top: 0.5em; padding-bottom: 2em; }
.dl-linkinfo p { margin: 0; padding: 0.2em 0; }
.dl-linkinfo ul { line-height: 35px; margin: 0; padding: 0; }
.dl-linkinfo li { list-style-type: none; display: inline; margin: 0 0 0.5em; padding: 0 0.5em 0 0; }
dl.dl-linklist dt { padding: 0; border-bottom: 0; }
dl.dl-linklist dd { line-height: 1.5em; margin: 0 0 2em 2em; padding: 0.5em 0 0.5em 1em; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; }
dl.portal dd { margin-bottom: 0; padding: 0.2em 0; border: none; }
/* カラーコード
------------------------------------------------------------------------------------------ */
.table-colorcode16, .table-colorcode216 { font-family: Arial, Helvetica, sans-serif; width: 100%; }
.table-colorcode16 caption, .table-colorcode216 caption { font-size: 120%; margin-bottom: 0.5em; }
.table-colorcode16 p { text-align: center; font-weight: bold; line-height: 1em; margin: 0; padding: 10px 0; }
.table-colorcode216 td { display: block; }
.table-colorcode216 td { padding: 10px 0 5px; }
.table-colorcode216 p { line-height: 1em; margin: 0 0 5px; padding: 0 0 0 10px; }
@media (min-width: 768px) {
.table-colorcode216 td { font-size: 80%; display: table-cell; }
}
@media (min-width: 1280px) {
.table-colorcode216 td { font-size: 100%; }
}
/* サイトマップ
------------------------------------------------------------------------------------------ */
ul.sitemap { margin: 1em 0; padding: 0; }
ul.sitemap ul { margin: 0; padding: 0; }
ul.sitemap li { list-style: none; text-align: center; margin: 0; padding: 0; background-color: #333; color: #fff; line-height: 24px; }
ul.sitemap li a { text-align: left; display: block; line-height: 1.4; width: 90%; padding: 4% 8% 4% 2%; background: url(/prx/000/http/www.css-designsample.com/image/btnArrow.png) no-repeat 100% 50%; background-size: auto 1em; color: #fff; }
ul.sitemap ul li a { color: #000; }
ul.sitemap ul li { background-color: #999; color: #fff; }
ul.sitemap ul ul li { background-color: #f1f1f1; color: #000; }
@media (min-width: 768px) {
ul.sitemap ul { margin: 0; padding: 0.5em 0 1em; }
ul.sitemap li { font-weight: bold; list-style-type: square; list-style-position: inside; margin-left: 1em; background-color: transparent; color: #000; text-align: left; }
ul.sitemap ul li { font-weight: normal; list-style-type: decimal; list-style-position: outside; margin: 0 0 0.2em 3em; background-color: transparent; color: #000; }
ul.sitemap ul ul li { list-style-type: disc; background-color: transparent; }
ul.sitemap ul ul ul li { list-style-type: circle; }
ul.sitemap li a { display: inline; width: 100%; padding: 0; background-image: none; color: #00f; }
ul.sitemap ul li a { color: #00f; }
}
/* アクセシビリティ
------------------------------------------------------------------------------------------ */
fieldset { width: 100%; margin: 0 0 2em; padding: 0; }
legend { margin: 0 0 1em; padding: 0 1em; }
fieldset dl, fieldset dt, fieldset dd { width: 100%; }
fieldset li { list-style-position: inside; }
dl.dl-accessibility-link dt { border-bottom: 1px solid #ccc; }
dl.dl-accessibility-link dd { margin: 0; padding: 0.5em 0; }
/* レイアウト崩れ
------------------------------------------------------------------------------------------ */
.layoutblock img { width: 100%; height: auto; }
.table-dtd { width: 100%; }
.table-dtd caption { font-weight: bold; color: #06c; background-color: #fff; margin: 0 0 1em; }
tr.browser-name { background-color: #fff; color: #006; }
td.doctype { padding-top: 0.5em; border-top: 1px solid #ccc; }
.doctype p.version { margin: 0 0 0.5em; background-color: #fff; color: #333; }
.doctype p { line-height: 1.2em; margin: 0 0 0.5em; background-color: #fff; color: #06c; }
@media (min-width: 480px) {
.layoutblock img { width: auto; }
}
/* サーバー
------------------------------------------------------------------------------------------ */
.ul-server-list { font-weight: bold; margin: 0 0 2em; padding: 0; }
.ul-server-list li { list-style-type: none; width: 100%; margin: 0 0 2px; padding: 0; }
.ul-server-list a { text-align: left; display: block; line-height: 1.4; width: 90%; padding: 4% 8% 4% 2%; background: #f9f9f9 url(/prx/000/http/www.css-designsample.com/image/btnArrow.png) no-repeat 100% 50%; background-size: auto 1em; color: #00f; }
.ul-server-list a:hover { text-decoration: none; background: #ddd url(/prx/000/http/www.css-designsample.com/image/btnArrow.png) no-repeat 100% 50%; background-size: auto 1em; color: #000; }
.dl-serverlist { width: 100%; }
.dl-serverlist dt { line-height: 2em; font-weight: normal; padding: 0 1em; background-color: #eee; color: #000; border: 1px outset #ccc; }
.dl-serverlist dt a { text-decoration: none; background-color: #eee; color: #00f; }
.dl-serverlist dt a:hover { background-color: #eee; color: #f00; }
.dl-serverlist dd { margin: 0 0 1.5em; padding: 1em 0 0; }
.dl-serverlist ul { list-style: none; margin: 0; padding: 0; }
.dl-serverlist li { text-align: center; display: block; overflow: hidden; line-height: 30px; float: left; width: 47.8%; margin: 0 1% 1% 0; padding: 0; border: 1px solid #ddd; }
@media (min-width: 768px) {
.dl-serverlist li { width: 32%; }
}
@media (min-width: 1280px) {
.dl-serverlist li { width: 23.8%; }
}
@media (min-width: 1680px) {
.dl-serverlist li { width: 18.8%; }
}
p.ex { clear: both; }
li.list_1 { color: #c00; }
li.list_2, li.list_3, li.list_4, li.list_5 { font-size: 85%; }
/* SEO
------------------------------------------------------------------------------------------ */
.table-seo { width: 100%; }
.table-seo th, .table-seo td { text-align: left; padding: 0.5em 0 0.5em 1em; border-bottom: 1px solid #ccc; }
.color { background-color: #eee; color: #000; }
.seoTool table td { display: block; vertical-align: middle; }
 @media (min-width: 678px) {
.seoTool table td { display: table-cell; padding: 0.35em 1em 0.35em 0; }
}
/* タグ講座
------------------------------------------------------------------------------------------ */
dl.blockelement dd { font-size: 140%; font-weight: bold; margin-bottom: 2em; }
ul.tag-ul { margin: 0 0 5em 2em; }
ol.tag-ol { margin: 0 0 5em 2.5em; }
dl.tag-dl { margin: 0 0 0 2em; }
/* CSSレイアウト
------------------------------------------------------------------------------------------ */
#sample-globalnavi { margin: 0; padding: 0; list-style-type: none; width: 200px; }
#sample-globalnavi li { width: 200px; height: 40px; display: inline; }
#sample-globalnavi a { text-indent: -9999px; text-decoration: none; display: block; width: 200px; height: 40px; background-image: url(/prx/000/http/www.css-designsample.com/csslayout/img/bg-globalnavi-1.gif); background-repeat: no-repeat; }
#sample-globalnavi #menu1 a { background-position: 0 0; }
#sample-globalnavi #menu2 a { background-position: 0 -40px; }
#sample-globalnavi #menu3 a { background-position: 0 -80px; }
#sample-globalnavi #menu4 a { background-position: 0 -120px; }
#sample-globalnavi #menu5 a { background-position: 0 -160px; }
#sample-globalnavi a:hover { text-decoration: none; background-image: url(/prx/000/http/www.css-designsample.com/csslayout/img/bg-globalnavi-1.gif); background-repeat: no-repeat; }
#sample-globalnavi #menu1 a:hover { background-position: -200px 0; }
#sample-globalnavi #menu2 a:hover { background-position: -200px -40px; }
#sample-globalnavi #menu3 a:hover { background-position: -200px -80px; }
#sample-globalnavi #menu4 a:hover { background-position: -200px -120px; }
#sample-globalnavi #menu5 a:hover { background-position: -200px -160px; }
#sample2-globalnavi { margin: 0; padding: 0; list-style-type: none; width: 200px; }
#sample2-globalnavi li { display: inline; }
#sample2-globalnavi a { text-decoration: none; display: block; padding: 5px 10px; width: 180px; color: #ffffff; background-color: #000000; border-bottom: 1px solid silver; }
#sample2-globalnavi a:hover { text-decoration: none; color: #000000; background-color: #ffcc00; }
#sample4-globalnavi { margin: 0; padding: 0; list-style-type: none; }
#sample4-globalnavi li { text-indent: -9999px; width: 200px; height: 160px; background: url(/prx/000/http/www.css-designsample.com/csslayout/img/bg-globalnavi-4.jpg) no-repeat -200px 0; }
#sample4-globalnavi li a { text-decoration: none; display: block; width: 200px; height: 160px; background: url(/prx/000/http/www.css-designsample.com/csslayout/img/bg-globalnavi-4.jpg) no-repeat 0 0; }
#sample4-globalnavi li a:hover { text-decoration: none; background-color: transparent; background-image: none; }
#sample5-globalnavi { margin: 0; padding: 0; list-style-type: none; width: 200px; }
#sample5-globalnavi li { margin: 0; padding: 0; width: 200px; height: 40px; background-image: url(/prx/000/http/www.css-designsample.com/csslayout/img/bg-globalnavi-1.gif); background-repeat: no-repeat; border-bottom: 1px solid black; }
#sample5-globalnavi a { text-indent: -9999px; text-decoration: none; display: block; width: 200px; height: 40px; background-image: url(/prx/000/http/www.css-designsample.com/csslayout/img/bg-globalnavi-1.gif); background-repeat: no-repeat; }
#sample5-globalnavi #menu1 { background-position: -200px 0; }
#sample5-globalnavi #menu2 { background-position: -200px -40px; }
#sample5-globalnavi #menu3 { background-position: -200px -80px; }
#sample5-globalnavi #menu4 { background-position: -200px -120px; }
#sample5-globalnavi #menu5 { background-position: -200px -160px; }
#sample5-globalnavi #menu1 a { background-position: 0 0; }
#sample5-globalnavi #menu2 a { background-position: 0 -40px; }
#sample5-globalnavi #menu3 a { background-position: 0 -80px; }
#sample5-globalnavi #menu4 a { background-position: 0 -120px; }
#sample5-globalnavi #menu5 a { background-position: 0 -160px; }
#sample5-globalnavi a:hover { text-decoration: none; background-color: transparent; background-image: none; }
/*  XHTML  */
.table-w3c { width: 100%; }
.table-w3c caption { font-size: 100%; text-align: left; font-weight: bold; padding-bottom: 0.5em; }
.table-w3c th { font-weight: bold; }
.table-w3c th, .table-w3c td { padding: 0.5em; line-height: 1.5em; }
.tr-color { background-color: #eee; color: #000; }
/* 目次 */

ul.contents-index li, ol.contents-index li { list-style-position: inside; margin-left: 1em; }
ul.contents-index ul { margin-bottom: 2em; }
ul.contents-index ul li { margin-left: 2em; }
ol.contents-index p { padding-left: 2em; }
/* リファレンス
------------------------------------------------------------------------------------------ */
hr { margin: 2em 0; color: #06c; }
textarea { width: 95%; }
.pagenaviReference { border: 1px solid #ccc; margin-bottom: 30px; padding: 1em; }
.pagenaviReference ul { width: 100%; margin: 0; padding: 0; }
.pagenaviReference li { width: 100%; overflow: hidden; margin: 0; padding: 0; list-style: none; text-align: center; }
.pagenaviReference li a { display: block; padding: 0.35em 0; }
 @media (min-width: 678px) {
.pagenaviReference li { text-align: left; }
.pagenaviReference li a { display: inline; }
}
/* JSコード
------------------------------------------------------------------------------------------ */
.tag-name, .tag { font-weight: normal !important; }
.dp-highlighter { font-family: Verdana, Geneva, sans-serif; background-color: #f9f9f9; width: 95%; overflow: auto; margin: 18px auto !important; padding: 0; }
/* clear styles */
.dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none; }
.dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; }
.dp-highlighter .bar { padding-left: 45px; }
.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; }
.dp-highlighter ol { list-style: decimal; /* for ie */ background-color: #f9f9f9; margin: 0px 0px 0px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */ padding: 0px; color: #5C5C5C; }
.dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li { list-style: none !important; margin-left: 0px !important; }
.dp-highlighter ol li, .dp-highlighter .columns div { list-style: decimal-leading-zero; /* better look for others, override cascade from OL */ list-style-position: outside !important; border-left: 3px solid #06c; background-color: #f9f9f9; color: #000; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 16px; }
.dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; }
.dp-highlighter .columns { background-color: #F8F8F8; color: gray; overflow: hidden; width: 100%; }
.dp-highlighter .columns div { padding-bottom: 5px; }
.dp-highlighter ol li.alt { background-color: #FFF; color: inherit; }
.dp-highlighter ol li span { color: black; background-color: inherit; }
/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol { margin: 0px; }
.dp-highlighter.collapsed ol li { display: none; }
/* Additional modifications when in print-view */

.dp-highlighter.printing { border: none; }
.dp-highlighter.printing .tools { display: none !important; }
.dp-highlighter.printing li { display: list-item !important; }
/* Styles for the tools */

.dp-highlighter .tools { padding: 3px 8px 3px 10px; color: silver; background-color: #fff; padding-bottom: 10px; border-left: 3px solid #06c; }
.dp-highlighter.nogutter .tools { border-left: 0; }
.dp-highlighter.collapsed .tools { border-bottom: 0; }
.dp-highlighter .tools a { color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; }
.dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; }
/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #fff; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
/**/
.page-navi { width: 100%; overflow: hidden; margin: 0; padding: 2em 0 0; }
.page-navi li { list-style: none; margin: 0 1% 0 0; padding: 0; width: 9%; float: left; }
.page-navi li a { display: block; width: 100%; text-align: center; line-height: 1.8em; background: #000; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.page-navi li.active a { background: #36f; }
@media (min-width: 960px) {
.page-navi li { margin-right: 2px; width: 3em; }
.page-navi li a:hover { background: #f00; }
.page-navi li.active a:hover { background: #36f; }
}