@charset "Shift_Jis";
*{ font-size: 100.1%; }
body{ line-height: 1.6;  }
small{ font-size: smaller;}
big{ font-size: larger; }
ins{text-decoration: underline; }
del{ text-decoration: line-through;}

em,strong{ color: #f7520a;  font-style: normal; }
strong{ margin-left: .25em; letter-spacing: .25em; }
strong strong{ border: none; }

blockquote,
q{ background: #FFF; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
blockquote{ padding: .3em 1.5em; }
blockquote[title]:before{ content: attr(title); display: block; border-bottom: 1px dotted #CCC; color: #000; }

code{ color: #91551a;  }
pre code{ border: none; padding: 0; }

pre{ padding: .5em 0;  background: #e6e3d8; color: #000; border: solid #e6e3d8;
border-width: 5px 10px; 
-moz-border-radius: 5px; -webkit-border-radiud: 5px; border-radius: 5px;
overflow-x: scroll; overflow-y: hidden; line-height: 1.2; }

kbd{}

dt,dfn{ background: #dbe4d5; font-style: normal; 
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
dfn{ padding: 0 .25em; }
dt{ padding: .05em .5em; }
dd{ padding: .25em 0; }
dd+dd{ padding-top: 0; }
dd p,dd ul, dd ol, dd dl{ margin: .5em 0; }
li{ margin-bottom: .2em; }

form{ background: url(01.png) repeat; border: 1px solid #DDD; padding: .2em 2%; }
fieldset{ margin: 0; padding: 0; border: none; }
legend{ margin: 0; padding: 0; font-weight: bold; color: #E871D9; }

a:link{  color: #55674f;  }
a:visited{  color: #812b84; }
a:hover,
a:focus{ color: #a35b15; text-decoration:none; border-bottom: 1px dashed #a35b15; }
a:active{ color: #ab0b43; }

aside{ margin-left: 1.5em; }
aside>p:first-child:before{ content: "※"; }
aside>p:first-child{ text-indent: -1em; }


/* layout */

html{ background: #f8f7f3 url(bg.png) repeat; color: #10100f; }
body{ font-family:"Meiryo", "メイリオ", Sans-serif; 
margin: 0 auto; padding-bottom: 1em;  width: 730px; position: relative; }

div.header{ padding: 9em 0 1em 140px; background: url(01.png) repeat-y 0 0; text-align: right; }
div.main{ }
div.sub{ clear: both; margin-top: 1em; }

h1,h2,h3{ font-family: Meiryo, メイリオ, Osaka, sans-serif; }
h1{ font-size: 170%; color: #55674F; }
h2{ font-size: 140%; color: #55674F; letter-spacing: .2em; }

h1#TOP,div.header h2{ color: #c3987b; margin: 0; }
h1#TOP{ height: 2em; overflow: hidden; }
h1#TOP:before{ content: "CSS Designplate Project"; display: block; padding-bottom: 1em; 
font: italic bold 130%/1 Georgia,"Times New Roman", Serif;
text-shadow: 3px 3px 2px rgba(155,130,125,.3), 1px 1px 0 rgba(255,255,255,.5); }
div.header h2{ font-size: 110%; }
div.main h1{ border-bottom: 1px solid #55674F; }
div.main h2:before{ display: inline-block; content: ""; width: 0; height: 0;
border: solid .4em; border-color: transparent  transparent transparent #55674F; }

h1.menu{ display: none; }
ul.menu>li{ border: none; }
ul.menu li,ul.menu a{ display: block;  }
ul.menu{ margin: 0; position: absolute; top: 0; left: 135px; padding: .8em 0 0; border: none; }
ul.menu li{ float: left; width: 193px; margin: 2px; padding: 0; list-style: none; border: none; }
ul.menu a{ margin: 0; border: 1px solid #d8d1cd; background: #dbe4d5;
font-weight: normal; text-align: center; }
ul.menu a:link,ul.menu a:visited{ color: #55674F; border: 1px solid #d8d1cd; }
ul.menu a:hover,ul.menu a:focus{ color: #a35b15; border: 1px solid #d8d1cd; }
ul.menu a:active{ color: #ab0b43; }

/*footer*/

#STYLE-CHANGE{ margin: 0; padding: .2em .5em; text-align: right; }
#STYLE-CHANGE legend{ display: none; }
#STYLE-CHANGE ul{ margin: 0; border: none; list-style: none; }
#STYLE-CHANGE input,
#STYLE-CHANGE select{ margin: 0 0 0 .3em; }
ul.data{ margin: .8em 0; padding: 0; list-style: none; border: none; }
ul.data li{ display: inline; border: none; padding: 0; margin: 0 0 0 1em; }


/*手順ガイド*/
ol.guide>li{ padding: .2em 0 0.2em 38px; 
background: url(q.png) no-repeat 0 0; }



/*explain*/
dl.source{}

/*FAQ*/
article{ margin: .8em 0; padding: .1em 1em .1em 0; border-right: 20px solid #dce5cf; }
h1.question{ font-size: 110%; margin: .5em 0; }
h1.question:before{ content: "Q. "; }
div.answer{ }

/*CSS配布*/
div.download{}
div.download h1{ text-align: right; font-size: 130%;}
div.download h2{ font-size: 110%; }

body:after{ content: ""; display: block; clear: both; }

* html dt,* html form,* html h1{ zoom: 1; }
* html article{ zoom: 1; }