@charset "utf-8";

/*---初期設定---*/
html,body{
height: 100%;
text-align:center;
}

body {
margin: 0;
padding: 0;
height: 100%;
letter-spacing: 0.03em;
font-family: Verdana,"MS P ｺﾞｼｯｸ","Osaka";
color: #555555;
font-size: 11px;
text-align:center;
background: url("../img/bodyBack.gif") repeat-x;
}

p {
marign: 0;
padding: 0;
line-height: 1.5em;
letter-spacing: 0.1em;
text-align: center;
}

p.alignLeft {
width: 580px;
text-align: left;
}

img{
border: none;
}
a:link {
color: #003366;
}
a:visited {
color: #660000;
}
a:hover, a:active {
color: #336699;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}

table {
width: 100%;
line-height: 1.5em;
letter-spacing: 0.03em;
font-family: Verdana,"MS P ｺﾞｼｯｸ","Osaka";
color: #555555;
font-size: 11px;
}
td {
}
th {

}
td.verticalMid100{
width: 100px;
vertical-align: middle;
text-align: left;
}
td.verticalMid80{
width: 80px;
vertical-align: middle;
text-align: left;
}
td.verticalMid{
vertical-align: middle;
text-align: left;
}
td.verticalMid input{
vertical-align: middle;
text-align: left;
}
td.verticalMid img{
vertical-align: middle;
text-align: left;
}

table td.alignCenter {
text-align: center;
}

form {
letter-spacing: 0.03em;
font-family: Verdana,"MS P ｺﾞｼｯｸ","Osaka";
color: #555555;
font-size: 11px;
}

h1 {
float: left;
margin: 20px 0 0 0;
padding: 5px 0 5px 10px;
width: 500px;
border-left: 5px solid #3399CC;
border-bottom: 1px solid #3399CC;
font-size: 14pt;
text-align: left;
}

h2.proTitle {
margin: 0;
padding: 0;
height: 24px;
width: 100%;
background: #003366;
font-size: 12px;
line-height: 24px;
text-align: center;
color: #FFF;
}

h3.attention {
float: left;
margin: 0;
padding: 0;
width: 560px;
height: 90px;
text-align: center;
border: none;
}

.backGray {
background: #F1F1F1;
}

//共通
#wrapper {
margin: 0 auto;
padding: 0;
width: 860px;
height: 100%;
text-align: left;
}
#header {
margin: 0 auto;
padding: 0;
width: 860px;
height: 60px;
text-align: center;
}
#mainMenu {
margin: 30px auto 0 auto;
padding: 0;
width: 860px;
height: 35px;
text-align: left;
}

#mainMenu li {
float: left;
margin: 0;
padding: 0;
width: 120px;
height: 35px;
}

#mainMenu li a:hover{
background: #CCC;
}

#contents {
margin: 10px auto;
padding: 0px;
width: 860px;
text-align: left;
}
#navi {
float: right;
margin-top: 10px;
padding: 0;
width: 260px;
height: 60px;
}

.col {
float: left;
margin: 5px 0;
padding: 0;
width: 860px;
}

.box160 {
float: left;
margin: 10px 5px;
padding: 0;
width: 160px;
border: 1px solid #DDD;
background: #FFF;
text-align: center;
}

.box160 table td{
text-align: left;
}
.box160 p{
margin: 0;
padding: 0;
text-align: center;
}

.box360_blue {
float: left;
margin: 10px 0 0 10px;
width: 360px;
text-align: left;
}
.box360_top {
float: left;
width: 360px;
height: 30px;
background: url("../img/box360_top.gif") no-repeat;
}
.box360_middle {
float: left;
padding: 5px 0 0 10px;
width: 360px;
background: url("../img/box360_middle.gif") repeat-y;
}

.box360_bottom {
float: left;
width: 360px;
height: 10px;
background: url("../img/box360_bottom.gif") no-repeat;
}
.box360_middle p {
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}
input.selectSubmit {
width: 120px;
height: 30px;
border: none;
background: url("../img/selectSubmit.gif") no-repeat;
}

.box480_blue {
float: left;
margin: 10px;
width: 480px;
text-align: left;
}
.box480_top {
float: left;
width: 480px;
height: 30px;
background: url("../img/box480_top.gif") no-repeat;
}
.box480_middle {
float: left;
padding: 5px 0 0 10px;
width: 480px;
background: url("../img/box480_middle.gif") repeat-y;
}
.box480_bottom {
float: left;
width: 480px;
height: 10px;
background: url("../img/box480_bottom.gif") no-repeat;
}
.box480_middle p {
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}
input.displaySubmit {
margin: 0;
padding: 0;
width: 120px;
height: 30px;
border: none;
background: url("../img/displaySubmit.gif") no-repeat;
}
.box640_blue {
float: left;
margin: 10px 0 0 10px;
padding: 0;
width: 640px;
text-align: left;
}
.box640_top {
float: left;
width: 640px;
height: 30px;
background: url("../img/box640_top.gif") no-repeat;
}
.box640_middle {
float: left;
padding: 0 0 0 10px;
width: 640px;
background: url("../img/box640_middle.gif") repeat-y;
}
.box640_bottom {
float: left;
width: 640px;
height: 10px;
background: url("../img/box640_bottom.gif") no-repeat;
}
.box640_blue .col{
width: 640px;
}
.box640_middle p {
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}

.box410 {
float: left;
margin: 0 5px;
padding: 0;
width: 410px;
border: 1px solid #DDD;
}

.box410 table{
width: 100%;
}

.box410 th.title {
margin: 0;
padding: 0;
background: #AAA;
height: 25px;
font-size: 12px;
border: none;
color: #FFF;
text-align: center;
}

.attention {
float: left;
margin: 30px auto;
padding: 10px;
width: 560px;
border: 1px solid #CCC;
}
.attention p{
text-align: left;
}
.adspace {
float: right;
margin: 30px auto;
padding: 0;
width: 160px;
}

input.startNavi {
margin: 0;
padding: 0;
width: 380px;
height: 120px;
background: url("../img/startNavi.gif") no-repeat;
border: none;
}
.recommend {
position: relative;
margin: 0;
padding: 0;
width: 80px;
height: 30px;
left: -30px;
top: 5px;
text-align: left;
}

table.spec {
margin: 0;
padding: 0;
width: 100%;
}
table.spec th{
margin: 0;
padding: 3px;
width: 150px;
border-bottom: solid 1px #EEE;
}
table.spec td{
margin: 0;
padding: 3px;
border-bottom: solid 1px #EEE;
border-left: solid 1px #EEE;
}

table.proAll {
margin: 0;
padding: 0;
}
table.proAll th {
margin: 0;
padding: 0;
height: 60px;
border-bottom: solid 1px #CCC;
text-align: center;
vertical-align: middle;
color: #FFF;
}
table.proAll th.title {
margin: 0;
padding: 0;
height: 40px;
border-bottom: solid 1px #CCC;
text-align: center;
background: #336699;
color: #FFF;
}
table.proAll td{
margin: 0;
padding: 0;
height: 60px;
border-bottom: solid 1px #CCC;
text-align: center;
}

table.proAll td.alignLeft {
text-align: left;
}
table.proAll th.selectButton {
margin: 0;
padding: 0;
width: 120px;
height: 60px;
text-decoration: none;
border-collapse: collapse;
}
table.proAll th.selectButton form {
margin: 0;
padding: 0;
}
table.proAll th.selectButton input {
margin: 0;
padding: 0;
width: 120px;
height: 60px;
border: none;
background: url("../img/gaugeSort_back.gif") no-repeat;
}
table.proAll th.selectButton input:hover {
background: url("../img/gaugeSort_backH.gif") no-repeat;
}

table.counterOption th{
width: 100%;
height: 2em;
color: #FFF;
background: #336699;
}

form.selectGauge {
margin: 0 0 20px 0;
text-align: left;
}
form.selectGauge p {
margin: 0;
padding: 5px;
text-align: left;
}
form.selectGauge p.button {
margin: 0;
padding: 5px;
text-align: center;
}

.actButton {
float: right;
margin: 0;
padding: 5px;
width: 120px;
height: 30px;
}

.actButton input.selectCounter {
margin: 0;
padding: 0;
width: 120px;
height: 30px;
border: none;
background: url("../img/gotoCounter.gif") no-repeat;
}
.actButton input.selectModule {
margin: 0;
padding: 0;
width: 120px;
height: 30px;
border: none;
background: url("../img/gotoModule.gif") no-repeat;
}
.actButton input.selectDirect {
margin: 0;
padding: 0;
width: 120px;
height: 30px;
border: none;
background: url("../img/gotoDirect.gif") no-repeat;
}
.actButton input.selectSystem {
margin: 0;
padding: 0;
width: 120px;
height: 30px;
border: none;
background: url("../img/gotoSystem.gif") no-repeat;
}
.actButton input.gotoEstimate {
margin: 0;
padding: 0;
width: 120px;
height: 30px;
border: none;
background: url("../img/gotoEstimate.gif") no-repeat;
}

.gaugeIcon {
margin: 0;
padding: 0;
width: 125px;
text-align: left;
}

#estimate {
float: left;
width: 820px;
margin: 20px auto;
padding: 10px;
border: solid 1px #EEE;
text-align: left;
}
#estimate .userName {
position: relative;
top: -110px;
width: 400px;
height: 160px;
text-align: left;
font-size: 18px;
background: #CCC;
}
#estimate .inquary {
position: relative;
margin: 0;
padding: 10px;
top: -110px;
width: 400px;
text-align: left;
border: 1px solid #CCC;
background: EAF2F9;
}
#estimate .inquary th{
width: 100px;
font-size: 12px;
text-align: right;
border: none;
}

#estimate .today {
text-align: right;
font-size: 12px;
}
#estimate .SMS {
text-align: right;
}

#estimate table {
margin-top: 0;
letter-spacing: 0.03em;
font-size: 16px;
empty-cells: show;
}

#estimate table th {
border-bottom: solid 1px #CCC;
text-align: center;
}

#estimate table td {
margin: 0;
padding: 5px;
}
#estimate table td.product {
border-bottom: solid 1px #EEE;
}
#estimate table td.productRight {
border-bottom: solid 1px #EEE;
text-align: right;
}

#estimate table td.total {
border-top: solid 1px #CCC;
text-align: right;
}

table.sendCheck {
font-size: 14px;
}
table.sendCheck td, th{
padding: 5px;
text-align: left;
}
table.sendCheck td.alignRight{
padding: 5px;
text-align: right;
}

.red {
margin-left: 10px;
font-size: 10px;
color: red;
}

#footer {
float: left;
margin: 30px 0 0 0;
padding: 0;
height: 80px;
width: 100%;
background: url("../img/footerBack.gif") repeat-x;
}

#A4print {
margin: 30px auto 0 auto;
padding: 0;
width: 640px;
height: 800px;
text-align: left;
}

#A4print p.title {
float: left;
margin: 30px 0;
width: 100%;
text-align: center;
font-size: 16px;
}
#A4print .col {
float: left;
margin: 5px 0;
padding: 0;
width: 640px;
}
#A4print .salesArea {
float: left;
margin: 80px 0 0 0;
padding: 0;
width: 640px;
}
#A4print .salesArea p {
margin: 0;
padding: 0;
font-size: 8px;
text-align: right;
}

#A4print p.box320 {
float: left;
margin: 40px 0 0 0;
padding: 0;
width: 320px;
border-bottom: 1px solid #000;
text-align: right;
}

#A4print p.today {
float: right;
margin-top: 50px;
text-align: right;
}
#A4print p.SMS {
float: right;
text-align: right;
}
#A4print p.priceTotal{
float: right;
margin: 20px;
padding: 0;
width: 300px;
border-bottom: 1px solid #CCC;
text-align: right;
font-size: 14px;
}

#A4print table {
float: left;
margin: 0;
padding: 0;
border-collapse: collapse;
empty-cells: show;
border: 1px solid #CCC;
}
#A4print table th {
margin: 0;
padding: 10px;
text-align: center;
border: 1px solid #CCC;
}
#A4print table td {
margin: 0;
padding: 15px;
text-align: center;
border: 1px solid #CCC;
}

#campaign {
float: left;
width: 800px;
text-align: left;
}

#campaign h1 {
border: none;
height: auto;
width: auto;
}

#campaign h2 {
border-left: solid 5px #336699;
margin: 10px 0;
padding: 5px;
font-size: 14px;
}
#campaign p {
margin: 0;
padding: 0;
text-align: left;
}

#campaign li {
padding-bottom: 5px;
line-height: 1.8em;
}

#campaign ul.round {
padding-left: 20px;
list-style: disc;
}