@charset "UTF-8";
@import url("../../css/life.css");

/* -------------- customer -----------------*/

.customer .contents { margin: 0 80px;}

div.block { clear: both; background: none;}

.customer h3 {
padding: 5px 15px;
border: 1px solid #CCC;
background: #FFD9D9 url(../img/ttl_bg2.jpg) center repeat-x;
color: #4B4B4B;
font-size: 1.2em;
letter-spacing: 1px;
}
.customer h3 a { color: #4B4B4B;}

.customer p { margin: 25px;}
.customer ol { margin: 25px 15px 0; padding: 0 0 0 25px;}

p.howto-bt, p.net-bt, p.tell-bt {
width: 392px;
height: 69px;
margin: 0 auto 30px;
padding: 10px 0 0 11px;
}
p.howto-bt { background: #FFF2C7 url(../customer/img/howto_bt_bg.gif);}
p.net-bt { background: #FFF2C7 url(../customer/img/net_bt_bg.gif);}
p.tell-bt { background: #FFF2C7 url(../customer/img/tell_bt_bg.gif);}

p.howto-bt a,
p.net-bt a,
p.tell-bt a {
display: block;
width: 381px;
height: 58px;
font-size: 1px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: left top;
}
p.howto-bt a { background-image: url(../customer/img/life_bt.gif);}
p.net-bt a { background-image: url(../customer/img/net_bt.gif);}
p.tell-bt a { background-image: url(../customer/img/tell_bt.gif);}
p.howto-bt a:hover,
p.net-bt a:hover,
p.tell-bt a:hover { background-position: left bottom;}


/* -------------- howto -----------------*/

.howto .contents { margin: 0;}

.howto h3 {
margin: 0 0 15px;
padding: 0 0 1px;
border-bottom: 1px solid #00947E;
color: #00947E;
}

div.block { clear: both; background: none;}

.howto div.block div {
float: left;
width: 180px;
margin: 0 10px;
padding: 0 0 25px 66px;
background-repeat: no-repeat;
background-position: left top;
}
*html .howto div.block div { margin: 0 5px;}
div.b01 { background-image: url(../customer/img/p_01.gif);}
div.b02 { background-image: url(../customer/img/p_02.gif);}
div.b03 { background-image: url(../customer/img/p_03.gif);}
div.b04 { background-image: url(../customer/img/p_04.gif);}
div.b05 { background-image: url(../customer/img/p_05.gif);}
div.b06 { background-image: url(../customer/img/p_06.gif);}
div.b07 { background-image: url(../customer/img/p_07.gif);}
div.b08 { background-image: url(../customer/img/p_08.gif);}
div.b09 { background-image: url(../customer/img/p_09.gif);}
div.b10 { background-image: url(../customer/img/p_10.gif);}
div.b11 { background-image: url(../customer/img/p_11.gif);}
div.b12 { background-image: url(../customer/img/p_12.gif);}
div.b13 { background-image: url(../customer/img/p_13.gif);}
div.b14 { background-image: url(../customer/img/p_14.gif);}

.howto .contents li {
margin: 2px 0 2px 3px;
padding: 0 0 0 9px;
background: url(../../img/arrow.gif) left 5px no-repeat;
list-style-type: none;
}

/* -------------- howans -----------------*/

.howans .contents { margin: 0 50px;}

.howans h3 {
background: #FCFFFC;
color: #FF6600;
}

.howans h4 {
padding: 5px 12px;
background: #444499;
color: #EEE;
font-size: 1.1em;
}

.howans h5 {
margin: 10px 20px;
font-size: 1.1em;
}

.howans .contents p { margin: 20px 20px 30px;}
.howans ol { margin: 10px 20px 10px 46px;}

div.need {
border: 1px solid #333399;
background: #FCFCFF;
}

div.need ul { margin: 15px 20px 15px 45px;}
div.need li { margin: 5px 0;}

ul.att { margin: 0 0 30px 40px; list-style-type: none;}
ul.att li { padding: 1px 0 1px 1.2em; text-indent: -1.2em;}
/*ul.att li:first-letter { padding-right: 0.2em; font-family: "ＭＳ ゴシック", "Osaka－等幅";}*/

div.CBF {
height: 80px;
margin: 30px 10px 15px;
padding: 0 0 0 80px;
background-repeat: no-repeat;
}
div.CBF h3 { color: #559955;}
div.CBF ul { margin: 5px 0 5px 22px;}
div.CBF li { 
float: left;
padding: 0 20px 0 12px;
background: url(../../img/arrow.gif) left 5px no-repeat;
list-style-type: none;
white-space: nowrap;
}

.howans div.back { clear: both; margin: 10px;}
.howans div.back a { padding: 0 0 0 13px; background: url(../../img/arrow_l.gif) left center no-repeat;}

/* -------------- tell -----------------*/

div.tell-img {
width: 530px;
margin: 40px auto 40px;
padding: 18px 18px;
border: 1px solid #FED7BD;
background: #FEE7DD;
text-align: center;
}
.tell .contents ul { margin: 30px 120px 25px 130px;}
.tell .contents li { margin: 8px 0;}


/* -------------- internet -----------------*/

.internet h3 {
margin: 20px 0 18px;
padding: 0 8px;
border-left: 8px solid #6666CC;
background: #FFF;
font-size: 1.2em;
letter-spacing: 2px;
color: #555555;
}
div.confirm { margin: 30px 10px;}
div.confirm form {
margin: 30px 0;
text-align: center;
}
div.confirm input { padding: 3px 6px;}


/* -------------- form -----------------*/

.contents { margin: 0 80px;}

.form em { color: #CC0000; font-weight: bolder; font-style: normal;}

.form form {
padding: 25px;
border: 1px solid #FEE3BB;
background: #FEF3EB;
}

.form form a { text-decoration: underline;}

.form form strong {
color: #DD0000;
font-weight: normal;
}

.form h3 {
margin: 50px 0 18px;
padding: 0 8px;
border-left: 8px solid #6666CC;
background: #FFF;
font-size: 1.2em;
letter-spacing: 2px;
color: #555555;
}
.form h4 {
margin: 0 10px 5px;
color: #CC0000;
font-size: 1.1em;
letter-spacing: 1px;
}
.form form ol {
margin: 0 10px 30px;
padding: 15px 20px 15px 35px;
border: 1px dotted #CC3333;
background: #FFFCFC;
}
.form form ol li { margin: 7px 0;}

table.input1,
table.input2,
table.input3 { width: 585px;}

table.input1 { background: #BBBBBB;}
table.input1 td {
padding: 7px;
background: #FEF3EB;
white-space: nowrap;
vertical-align: top;
text-align: center;
}
table.input1 td strong { font-size: 0.9em;}
p.att {
padding-left: 1em;
text-indent: -1em;
color: #CC0000;
}
table.input2,
table.input3 { background: #FFF;}
table.input2 th,
table.input3 th {
padding: 8px 10px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
background: #FFFFE6;
text-align: left;
font-weight: normal;
}
table.input2 td,
table.input3 td { padding: 8px 10px;}
table.input2 td td,
table.input3 td td { padding: 4px 7px;}
table.input2 td th,
table.input3 td th { padding: 4px 7px; background: #FFD7D7; text-align: center;}

p.t-center { margin: 20px 0; text-align: center;}
p.t-center input { padding: 3px 8px; cursor: pointer;}
.form ul.att { margin: 0 0 20px 15px;}