@charset "utf-8";

/* universal-serector reset */
* { margin: 0; padding: 0; }
body, ul, ol, li { margin: 0; padding: 0;}

/* common */
html { overflow-y: scroll; }
dl:after { content: ""; display: block; height: 1px; clear: both; visibility: hidden; }
dl { display: inline-block; min-height: 1%; }

/* No MAC IE \*/
* html dl { height: 1%; }
dl { display: block; }

div { zoom: 1; }

body { font: 81%/141.8% "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; color: #333; text-align: center; text-align: justify; text-justify: inter-ideograph; background: #efefef; }

#wrapper { width: 1020px; text-align: left; margin: 0 auto; background: url(../images/common/bg.jpg) left top repeat-y; padding: 0 0 0 60px; }

/* header */
#header { width: 760px; float: left; }
h1 { padding: 11px 0 1px; }
#logo {}

/* navigation */
#navi { width: 189px; float: left; }
#navi ul { list-style-type: none;  }
#navi li {  }
.sn-bg { background: url(../images/common/navi/side/sn-bg.jpg) left top no-repeat; padding: 9px 10px; height: 83px; margin: 0 0 10px; }

/* pagebody */
#pagebody { width: 820px; float: right; }

#gn { }
#gn ul { list-style: none; width: 760px; }
#gn li { float: left; height: 30px; }
#gn1 { width: 136px; margin-right: 1px; }
#gn2 { width: 210px; margin-right: 1px; }
#gn3 { width: 170px; margin-right: 1px; }
#gn4 { width: 130px; margin-right: 1px; }
#gn5 { width: 110px; }
#mainimg { clear: both; }
#inquiry { width: 60px; float: right; }

#main { border-top: 11px solid #fff; width: 760px; float: left; }
#main ul { margin: 0; }
#main ol { margin: 0; }
#main li { margin: 0 0 0 2em; }
#main p { line-height: 1.75em; }

#inquiry { float: right; }
/* footer */
#textlink { clear: both; width: 760px; font-size: 0.85em; padding: 10px 0 0;}
#textlink table { width: 760px; }
#textlink th { line-height: 20px; text-align: left; vertical-align: top; width: 12em; }
#textlink td { line-height: 20px; vertical-align: top; }
#pagetop { both; width: 760px; text-align: right; }
#footer { background: url(../images/common/footer-bg.jpg) left top no-repeat; margin: 0 60px 0 0; border-top: 10px solid #fff; height: 30px; }
address { font-size: 0.85em; line-height: 30px; font-style: normal; padding: 0 10px; font-family:Arial, Helvetica, sans-serif; color: #fff; height: 30px; }

/* index */
#appeal { width: 510px; float: left;}
#mainimg { padding: 11px 0 0; }
#ssc { width: 300px; float: right; }
.ssc { margin: 0; padding: 0 50px 0 0;}

#wn { padding: 11px 0 0; }
.wn { border: 1px solid #ccc; margin: 0 0 10px; padding: 9px; }
.wnimg { float: left; width: 100px; border-right: 10px solid #fff; }
.date { border-bottom: 1px dotted #ccc; font-weight: bold; }
.article { display: block; }
.wn:after { content: ""; display: block; height: 1px; clear: both; visibility: hidden; }

/* wn02 */
.freetext { background: url(../images/common/freetext-h3.jpg) left bottom repeat-y; line-height: 30px; margin: 0 0 10px; }
.wn02img { padding: 10px; float: left; } 

/* about_yuwa */
.concept { padding: 15px; line-height:2.0em;}

/* dreammaking */

/* technology */
.tb3 { width: 100%; margin: 0 0 35px; background: #369; }
.th3 { background: #69c; padding: 5px; color: #fff; text-align: center;}
.td3 { background: #fff; padding: 5px; vertical-align: top;}


/* satisfaction */
.tb2 { width: 100%; margin: 0 0 10px;}
.th2 {vertical-align: top;}
.td2 { border: 1px solid #369; padding: 4px; line-height: 1.25em; vertical-align: top;}
.td2-1 { text-align: right; line-height: 1.25em;vertical-align: top;}
.td2-2 { width: 120px; vertical-align: top;}

/* staff */
.stf-tb { width: 100%; margin: 0 0 35px; }
.stf-th { text-align: center; pading: 0 20px; }
.stf-th2 { text-align: left; padding: 2px 10px; color: #fff; background: #369; }
.stf-td { vertical-align: top; width: 200px; padding:0 20px 15px; }

/* access */
.map { width: 400px; float: left; display: inline; }
.access { width: 260px; float: right; display: inline; }

/* qa */
.q-title { background: url(../images/q-title.jpg) left top no-repeat; padding: 0 0 0 40px; line-height: 30px; font-size: 1.15em; }
.q-text { padding: 5px 10px 5px 40px; }
.a-text { padding: 5px 10px 35px 40px; background: url(../images/a-title.jpg) left top no-repeat; }

/* profile */
.prf-tb { width: 100%; margin: 0 0 15px; border-width: 1px 0 0 1px; border-style: solid; border-color: #ccc; }
.prf-th { width: 6em; padding: 4px 8px; text-align: left; vertical-align: top; background: #efefef; border-width: 1px; border-style: solid; border-color: #fff #ccc #ccc #fff;}
.prf-td { padding: 4px 8px; border-width: 1px; border-style: solid; border-color: #fff #ccc #ccc #fff;}

/**/
.cl02 { border: 1px solid #ccc; margin: 0 0 10px; padding: 9px; }
.cl02img { float: left; width: 200px; border-right: 10px solid #fff; }
.cl02date { border-bottom: 1px dotted #ccc; font-weight: bold; }
.cl02article { display: block; }
.cl02:after { content: ""; display: block; height: 1px; clear: both; visibility: hidden; }
.imgbox { padding: 4px; }
.dtimg { border: 2px solid #fff; float: left; }


/* sitemap */
#sitemap h2 { margin: 0 0 10px; }
#sitemap h3 { margin: 0 0 10px; }

/* contact - form */
.frm-tb { width: 100%; border-width: 1px 0 0 1px; border-style: solid; border-color: #ccc; margin: 0 0 10px;}
.frm-th { text-align: left; background: #efefef; border-width: 1px; border-style: solid; border-color: #fff #ccc #ccc #fff; padding: 4px 8px;}
.frm-td { width: 600px; border-width: 1px; border-style: solid; border-color: #fff #ccc #ccc #fff; padding: 4px 8px;}
.form-s { width: 100px; border: 1px solid #ccc; padding: 2px; }
.form-m { width: 200px; border: 1px solid #ccc; padding: 2px; }
.form-l { width: 400px; border: 1px solid #ccc; padding: 2px; }
textarea { width: 600px; border: 1px solid #ccc; padding: 2px; }
#contbtn { padding: 5px; text-align: center; }

input[type="checkbox"], input[type="radio"] { vertical-align: middle; }
input, textarea { line-height: 1.4em; padding: 0; vertical-align: middle; }

/* link */
a { outextlinkine: none; }
a:link { color: #369; text-decoration: underline; } 
a:visited { color: #369; text-decoration: underline; } 
a:hover, a:active { color: #369; text-decoration: none; } 

/* general-purpose */
h2 { font-size: 1.52em; } /* 18px */
h3 { font-size: 1.28em; } /* 16px */
h4 { font-size: 1.0em; color: #369; margin: 10px 0; }
h5 { font-size: 1.0em; margin: 0 0 5px; }
 
p { zoom: 1; }
p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

img { border: none; vertical-align: middle; }

.clr { clear: both; }
.pg-brk { page-break-before: always; }

.paging { line-height: 30px; border-width: 1px 0; border-style: dotted; border-color: #369; background: #9cf; text-align: center; margin: 0 0 10px;}
.paging img { vertical-align: middle; }

th, td, li { font: 1.0em/1.5em; }

/*
.tb1 { width: 100%; border-width: 1px 0 0 1px; border-style: solid; border-color: #ccc; margin: 0 0 10px;}
.th1 { background: #efefef; border-width: 1px; border-style: solid; border-color: #fff #ccc #ccc #fff; padding: 4px 8px; text-align: left; }
.td1 { border-width: 1px; border-style: solid; border-color: #fff #ccc #ccc #fff; padding: 4px 8px; }
*/

/* align */
.tar { text-align: right }
.tac { text-align: center }
.tal { text-align: left }

/* float */
.fl { float: left; display: inline; }
.fr { float: right; display: inline; }

.l160 { width: 160px; float: left; display: inline; }
.r160 { width: 160px; float: right; display: inline; }
.l170 { width: 170px; float: left; display: inline; }
.r170 { width: 170px; float: right; display: inline; }
.l190 { width: 190px; float: left; display: inline; }
.r190 { width: 190px; float: right; display: inline; }
.l200 { width: 200px; float: left; display: inline; }
.r200 { width: 200px; float: right; display: inline; }
.l205 { width: 205px; float: left; display: inline; }
.r205 { width: 205px; float: right; display: inline; }
.l210 { width: 210px; float: left; display: inline; }
.r210 { width: 210px; float: right; display: inline; }
.l240 { width: 240px; float: left; display: inline; }
.r240 { width: 240px; float: right; display: inline; }
.l250 { width: 250px; float: left; display: inline; }
.r250 { width: 250px; float: right; display: inline; }
.l280 { width: 280px; float: left; display: inline; }
.r280 { width: 280px; float: right; display: inline; }
.l310 { width: 310px; float: left; display: inline; }
.r310 { width: 310px; float: right; display: inline; }
.l340 { width: 340px; float: left; display: inline; }
.r340 { width: 340px; float: right; display: inline; }
.l335 { width: 335px; float: left; display: inline; }
.r335 { width: 335px; float: right; display: inline; }
.l360 { width: 360px; float: left; display: inline; }
.r360 { width: 360px; float: right; display: inline; }
.l375 { width: 375px; float: left; display: inline; }
.r375 { width: 375px; float: right; display: inline; }
.l390 { width: 390px; float: left; display: inline; }
.r390 { width: 390px; float: right; display: inline; }
.l410 { width: 410px; float: left; display: inline; }
.r410 { width: 410px; float: right; display: inline; }
.l420 { width: 420px; float: left; display: inline; }
.r420 { width: 420px; float: right; display: inline; }
.l430 { width: 430px; float: left; display: inline; }
.r430 { width: 430px; float: right; display: inline; }
.l440 { width: 440px; float: left; display: inline; }
.r440 { width: 440px; float: right; display: inline; }
.l470 { width: 470px; float: left; display: inline; }
.r470 { width: 470px; float: right; display: inline; }
.l490 { width: 490px; float: left; display: inline; }
.r490 { width: 490px; float: right; display: inline; }
.l500 { width: 500px; float: left; display: inline; }
.r500 { width: 500px; float: right; display: inline; }
.l510 { width: 510px; float: left; display: inline; }
.r510 { width: 510px; float: right; display: inline; }
.l540 { width: 540px; float: left; display: inline; }
.r540 { width: 540px; float: right; display: inline; }
.l550 { width: 550px; float: left; display: inline; }
.r550 { width: 550px; float: right; display: inline; }



/* decoration */
.red { color: #c00; }
.blue { color: #06c; }
.green { color: #090; }
.yellow { color: #ffc; }
.cyan { color: #0cc; }
.orange { color: #f60; }

.strong { font-weight: bold; }

/* margin padding */
.mb01 { margin: 0 0 1px; }
.mb03 { margin: 0 0 3px; }
.mb05 { margin: 0 0 5px; }
.mb07 { margin: 0 0 7px; }
.mb10 { margin: 0 0 10px; }
.mb11 { margin: 0 0 11px; }
.mb15 { margin: 0 0 15px; }
.mb20 { margin: 0 0 20px; }
.mb35 { margin: 0 0 35px; }
.mrb10 { border-width: 0 10px 10px 0; border-style: solid; border-color: #fff; }
.mlb10 { border-width: 0 0 10px 10px; border-style: solid; border-color: #fff; }
.mtb35 { margin: 35px 0 10px; }


sup,sub { font-size: 0.88em; }
.habita-i { padding: 20px 0; }
.habita-text { padding: 0 80px; }
.caution { border: 3px double #c00; margin: 0 0 35px; padding: 7px; background: #fcc; }
.caution-ttl { background: #c00; color: #fff; padding: 4px 8px; margin: 0 0 7px; }
.li-fl { float: left; width: 220px;}

.pankz1 { background: url(../images/pankz/build1.jpg); margin: 0 0 20px; }
.pankz2 { background: url(../images/pankz/build2.jpg); margin: 0 0 20px; }
.pankz3 { background: url(../images/pankz/build3.jpg); margin: 0 0 20px; }
.pankz4 { background: url(../images/pankz/build4.jpg); margin: 0 0 20px; }
.pankz5 { background: url(../images/pankz/build5.jpg); margin: 0 0 20px; }

.imgl { border-right: 10px solid #fff; }
.imgr { border-left: 10px solid #fff; }

/* ext 20100426 */
.ml30{margin-left:30px; margin-right:30px;}
.fsl{font-size:120%;}

.mt10{margin-top:13px;}

.mb7{margin-bottom:7px;}

#ssc li{list-style:none;}