body {
background-color: #f5f5f5;
}

#header {background-color: #ffffff;}
#header h1 {margin: 0;}
#headerArea,.navbar,#wrapper {
width: 860px;
margin: 0 auto;
}

#footer {
background-color: #cccccc;
padding: 40px 0;
}
#footer p {
width: 860px;
margin: 10px auto;
font-size: 12px;
}
.text-error {
  color: #b94a48;
  font-weight: bold;
}

#nav-area {
margin-bottom: 20px;
background-color: #222222;
font-size: 11.99px;
font-weight: bold;
}
.navbar {
border: none;
border-radius: none;
min-height: 0;
}
.navbar li a {
padding: 10px 9px;
color: #ffffff !important;
border: 1px solid #252525;
}
.navbar li.active a,.navbar li a:hover {
color: #252525 !important;
background-color: #ffffff !important;
}
.container-fluid,.navbar-collapse {padding: 0;}




h2.t-red,h3.t-red {
margin-bottom: 0;
padding: 3px 5px 3px 10px;
background-color: #f29669;
border-left: 35px solid #da4118;
color: #ffffff;
font-size: 180%;
font-weight: bold;
}

h3.t-red {
padding: 5px 10px;
border-left: none;
font-size: 120%;
}



.info-area {
margin: 40px 0 30px;
padding: 20px 20px 10px 20px;
background-color: #ffffff;
overflow: hidden;
}




.process-area {
margin-bottom: 40px;
padding: 30px 0;
border-bottom: 3px dotted #999999;
}
.process-area li {
position: relative;
width: 33%;
float: left;
font-size: 130%;
font-weight: bold;
color: #999999;
text-align: center;
list-style-type: none;
}
.process-area li:after {
content: '';
width: 15px;
height: 15px;
position: absolute;
left: 47%;
bottom: -23px;
background-color: #999999;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.process-area li.current:after {background-color: #ffb503;}




/* table */
table {
width: 100%;
background-color: #ffffff;
table-layout: fixed;
}
tr.line {border-top: 1px solid #cccccc;}
th {background-color: #eeeeee;}
th, td {
padding: 15px;
vertical-align: top;
}
table .required {
margin-left: 5px;
padding: 2px 5px;
color: #da4118;
font-size: 85%;
background-color: #ffffff;
}


table .w20 {width: 20%;}
table .w30 {width: 30%;}
table .w50 {width: 50%;}
.table-red {border: 1px solid #f29669;}




/* accordion */
.panel-group .panel-heading {padding: 0}
.panel-group .panel-heading a {
display: block;
padding: 10px 35px 10px 15px;
background: #5a5a5a url(/static/images/icon/icon-arrow-btm.png) no-repeat 99% center;
font-weight: bold;
color: #ffffff;
}
.panel-group .panel-heading a:hover {
background-color: #cccccc;
text-decoration: none;
}
/*.panel-qa .panel-collapse {
padding-top: 50px;
background: url(/static/images/icon/icon-answer.png) no-repeat 15px 15px;
}
*/
.panel-default>.panel-heading+.panel-collapse>.panel-body {
padding-top: 50px;
background: url(/static/images/icon/icon-answer.png) no-repeat 15px 15px;
}

/* form */
.form-control,.checkbox {
width: 200px;
float: left;
margin: 0 20px 0 0;
}


.checkbox-kikkake {
margin-top: 1px !important;
width: 45% !important;
}

.checkbox-kikkake2 {
margin-top: 1px !important;
width: 100% !important;
}


.radio dd {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
}


.short {width: 90px;}
.wide {width: 400px;}
.paper-name {
font-size: 140%;
font-weight: bold;
}


.btn-default {
margin-right: 20px;
padding: 5px 10px;
background-color: #eeeeee;
border: 2px solid #cccccc;
}
.btn-next {
margin: 20px;
padding: 10px 80px;
font-size: 160%;
font-weight:  bold;
color: #ffffff;
background: rgb(242,150,105);
background: -moz-linear-gradient(top,  rgba(242,150,105,1) 0%, rgba(218,65,24,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,150,105,1)), color-stop(100%,rgba(218,65,24,1)));
background: -webkit-linear-gradient(top,  rgba(242,150,105,1) 0%,rgba(218,65,24,1) 100%);
background: -o-linear-gradient(top,  rgba(242,150,105,1) 0%,rgba(218,65,24,1) 100%);
background: -ms-linear-gradient(top,  rgba(242,150,105,1) 0%,rgba(218,65,24,1) 100%);
background: linear-gradient(to bottom,  rgba(242,150,105,1) 0%,rgba(218,65,24,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f29669', endColorstr='#da4118',GradientType=0 );
}
.btn-next:hover {
background: #d34500;
color: #ffffff;
}

.btn-clear {
margin: 20px;
padding: 10px 80px;
font-size: 160%;
font-weight:  bold;
color: #ffffff;
background: rgb(204,204,204);
background: -moz-linear-gradient(top,  rgba(204,204,204,1) 0%, rgba(153,153,153,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(153,153,153,1)));
background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
background: -ms-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
background: linear-gradient(to bottom,  rgba(204,204,204,1) 0%,rgba(153,153,153,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#999999',GradientType=0 );
}
.btn-clear:hover {
background: #999999;
color: #ffffff;
}


.float-l {float: left; margin: 0 15px 15px 0;}
.float-r {float: right; margin: 0 0 15px 15px;}

.align-r {text-align: left;}
.align-c {text-align: center;}
.notice {
margin: 40px 0;
font-size: 12px;
}


.font-s {font-size: 85%;}
.font-b {font-weight: bold;}

/* margin */
.mt0 {margin-top: 0;}
.mt20 {margin-top: 20px;}
.mb20 {margin-bottom: 20px !important;}

.price {
font-size: 140%;
font-weight: bold;
color: #ff0000;
}
.regArea {
padding: 20px;
border: 1px solid #cccccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 200px;
overflow: auto;
}


@media screen and (max-width:768px) {
#hlogo {
width: 142px !important;
height: auto;
}


img {
width: 100%;
height: auto;
}
#headerArea,.navbar,#wrapper,#footer p {
width: 95%;
}

.checkbox-kikkake {
 width: 100% !important;
}

.container-fluid,.navbar-collapse {padding: 0 20px;}


th,td {
display: inline-block;
width: 100%;
padding: 5px 10px;
}
table .w20 {width: 100%;}
table .w30 {width: 100%;}
table .w50 {width: 100%;}
table .align-r {text-align: left;}
.postalcode .form-control {
float: left;
width: 80px;
margin-right: 20px;
}

table.ui-datepicker-calendar th,
table.ui-datepicker-calendar td {
display: table-cell;
width: auto;
}


.sp-clear {clear: both;}
.form-control,.checkbox {
width: 100%;
float: none;
margin: 10px 0;
}


.wide {
width: 100% !important;
}

}

#campaign {
  text-align:center;
}