html, body{
  height:100%;
  background-color: #fff;
}
#contents{
  width: 100%;
  position: relative;
  height:auto !important; /*IE6対策*/
  height: 100%; /*IE6対策*/
  min-height: 100%;
}
form{
  background-color:#fff;
  padding:10px;
}
address {
  text-align: center;
  font-size: 10px;
  font-style: normal;
}
footer {
  width: 100%;
  height: 40px;
  padding: 12px 0 40px;
  color: #c0c0c0;
}

.margin-top-7px{
  margin-top: 7px;
}

.home-icon {
  color: #222E68;
}

.home-icon:hover {
  color: #294083;
}

.summary .today dd      { width: 30%; }@charset "UTF-8";
/*
*                       { margin: 0; padding: 0;
                          -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html, body              { min-height: 100%; overflow-x: hidden; }
html                    { height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #e5e5e5; }
body                    { height: 100%; text-align: left; color: #333; font-size: 12px; line-height: 1.5; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ','ＭＳ Ｐゴシック',Verdana,sans-serif; }
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
h1, h2, h3, h4, h5      { line-height: 1.2em; }
ol, ul                  { list-style: none; }
img                     { border: 0; }
/*p                       { margin: 0; }*/
b, strong               { font-weight: bold; }
abbr[title]             { border-bottom: 1px dotted; }
input,
textarea,
button,
select                  { margin: 0; line-height: normal; vertical-align: baseline; outline: none; font-size: 100%; }
button,
input[type="button"],
input[type="reset"],
input[type="submit"]    { cursor: pointer;
                          -webkit-appearance: button; -moz-appearance: button; }
input[type="checkbox"]  { vertical-align: middle; margin-right: 5px; }
textarea                { overflow: auto; height: 78px; }
/*img                     { width: 100%; height: auto; vertical-align: bottom; }*/
input[type="text"],
input[type="password"],
input[type="date"],
textarea,
select                  { border-radius: 0 !important; }
input[type="text"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
select                  { height: 3.5em !important; }
select                  { position: relative; text-indent: 0.01px; text-overflow: "";
                          /*background: #fff url("../img/icon-triangle.png") right center no-repeat;*/
                          /*-webkit-appearance: none; -moz-appearance: none; appearance: none; */}
/*
select::-ms-expand      { display: none; }
*/
input[type="password"]  { border-radius: 4px !important; }
/* Links
-----------------------------------------------------------------------------*/
a:link,
a:visited               { outline: none; color: #1eb7f0; text-decoration: none; }
a:hover,
a:active                { outline: none; text-decoration: underline; }
a:hover                 { cursor: pointer; }
a.img                   { padding: 0 !important; border: none !important; background: none !important; }
a:hover img             { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: “alpha( opacity=80 )”; }

a.carousel-control.left span      { font-size: 200%; margin-top:-15px; }
a.carousel-control.right span     { font-size: 200%; margin-top:-15px; }
a                       {text-decoration: none !important; }
/* Layout
-----------------------------------------------------------------------------*/
h1                      { margin: 15px 0 0; }
h2                      { margin-top: 10px; margin-bottom: 10px; padding-bottom: 5px; /*border-bottom: 1px solid #333; text-align: center;*/ font-size: 20px; font-weight: normal; }
h3                      { margin-top: 10px; margin-bottom: 10px; padding-bottom: 5px; /*text-align: center;*/ font-size: 18px; font-weight: normal; }
h4                      { font-weight: bold; font-size: 14px; }
h5                      { margin-top: 15px; margin-bottom: 0; }
h5 span                 { display: inline-block; padding: 7px; color: #fff; background: #3d3e2e; font-weight: bold; font-size: 12px; }
ul                      { list-style: none; }
table                   { width: 100%; }
th                      { height: 30px; border: none; color: #333; font-weight: bold; background: #e5e5e5; }
td                      { height: 40px; border-left: none; }
th,td                   { padding-left: 5px; padding-right: 5px; border-top: 1px solid #f0f0f0; }
dt,
dd                      { height: auto; line-height: 16px; padding: 10px; vertical-align: middle; }
dt                      { width: 120px; height: 36px; padding: 10px;  }
dd                      { margin-top: -36px; padding: 10px 10px 10px 120px; border-bottom: 1px solid #fff; }
select                  { display: block; }
label                   { display: inline-block; color: #555; }

.pc                     { display: inline-block; }
.sp                     { display: none; }

.main-content           { overflow-x: hidden; overflow-y: auto; position: relative; min-width: 320px; margin: 0 auto; background: #e5e5e5; }
.overlay                { position: fixed; top: 0; bottom: 0; left: 0; z-index: 99; display: none; overflow: hidden; width: 100%; height: 100%; min-height: 100%; background: rgba(30,30,30,.70); }

.wrapper                { max-width: 980px; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; }
.content                { width: 100%; margin: 0 auto; padding: 0 10px; }
.content h2             { margin-bottom: 20px; text-align: center; font-size: 18px; color: #333; }
.content h2.white       { color: #fff; }
.content h2 i           { margin-top: -5px; margin-right: 10px; }

.box                    { width: 100%; height: 100%; margin-top: 10px; }

.ruby                   { display: block; color: #aaa; font-size: 10px; font-weight: normal; }
.name                   { color: #333; font-size: 22px; font-weight: bold; }
.unit                   { display: inline-block; font-size: 10px !important; margin-left: 5px; }
.memo                   { padding: 10px; }
.tag                  { display: inline-block; height: 16px; line-height: 16px; vertical-align: middle; margin-top: -4px; margin-right: 3px; padding: 1px 3px; text-align: center; color: #fff; font-size: 10px; font-weight: bold; background: #ff272f; }
.tag.new              { background: #34c849; }
.tag.event            { background: #fdbc40; }
.tag.important        { background: #fc615c; }

.description            { margin-top: 20px; padding: 0 !important; border-radius: 0 0 5px 5px; text-align: center; background: #fff; }
.description a          { display: block; width: 100%; height: 100%; padding: 10px; }

.password li            { padding-top: 5px; padding-bottom: 5px; text-align: left; }
.password p             { text-align: left; }
.password label         { display: block; padding-bottom: 7px; }
.password i             { margin-top: -5px; margin-right: 5px; }
.password .box          { padding: 10px; background: #fff; }

.top                    { padding: 0; }
.top .heading .btn      { background: #333; }
.top .heading .btn:hover { border: 1px solid #eee; color: #fff; background: #666; }
.top .heading .btn i    { margin-top: -5px; }
.top .result li         { position: relative; border-top: 10px solid #e5e5e5; }
.top .result li:first-child { border-top: none; }
.top .result li:last-child { border-top: 0; }
.top .result li li      { border-top: none; }
.top .result li a       { display: block; width: 100%; height: 100%; text-decoration: none; }
.top .result dt,
.top .result dd         { line-height: 24px; padding: 0 0 13px; }
.top .result dt         { width: 50px; padding: 0; }
.top .result dd         { position: relative; margin-top: -52px; padding-left: 48px; color: #fff; font-size: 20px; border-bottom: none; }
.top .result dd .name   { font-size: 20px; font-weight: normal; }
.top .result p          { font-size: 12px; color: #fff; }
.top .result i          { margin-top: -5px; margin-right: 2px; }
.top .result .box       { width: auto; height: auto; min-height: 130px; margin-top: 0; }
.top .result .upper     { position: relative; }
.top .result .title     { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 10px 0;
                          background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7)); }
.top .result .title p   { margin-top: 0; word-break: break-word; }
.top .result .title i   { margin-top: -10px; }
.top .result .title dd  { border-bottom: none; }
.top .result .lower     { padding: 10px 10px 3px; background: #fff; }
.top .result .lower p   { color: #333; }
.top .result .lower .col1 { width: 40%; }
.top .result .lower .col1 p {font-size: 16px; }
.top .result .lower .col1 p.contract { color: #bbb; }
.top .result .lower .col2 { width: 60%; text-align: right; }
.top .ribbon            { position: absolute; top: 0; right: 0; z-index: 2; width: 100px; height: 100px; }
.top .ribbon.new        { width: 66px; height: 66px; }

.count-contract         { margin-top: 0 !important; font-size: 14px !important; }
.count-contract i       { margin-top: -20px !important; margin-right: 10px !important; }
.count-contract span    { display: inline-block; margin-right: 5px; margin-left: 5px; font-size: 32px; }
.count-contract span.wind { color: #ef78e1; }
.count-contract span.water { color: #7dd6f9; }
.count-contract span.solar { color: #f1bf34; }
.count-contract span.bio   { color: #6dcc36; }

.detail                 { padding: 0; }
.detail .box            { padding: 10px 10px 15px; background: #fff; }
.detail dt,
.detail dd              { line-height: 24px; padding: 0 0 10px; }
.detail dt              { width: 40px; padding: 0; }
.detail dd              { margin-top: -30px; padding-left: 40px; font-size: 14px; }

.heading                { margin: 10px 0; }
.heading a              { display: block; width: 100%; height: 100%; line-height: 40px; vertical-align: middle; text-align: center; }
.heading .table li      { height: 40px; vertical-align: middle; padding: 0; }
.heading .table li i    { margin-right: 5px; }
.heading .btn           { width: 100%; min-width: 20%; border-radius: 0; color: #fff; font-size: 11px; border-color: #eee; background: #fff; }

.more                   { padding: 15px 0 5px !important; }
.more a                 { padding: 0; border: 1px solid #ccc; font-weight: normal !important; }

.validation             { margin-top: 5px; color: #999; }
.warning                { color: #fc3; }
.fatal                  { color: #ff4d4d; }

.input h5               { clear: both; }
.input h5:first-child   { margin-top: 0; }
.input dl               { display: block; overflow: hidden; padding: 10px; background: #fff; zoom: 1; }
.input dt,
.input dd               { display: block; width: 100%; height: auto; padding: 5px 0; }
.input dt               { line-height: 20px; border-top: 1px dotted #ccc; color: #333; font-weight: bold; }
.input dt:first-child   { border-top: none; }
.input dd               { margin-top: 0; padding-top: 0; padding-bottom: 10px; color: #666; }
.input dd .note         { margin-top: 5px; color: #999; font-size: 10px; }
.input dd span          { margin-left: 3px; margin-right: 3px; }
.input select + input,
.input input + input    { margin-top: 7px; }
.input .file-select     { margin-top: 10px; }
.input .file-select div { padding: 5px; background: #dfdfdf; }
.input .btn:first-child { margin-right: 10px; }

.comment p,
.comment textarea       { margin-top: 10px; }
.comment .box           { background: #fff; }
.comment .box-inner     { padding: 10px; }
.comment .upper         { padding: 10px 10px 15px; text-align: center; background: #fff; }
.comment .lower         { border-top: 1px solid #f0f0f0; text-align: center; background: #d6d6d6; }
.comment .lower li      { float: none; vertical-align: middle; padding: 0; }
.comment .lower .col1   { width: 60%; text-align: left; }
.comment .lower .col2   { width: 40%; text-align: right; }
.comment .rate          { display: inline-block; margin-top: 15px; margin-bottom: 15px; }
.comment .rate img      { width: 25px; }
.comment .name          { margin-top: 0; font-size: 14px; }
.comment .list          { margin-top: 15px; }
.comment .list li       { padding: 10px; }
.comment .list li:nth-child(even) { background: #f0f0f0; }
.comment .list li li    { padding: 0; }
.comment .list li li:last-child { text-align: right; }
.comment .list li li:nth-child(even) { background: none; }
.comment .list li li p  { margin-top: 0; }
.comment .list li.more  {  background: #e5e5e5; }
.comment .list .text    { margin-top: 5px; }

.registration.box       { background: #fff; }
.registration li        { vertical-align: middle; }
.registration .col1,
.registration .col3     { width: auto; }
.registration .col2     { width: 2em; text-align: center; }

.note                   { margin-top: 5px; color: dimgray; }
.error                  { margin-top: 10px; margin-bottom: 10px; color: #fa2c2c; }
.required               { display: inline-block; vertical-align: middle; margin-left: 0; padding: 1px 5px; color: #fc4530; font-size: 12px; }
.required.tag         { float: right; margin-top: 5px; color: #fc4530; background: none; }

.terms .box             { padding: 10px; background: #fff; }
.box-scroll             { overflow-x: hidden; overflow-y: auto; margin-top: 10px; padding: 10px; background: #f0f0f0; }
.box-scroll h4          { margin-top: 8px; }

.message                { margin-top: 20px; margin-bottom: 30px; padding: 10px; background: #f0f0f0; }
.message i              { margin-bottom: 10px; }
.message p              { margin-bottom: 10px; }

.credit-card .box       { padding: 10px; background: #fff; }
.credit-card .message   { margin-top: 10px; margin-bottom: 0; }
.credit-card .message li { margin-top: 8px; }

.contract-list li       { margin-top: 3px; margin-left: 10px; font-weight: bold; font-size: 14px; list-style: inside; }
.contract-list li:first-child { margin-left: 0; font-weight: normal; list-style: none; }

.contract h5:first-child { margin-top: 0; }
.contract h5 + div      { padding: 10px; background: #fff; }
.contract ul            { margin-top: 15px; }
.contract ul:first-child { margin-top: 0; }

.contract .total        { color: #f00; font-weight: bold; font-size: 16px; text-align: center; }
.contract .btn          { color: #fff; }
.contract .terms h4     { margin-top: 10px; }
.contract .terms h4:first-child { margin-top: 0; }
.contract .box li       { vertical-align: middle; }
.contract .plan .col1   { width: 85%; padding-left: 10px; }
.contract .plan .col2   { width: 62px; text-align: right; }
.contract .plan .name   { font-size: 18px; }
.contract .selected     { padding: 0; }
.contract .selected li  { padding: 5px; border-top: 1px solid #ccc; }
.contract .selected a   { font-size: 16px; }
.contract .selected .col1 { width: 10%; text-align: center; }
.contract .selected .col2 { width: auto; text-align: left; }
.contract .selected .col3 { width: 62px; padding-right: 10px; text-align: right; }
.contract li .btn       { margin-right: 0 !important; }

.cancel-contract label  { margin-right: 5px; }
.cancel-contract .box   { padding: 10px; background: #fff; }

.registration h3        { border-bottom: 1px solid #333; }
.registration dl        { margin-top: 10px; }
.registration dd .btn   { margin-top: -10px; margin-left: 10px; }
.registration .box      { padding: 10px; background: #fff; }

.confirm dd span        { line-height: 22px; color: #333; font-size: 14px; }

.complete h3            { border-bottom: none; }
.complete ul            { display: inline-block; min-width: 60%; margin-top: 15px; text-align: left; }
.complete ul:first-child { margin-top: 0; }
.complete .box          { padding-top: 10px; border-radius: 5px; text-align: center; }
.complete .box-outer    { background: #fff; }
.complete .company-img  { margin-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 20px; width: 100%; }
.complete .company-img + div { margin: 10px; text-align: left; }
.complete .note         { margin: 15px auto 0; }
.complete .btn          { color: #fff; }

.contact textarea       { width: 100%; }
.contact table          { width: 100%; border: none; }
.contact td             { height: auto; padding: 0; border: none; background: none; }
.contact label          { margin-bottom: 0; font-size: 12px; }
.contact p              { margin-bottom: 5px; }
.contact a              { color: #0095ff; }
.contact .list          { height: 150px; overflow-x: hidden; overflow-y: scroll; background: #fff; }
.contact .list a:hover li { background: #eee; }
.contact .list li       { border-bottom: 1px dotted #999; }
.contact .list li li    { vertical-align: middle; padding: 5px; border-bottom: none; color: #555; }
.contact .list .col1    { width: 8em; text-align: center; }
.contact .list .col2    { width: auto; }
.contact .list .col3    { width: 40px; text-align: center; color: #999; }
.contact .list .col4    { width: 30px; }
.contact .badge         { min-width: 22px; height: 22px; line-height: 22px; vertical-align: middle; }
.contact .badge.gray    { background: #ccc; }
.contact .title         { font-size: 14px; font-weight: bold; }
.contact .profile       { padding: 10px; text-align: center; }
.contact .profile img   { width: 100px; margin-top: 10px; }
.contact .profile p     { margin-top: 10px; }
.contact .tel           { font-size: 14px; }
.contact .tel a         { color: #0095ff; font-weight: bold; }
.contact .tel i         { margin-right: 5px; }
.contact .box li        { padding-top: 10px; }
.contact .box img       { width: 50px; }
.contact .box .name     { font-size: 14px; }
.contact .inner-box     { position: relative; display: block; height: auto; margin-left: 91px; padding: 10px; border: 1px solid #ccc; background: #f1f1f1; }
.contact .inner-box:before { content: ""; position: absolute; top: -9px; left: 30px; z-index: 1; display: block; width: 0; border: 10px solid transparent; border-bottom-color: #f1f1f1; border-top-width: 0; }
.contact .inner-box:after { content: ""; position: absolute; top: -10px; left: 30px; display: block; width: 0; border: 10px solid transparent; border-bottom-color: #ccc; border-top-width: 0; }
.contact .inner-box.new { margin-left: 0; }
.contact .inner-box.new .contact-arrow { top: -11px; }
.contact .inner-box .contact-arrow { position: absolute; top: -14px; left: 36px; z-index: 1; }
.contact .inner-box li  { clear: both; padding-top: 10px; padding-bottom: 10px; border-top: 1px dotted #ccc; }
.contact .inner-box .left-box { padding: 0; }
.contact .inner-box .left-box img { width: 50px; margin-bottom: 5px; }
.contact .inner-box li:first-child { border-top: none; }
.contact .inner-box .right-box { padding: 0; }
.contact .inner-box .lower-box{ margin-top: 0; padding: 0 !important; }
.contact .upper-box     { padding: 15px 10px 10px !important; background: #fff; }
.contact .upper-box label { margin-left: 0 !important; margin-top: 10px; margin-bottom: 3px; color: #333; }
.contact .lower-box     { height: auto; padding: 10px 10px 15px !important; text-align: center; background: #f1f1f1; }
.contact .lower-box .btn { width: 100px; }
.contact .input-box     { margin-top: 10px; margin-bottom: 10px; padding: 0; border: 1px solid #bbb; }
.contact .input-box li  { padding: 0; }
.contact .input-box select { margin-right: 10px; }
.contact .input-box td,
.contact .lower-box td  { display: block; width: 100%; }
.contact .lower-box td.align-right { margin-top: 10px; padding-top: 10px; padding-bottom: 10px; text-align: center !important; background: #e5e5e5; }
.contact .input-box label { display: inline-block; margin-left: 7px; }
.contact .input-box .sprite { margin-right: 2px; }
.contact .input-box input[type="file"] { width: 100%; }
.contact .left-box      { float: left; width: 70px; height: auto; padding: 20px 20px 20px 10px; }
.contact .right-box     { padding: 20px 10px 10px 10px; }
.contact .right-box img { width: 100%; }
.contact .right-box .lower-box { margin-top: 5px; }
.contact .inline li     { clear: none !important; float: left; padding-top: 0 !important; padding-bottom: 0 !important; border: none !important; }
.contact .name          { font-size: 16px; font-weight: bold; }
.contact .attachment    { word-break: break-all; color: #666; }
.contact .control-box li { padding-right: 10px; }
.contact .hidden        { display: none; }
.contact .btn           { margin-right: 0; margin-left: 0; }

.grid-record-listitem label { text-align: left; font-weight: normal; width: 160px; }

.web-details h5         { margin-top: 20px; margin-bottom: 15px; border-bottom: 1px solid #333; text-align: center; color: #fff; }
.web-details h5 span    { color: #fff; font-size: 14px; font-weight: normal; font-size: 12px; }
.web-details li         { padding-top: 10px; padding-bottom: 10px; text-align: center; }
.web-details li.col1    { width: 9em; font-weight: bold; }
.web-details dl         { padding: 0 0 0; }
.web-details dl + dl    { padding-top: 0; }
.web-details dt,
.web-details dd         { display: block; width: 100%; height: auto; padding: 5px 10px; }
.web-details dt         { width: 17em; line-height: 20px; padding:8px 5px 8px; color: #333; font-weight: bold; }
.web-details dd         { margin-top: -27px; padding: 0 10px 9px 0; text-align: right; color: #666; border-bottom: 1px dashed #222E68;}
.web-details .invoicedetail dd { margin-top: -23px; padding: 0 10px 5px 0; text-align: right; color: #666; }
.web-details p.label    { margin-top: 15px; padding: 5px 10px; color: #333; background: #e5e5e5; }
.web-details .box       { padding: 0 10px; background: #fff; }
.web-details .filter    { margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; color: #fff; background: #333; }
.web-details .name      { text-align: center; font-size: 16px; }
.web-details .detail    { margin-top: -10px; padding: 0 10px 5px; border: 1px solid #e5e5e5; }
.web-details .detail dt { padding-left: 0; font-size: 12px; }
.web-details .detail dd { padding-right: 0; border: none; font-size: 12px; font-weight: normal; }
.web-details .border .detail { background: #f6f6f6; margin-top: 0; padding-top: 0; padding-bottom: 0; }
.web-details .border .detail dl { margin-top: 0; margin-bottom: 0; }
.web-details .border .detail dt { font-weight: normal; }
.web-details .border .detail dd { border-bottom: 1px dotted #ccc; }
.web-details .border .detail dd:last-child { border-bottom: none; }
.web-details .message.compare { margin-top: 10px; margin-bottom: 10px; }
.web-details .message.compare p { margin-bottom: 5px; }
.web-details .message.compare p:last-child { margin-bottom: 0; }
.web-details .message.compare span { margin-left: 3px; margin-right: 3px; font-weight: bold; }
.web-details .message.compare + dl { padding-top: 0; }
.web-details .note      { margin-top: 20px; margin-bottom: 30px; text-align: right; }
.web-details .note a    { text-decoration: underline; }
.web-details .note i    { margin-top: -5px; margin-right: 5px; }
.web-details .note a:hover i { background-position: -120px -10px; }
.web-details .grid-record-listitem { padding-top: 10px; padding-bottom: 10px; }
.web-details .titleArea { position: relative; }
.web-details .printIcon { margin-right: 5px; }
.web-details .printBtn  { position: absolute; right: 0px; padding-top: 5px; font-size: 18px; cursor: pointer; }
.web-details .pdfOutput { float: right; list-style-type: none; display: inline-flex; }
.web-details .pdfBtn    { position: relative; padding-top: 5px; padding-left: 8px; font-size: 14px; cursor: pointer; }
.web-details .payment-confirmation { text-align: right; }

.wait-dialog  { margin-top: 100px; }
.wait-caption { text-align: center; }

.thumbnail              { width: 50px !important; }
.timestamp              { text-align: right; color: #aaa; }

/* Header
-----------------------------------------------------------------------------*/
header                  { width: 100%; height: auto; margin: 0 auto; }
header .wrapper         { position: relative; }

/* Footer
-----------------------------------------------------------------------------*/
footer                  { width: 100%; height: 40px; padding: 12px 0 40px; color: #c0c0c0; }
footer li               { padding-left: 7px; padding-right: 7px; border-left: 1px solid #bbb; }
footer li:first-child   { padding-left: 0; border-left: none; }
address                 { text-align: center; font-size: 10px; font-style: normal; }


.toolbar                { position: fixed; z-index: 10; bottom: 0; width: 100%; border-top: 1px solid #e5e5e5;
                          background-image: linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,1));
                          box-shadow: 0 -4px 2px 2px #f0f0f0; -webkit-box-shadow: 0 -4px 2px 2px #f0f0f0; -moz-box-shadow: 0 -4px 2px 2px #f0f0f0; }
.toolbar ul             { display: table; table-layout: fixed; width: 100%; }
.toolbar li             { display: table-cell; width: 25%; border-left: 1px solid #ccc; text-align: center; }
.toolbar li:first-child { border-left: none; }
.toolbar li a           { position: relative; display: block; width: 100%; height: 100%; padding: 5px 0; text-decoration: none; }
.toolbar li p           { margin-top: 2px; color: #111; font-size: 8px; }
.toolbar i              { margin-left: 3px; }
.toolbar .badge         { position: absolute; top: 5px; right: 50%; z-index: 1; min-width: 18px; height: 18px; line-height: 18px; margin-right: -33px; padding: 0; border-radius: 50%; color: #fff; font-size: 10px; }

/* Form
-----------------------------------------------------------------------------*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea                { display: inline-flex; padding: 2px 6px; font-size: 14px; line-height: 18px; color: #555; border: 1px solid #ccc; background: #fff; }
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus          { border-color: rgba(82,168,236,0.8); outline: 0; outline: thin dotted 9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }
input + label           { margin-left: 5px; }
select                  { display: inline-block; margin-right: 10px; padding: 0px 6px; border: 1px solid #ccc; font-size: 14px; line-height: 18px; color: #555; }

.sweet-alert button     { display: block; overflow: hidden; min-width: 100px; width: 100%; height: 4em; line-height: 4em; margin: 0; padding: 0 10px; text-decoration: none; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; text-align: center; color: #fff; font-size: 14px; font-weight: bold; background: #222E68; -webkit-appearance: none; }
.sweet-alert .sa-confirm-button-container { display: block; margin: 26px 5px 0 5px;}
.sweet-alert .sa-cancel-button-container { display: block;}
.sweet-alert input[type="text"] { display: none;} /* sweet-alertで入力欄を表示する必要がないのに表示されてしまうため */

a.btn                   { border-radius: 4px; }
.btn, a.btn             { display: inline-block; overflow: hidden; min-width: 100px; width: 100%; height: 4em; line-height: 4em; margin: 0; padding: 0 10px; text-decoration: none; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; border: 1px solid #222E68; text-align: center; color: #fff; font-size: 14px; font-weight: bold; background: #222E68; -webkit-appearance: none; }
.btn:hover              { cursor: pointer; text-decoration: none; color: #fff !important; border: 1px solid #294083; background: #294083; }
.btn:disabled           { border: #ccc !important; background: #ccc !important; }
.btn.mini               { display: inline-block; min-width: 50px; }
.btn.small              { display: inline-block; min-width: 100px; height: 34px; line-height: 24px; }
.btn.normal             { width: 180px; height: 40px; line-height: 40px; border: 1px solid #aaa; background: #c5c5c5; }
.btn-normal:hover       { background: #b5b5b5; }
.btn-group              { display: table; table-layout: fixed; width: 100%; margin-top: 10px; margin-bottom: 10px; }
.btn-group.inline li    { float: none; }
.btn-group li           { display: table-cell; width: 50px; border: 1px solid #1eb7f0; border-radius: 0; text-align: center; font-weight: bold; }
.btn-group li .btn      { border-radius: 0; }
.btn-group li:first-child,
.btn-group li:first-child .btn { border-right: none; }
.btn-group li:last-child,
.btn-group li:last-child .btn { border-left: none; }
.btn-group input[type="radio"] { display: none; }
.btn-group label        { display: block; width: 100%; height: 100%; vertical-align: middle; padding-left: 15px; padding-right: 15px; font-size: 18px; }
.btn-group .btn         { width: 100%; min-width: inherit; height: 100%; margin: 0; padding: 0; background: none; border: none; }
.btn-group .btn:hover   { background: #1eb7f0; }
.btn:disabled { cursor: default; background: #fff; }

.btn.base              { border-color: #ccc; color: #333 !important; background: #fff; }
.btn.important          { border-color: #ffcccc; color: orangered !important; background: #ffcccc; }
.btn.confirm            { border-color: #bcbbb9; color: royalblue !important; background: #e5f2ff; }
.btn.green              { border-color: #ccc; color: #fff !important; background: #57B196; }
.btn.base:hover,
.btn.important:hover,
.btn.confirm:hover,
.btn.green:hover        { color: #fff !important; border-color: #294083; background: #294083; }

.btn.comment            { font-size: 12px; }


/* Misc
-----------------------------------------------------------------------------*/
.clear-fix:before,
.clear-fix:after        { content: ""; display: block; overflow: hidden; }
.clear-fix:after        { clear: both; }
.clear-fix              { zoom: 1; }

.overflow-hidden        { overflow: hidden; }

.display-none           { display: none; }

.hide                   { display: none !important; }
.table                  { display: table; width: 100%; }
.table li               { display: table-cell; vertical-align: middle; }
.table.fixed            { table-layout: fixed; }
.block                  { display: block; }
.inline li,
.inline li a            { float: left; display: inline-block; }
.inline-block           { display: inline-block; }

.input-block            { display: block; width: 100%; }
.input-mini             { width: 60px; }
.input-small            { width: 110px; }
.input-middle           { width: 200px; }
.input-large            { width: 300px; }
.input-group            { position: relative; display: inline-block; }
.input-group.block      { display: block; }

.width-auto             { width: auto; }
.width-block            { display: block; width: 100%; }

.height28               { height: 28px; }
.height100              { height: 100px; }

.margin-top-zero        { margin-top: 0 !important; }
.margin-top-10          { margin-top: 10px !important; }
.margin-right-zero      { margin-right: 0 !important; }
.margin-left-zero       { margin-left: 0 !important; }
.padding-zero           { padding: 0 !important; }
.padding-top-zero       { padding-top: 0 !important; }
.padding-top-20         { padding-top: 20px !important; }
.padding-top-40         { padding-top: 39px !important; }
.padding-bottom-zero    { padding-bottom: 0 !important; }

.border-none            { border: none !important; }
.border-top-none        { border-top: none !important; }
.border-right-none      { border-right: none !important; }
.border-bottom-none     { border-bottom: none !important; }
.border-left-none       { border-left: none !important; }

.list-style-inside      { margin-left: 20px; list-style: inside; }
.list-style-square      { list-style: square; }
.list-style-square li   { margin-left: 18px; }
.list-style-none        { list-style: none !important; }

.align-right            { text-align: right !important; }
.align-left             { text-align: left !important; }
.align-center           { text-align: center !important; }

.badge                  { display: inline-block; margin-top: -4px; margin-right: 3px; padding: 1px 3px; color: #fff; background: #ff272f; font-weight: bold; text-align: center; vertical-align: middle; }

.white                  { background: #fff; }
.light-yellow           { background: #fffee6; }
.blue                   { background: #61d2ff; }
.green                  { background: #fdbc40; }
.olive                  { background: #568217; }
.navy                   { background: #004177; }
.dark                   { background: #020221; }

.circle                 { border-radius: 50%; }
.circle.small           { font-size: 14px; }
.circle.half            { border-radius: 50%/20%; }
.circle.half-right      { border-radius: 0 50% 50% 0; }
.circle.half-left       { border-radius: 50% 0 0 50%; }

.nowrap                 { white-space: nowrap; }
.break-word             { word-wrap: break-word; }
.ellipsis               { max-height: 7.5em; overflow: hidden; }


.login li               { padding-top: 5px; padding-bottom: 5px; }
.login p                { display: inline-block; text-align: left; }
.login i                { margin-top: -5px; margin-right: 5px; margin-left: -5px; }
.login a                { color: #333; text-decoration: underline; }
.login input            { height: 40px; line-height: 40px; }
.login input[type="checkbox"] { vertical-align: middle; }
.login label            { color: #333; }
.login .box             { text-align: center; }
.login li .btn          { margin-top: 10px; }
.login .reminder        { padding-top: 0; padding-bottom: 20px; }
.login .reminder a:hover i { background-position: -120px -10px; }
.login .sns             { padding-top: 20px; border-top: 1px solid #ccc; text-align: center; }
.login .sns p           { display: block; text-align: center; }
.login .sns a           { display: inline-block; width: 30px; margin-top: 10px; margin-left: 5px; }
.login .sns a:first-child { margin-left: 0; }

.area .heading          { background: #fff !important; }
.area label             { display: inline-block; float: left; width: 31.3%; height: 40px; line-height: 40px; margin: 1%; padding-top: 5px; text-align: center; background: #fff; }
.area label:hover,
.area label.checked     { background: #333; }
.area label:hover span,
.area label.checked span { color: #fff; }
.area label i           { margin-top: -3px; }
.area label span.long   { font-size: 11px; }
.area label div         { display: table; width: 100%; }
.area .box,

.keyword .heading + .box { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.modal-window-overlay   { position: fixed; top: 0; bottom: 0; left: 0; z-index: 99; overflow: hidden; width: 100%; background: rgba(255,255,255,.60); }


/* Index
-----------------------------------------------------------------------------*/
.index                  { height: 100%; background: #222c36; }
.index iframe           { width: 100%; }
.index ul               { height: 100%; }
.index li               { width: 100%; height: 100%; min-height: 100%; vertical-align: top; margin: 0 auto; overflow: hidden; }
.index li p             { text-align: center; color: #fff; }
.index iframe           { height: 100%; border-color: #222c36; }
.index a                { display: block; width: 100%; height: 100%; padding: 5px; color: #ccc; }
.index a:hover          { text-decoration: none; color: #fff; background: #222c36; }
.index span             { display: none; }

.index .content         { max-width: 2406px; height: 100%; background: #222c36; }
.index .wrapper         { width: 100%; height: 100%; max-width: inherit; }
.index .main-content    { float: none; overflow-x: hidden; width: 100%; height: 100%; margin-top: 5px; }
.index .main-content .table { height: 100%; }
.index .col1            { width: 150px; }
.index .col2            { overflow: hidden; }
.index .col2 .box       { overflow-x: auto; overflow-y: hidden !important; width: 100%; height: 100%; }
.index .box             { padding: 0; }
.index .box-nav         { height: auto; padding: 20px 10px 10px; }
.index .box-nav li      { display: block; width: 100%; height: inherit; min-height: inherit; border-bottom: 1px dotted #555; color: #fff; }
.index .box-nav li:first-child { border-top: 1px dotted #555; }
.index .box-pc          { width: 1000px; }
.index .box-tablet      { width: 768px; }
.index .box-smartphone  { width: 480px; }

/*ページタイトル */
.title                  { color: #555; border-bottom: 3px solid #222E68; text-align: center; font-size: x-large; letter-spacing: 0.05em; font-weight: 700;}

/* ログインボタン */
.header-login-button-container {
    text-align: right;
    padding-top: 10px;
    padding-right:  3em;
}

/*****************/

div.title {
    margin-bottom: 10px;
    position: relative;
}

div.title h2 {
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
}

div.title .contractlist-button {
    position: absolute;
    bottom: 1px;
    left: 0;
    font-size: 12px;
    width: auto;
    padding: 8px 13px;
    transform: translateZ(0); /* 画面幅変更時の遅延防止 */
}

div.title .contractlist-button i {
    font-size: 12px;
    padding: 0;
}

div.title .contractlist-button .contractlist-button_label {
    margin-left: 5px;
}

.under-title {
  text-align: right;
}


/*入力フォーム */
.inputform {}
.inputform .subtitle {color:#555;border-bottom: 2px solid #222E68; padding:0.5em 0.5em; font-size: 1.5em;}
.inputform .fieldtitle {width:100%;padding:1em;background:#E7EBF8;} /*入力項目タイトル*/
.inputform .fieldarea {background:#f1e7dd;border: 1px solid #222E68}  /*入力項目タイトル*/

/* Media Queries
-----------------------------------------------------------------------------*/
@media screen and (max-width: 640px) {
    .heading-bar        { padding-right: 0; padding-left: 0; }
}

@media screen and (max-width: 480px) {
    h1                  { margin-top: 0; font-size: 18px; }

    .pc                 { display: none; }
    .sp                 { display: inline-block; }

    .content            { margin-top: 0; }
    .wrapper            { margin-top: 0; padding-right: 0; padding-left: 0;}
    .top .heading .btn i { margin-right: 0; }
}

@media screen and (max-width: 320px) {
}

/* TOP BOX */
.topbox {background-color:white}
.topbox .boxtitle {
  background-color:#222E68;
  border:2px solid #222E68;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  width: auto;
  font-weight:bold;
  color:#fff;
  font-size:1.2em;
  padding-left:10px;
  margin-top:10px;
  height:2.1em;
  line-height:2.1em;
}

.topbox .boxcontent {
  background-color:#ffffe0;
  border:2px solid #222E68;
  padding:10px;
  font-size:1em;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  width: auto;
  height:auto;
  min-height:1em;
}

.topbox .title {
  font-weight:bold;
  color:#fff;
  font-size:1.2em;
  margin-left:10px;
}

.checkbox {
  box-sizing: border-box;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;
  margin: 0 0 8px 0;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
}
.checkbox:hover {
  background-color: #E7EBF8;
}
.checkbox:hover:after {
  border-color: #222E68;
}
.checkbox:after {
  transition: border-color 0.2s linear;
  position: absolute;
  top: 55%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}

.checkbox:before {
  transition: opacity 0.2s linear;
  position: absolute;
  top: 55%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #222E68;
  border-bottom: 3px solid #222E68;
  content: '';
  opacity: 0;
  transform: rotate(45deg);
}

input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}

.registerForm .fieldarea[disabled] {
  border: none;
  background: #E7EBF8;
  box-shadow: none;
  cursor: default;
  height: 22px !important;
}

a.link:hover {
  text-decoration: underline !important;
}

.boxcontent_child{
   background-color: #fff;
   border: 2px solid #222E68;
   font-size: 1em;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   width: auto;
   height: auto;
   min-height: 1em;
}

.boxcontent_child.contract_box {
   border-radius:  5px;
}

.change-account-label {
  margin-top: 0;
  margin-bottom: 4px;
}

.change-account-body {
  border: 2px solid #222E68;
  border-radius: 4px;
  margin-bottom: 7px;
  padding-right: 5px;
  padding-left: 7px;
}

a.btn.base.change-account {
  width: auto;
  height: 31px;
  line-height: 30px;
  float: right;
  margin-top: -94px;
  margin-right: -8px;
}

.account-item-line {
  text-align: left;
}

.change-account-head {
  margin-top: 7px;
  font-size: medium;
}

.change-account-item {
  margin-top: 3px;
  margin-bottom: 5px;
}

a.btn.add-contract {
  width: auto;
  line-height: 2.2em;
  height: 2.2em;
}

.contract_line{
   color: #333;
   margin-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #222E68;
}

.boxtitle_contract_name{
  font-size: small;
}

.contract_line_customeraddress {
  font-weight: bold;
  font-size: 1.05em;
}

.contract_line_other {
  font-size: small;
}

.contract_btn{
   font-weight: bold;
   padding: 10px;
   border:1px solid #ccc;
   cursor: pointer;
   border-radius: 5px;
   line-height: 1.3rem;
   height: 2.5em;
   min-width: 95px;
   width: auto;
   margin-left: 3px;
   margin-top: 5px;
   color: #333;
   background: #fff;
}

.contract-item .contract_state {
   margin-top: 0;
   background: royalblue ;
   padding: 10px;
}

.contract_name{
   font-weight: bold;
   margin-top: 5px;
   font-size: larger;
   padding-right: 0px;
}

.state_fix_btn{
   padding-left: 0px;
}

.contract_btn:hover{
   background: #294083;
   color: #fff;
   border: 1px solid #294083;
}

.contract_btn_margin{
   text-align: right;
}

.boxcontent_child > div:last-child{
  border-bottom: none;
}

.contract-exclamation {
  margin-right: 0.5em;
  font-size: 1.6em;
  color: #222E68;
  vertical-align: top;
  line-height: 2rem;
}

.contract-message {
  font-size: 1.2em; 
  color: #222E68;  
}

a.btn.account-item {
  margin-bottom: 7px;
  height: auto;
}

a.btn.account-item.disabled {
  background: #e5f2ff;
}

.account-item-head {
  font-weight: normal;
  margin-right: 10px;
}

a.btn.account-hierarchy {
  margin-top: 3px;
  margin-right: 3px;
  line-height: 2em;
  height: 2em;
  width: auto;
}

.boxcontent_child.invoice {
  padding: 0;
  font-size: small;
}

.invoice_detail {
  width: 100%;
  text-align: center;
}

.invoice_detail_row {
  font-weight: bold;
}

.invoice_detail_targetmonth {
  padding-top: 12px;
}

.invoice_detail_targetmonth_data {
  font-size: large;
  padding-bottom: 9px;
}

.invoice_detail_totalusage_col {
  border-left: 2px solid #222E68;
}

.invoice_detail_totalusage {
  padding-top: 12px;
}

.invoice_detail_totalusage_data {
  font-size: large;
  padding-bottom: 9px;
}

.invoice_detail_totalamount_col {
  border-left: 2px solid #222E68;
}

.invoice_detail_totalamount {
  padding-top: 12px;
}

.invoice_detail_totalamount_payment {
  padding-top: 12px;
}

.invoice_detail_totalamount_data {
  font-size: large;
  padding-bottom: 9px;
}

.invoice_detail_totalamount_data_payment {font-size: large;
  padding-bottom: 9px;
}

a.btn.invoice-contract {
  margin-top: -2px;
  margin-right: -12px;
  line-height: 2em;
  height: 2em;
  width: auto;
}

.fuelcostadjustment li {
  text-align: right;
  margin-bottom: 0;
}

.renewableenergiesrate li {
  text-align: right;
  margin-bottom: 0;
}

.maximundemand {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0px;
}

.maximundemand > li {
  padding-top: 0;
  padding-bottom: 0;
  text-align: right;
}

.maximundemand ul li {
  text-align: right;
  margin-right: 20px;
}

.maximundemanddetail li{
  display: inline-block;
}

.maximundemanddetail li span {
  display: inline-block;
}
.maximundemanddetail li span.date {
  width: 90px;
}
.maximundemanddetail li span.power  {
  width: 60px;
}

/* 契約一覧 */
.contractlist-search-form-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    flex-wrap: wrap;
}
.contractlist-search-form-container > button {
    margin-top: 5px;
    margin-right: auto;
    height: 51px;
    line-height: 100%;
    align-self: flex-start;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
    width: 13em;
    color: #333;
    background: #fff;
}
.contractlist-search-form {
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 2em;
    border: 1px solid #ccc;
}
.contractlist-search-form > form {
    padding: 0;
    white-space: nowrap;
    background-color: initial;
}
.contractlist-search-form input[type="text"] {
    border: none;
    height: 2em;
    min-width: 15em;
    background-color: initial;
}
.contractlist-search-form button {
    cursor: pointer;
    font-size: 1.3em;
    border: none;
    background: none;
    margin: 0 10px;
    color: #222E68;
}

#searchform-tooltip .tooltip-arrow {
    border-top-color: #222E68;
}
#searchform-tooltip .tooltip-inner {
    color: #fff;
    background-color: #222E68;
    text-align: left;
}


.contract-item-container {
    margin-top: 10px;
    border: solid 1px #C0C0C0;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: visible;
}
.contract-item {
    padding: 15px;
}
.contract-item:not(.contract-item_latest) {
    border-top: solid 1px #C0C0C0;
}
.contract-item.contract-item_latest:not(:first-child) {
    border-top: solid 2px #222E68;
}

.contract-item.contract-item_inactive {
    background-color:  #f5f5f5;
}

.contract-item_main {
    display:  flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.contract-item_main_header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contract-item_main_header .badge {
    margin: 0;
}

.contract-item_main_header i {
    font-size: 42px;
    color: #555;
}
.contract-item_main_header.contract-item_main_header_sp i {
    font-size: 32px;
}

.contract-item_main_header:not(.contract-item_main_header_sp),
.contract-item_footer_prev-link {
    flex-basis: 28%;
}
.contract-item_footer_prev-link {
    text-align: center;
    white-space: nowrap;
    line-height: 0;
}
.contract-item_footer_prev-link > span {
    /* glyphicon 分のインデントスペース */
    margin-left: 1em;
}
.contract-item_footer_prev-link_text_sp {
  display: none;
}

.contract-item_main_header:not(.contract-item_main_header_sp) > div:not(:first-child) {
    margin-top: 5px;
}

.contract-item_main_header.contract-item_main_header_sp {
    display: none;
}
.contract-item_main_info,
.contract-item_footer_buttons {
    flex-basis: 70%;
}

.contract-item_main_info_child-name {
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
}
.contract-item_main_info_child-name > span {
    display: block;
}
.contract-item_main_info_customer-name {
    font-weight: bold;
}
.contract-item_main_info_address {
    font-weight: bold;
}

.contract-item_footer {
    display: flex;
    align-items: flex-end;
}

.contract-item_footer_buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: auto;
}

.contract-item.contract-item_inactive .contract-item_footer_buttons .btn:not(:hover) {
    background-color: rgba(255, 255, 255, 0)
}

.contract-item_footer_buttons .btn {
    max-width: 9em;
}

.contract-item_footer_buttons > div:not(:last-child) {
    margin-right: 5px;
}
.contract-item_footer_buttons_confirm {
    margin-left: auto;
}

.contract-item_footer_buttons_graph_short {
    display: none;
}

/* 契約一覧ボタン */
.contractlist-button {
    width: 100%;
    padding: 3px;
    text-align: center;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    font-weight: bold;
    background-color: #fff;
}

.contractlist-button:hover {
    background: #294083;
    color: #fff;
    border: 1px solid #294083;
}

.contractlist-button .contractlist-button_label_short {
  display: none;
  margin-left: 5px; /* 表示する際のマージン */
}

/* モーダル */
.modal-header {
    padding-bottom: 5px;
    background-color: #fff;
}

.modal-body {
    background-color: #fff;
}

/* 契約一覧 - モーダル */
.contract-list-modal-dialog ul.nav-tabs > li {
    text-align: center;
    width: 7em;
}


/* 関連会社の指定 - モーダル */
.accounthierarchy-modal-dialog {
    max-width: 600px;
}

.accounthierarchy-modal-dialog .modal-header,
.accounthierarchy-modal-dialog .modal-body
{
    background-color: #ffffe0;
}

/* グラフ画面各種表 */
.usage-table-frame {
  margin-top: 15px;
  margin-bottom: 10px;
}

.usage-table {
  width: 100%;
  margin: 0px auto;
  border: solid #ccc 1px;
  table-layout: fixed;
  text-align: right;
}

.usage-table-slim {
  width: calc((100% / 3) * 2);
}

.usage-table th {
  background-color: #E7EBF8;
  border: solid #ccc 1px;
}

.usage-table td {
  border: solid #ccc 1px;
}

.usage-table td:first-child {
  background: #E7EBF8;
}

.usage-table tr:nth-child(even) td:nth-child(n+2) {
  background: #f5f5f5;
}

@media screen and (max-width: 460px){
  a.btn.invoice-contract {
    width: 30px;
    min-width: 30px;
    padding-left: 6px;
    padding-right: 6px;
    overflow: unset;
  }

  .invoice-contract .caption-contract {
    display: none;
  }

  /* ページタイトル横 契約一覧ボタン */
  div.title {
      display: flex;
      flex-direction: column;
  }

  div.title .contractlist-button {
      bottom: 4px;
      padding: 6px 10px;
  }

  div.title .contractlist-button .contractlist-button_label {
      display: none;
  }

}

@media screen and (max-width: 1023px){
  .header-login-button-container {
      padding: 0 15px;
  }

  div.title .contractlist-button {
    margin-left: 15px;
  }

  .under-title {
      padding-right: 15px;
  }
}

@media screen and (min-width: 768px) {
    /* 契約一覧 - モーダル */
    .contract-list-modal-dialog {
        max-width: 600px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /* 契約アイテム */
  .topbox .contract-item_main_info {
      flex-basis: 100%;
  }

  .topbox .contract-item_main_header {
      flex-direction: row;
      justify-content: flex-start;
  }
  .topbox .contract-item_main_header:not(.contract-item_main_header_sp) {
      display: none;
  }
  .topbox .contract-item_main_header.contract-item_main_header_sp {
      display: flex;
  }
  .topbox .contract-item_main_header.contract-item_main_header_sp + *,
  .topbox .contract-item_footer {
      margin-top: 5px;
  }
  .topbox .contract-item_main_header_sp > div:not(:first-child) {
      margin-left: 10px;
  }
  .topbox .contract-item_footer_prev-link {
      font-size: 12px;
      text-align: left;
  }
  .topbox .contract-item_footer_buttons_graph:not(.contract-item_footer_buttons_graph_short) {
      display: none;
  }
  .topbox .contract-item_footer_buttons_graph_short {
      display: inline;
  }
  .topbox .contract-item_footer_buttons .contract_btn {
    min-width: 5.5em;
  }
  .topbox .contract-item_footer_prev-link > span {
      margin-left: 0;
  }
  .topbox .contract-item_footer_prev-link_text:not(.contract-item_footer_prev-link_text_sp) {
    display: none;
  }
  .topbox .contract-item_footer_prev-link_text_sp {
    display: inline;
  }
}

@media screen and (max-width: 460px) {
  /* 契約アイテム */
  .contract-item_main_info {
      flex-basis: 100%;
  }

  .contract-item_main_header {
      flex-direction: row;
      justify-content: flex-start;
  }
  .contract-item_main_header:not(.contract-item_main_header_sp) {
      display: none;
  }
  .contract-item_main_header.contract-item_main_header_sp {
      display: flex;
  }
  .contract-item_main_header.contract-item_main_header_sp + *,
  .contract-item_footer {
      margin-top: 5px;
  }
  .contract-item_main_header_sp > div:not(:first-child) {
      margin-left: 10px;
  }
  .contract-item_footer_prev-link {
      font-size: 12px;
      text-align: left;
  }
  .contract-item_footer_buttons_graph:not(.contract-item_footer_buttons_graph_short) {
      display: none;
  }
  .contract-item_footer_buttons_graph_short {
      display: inline;
  }
  .contract-item_footer_buttons .contract_btn {
    min-width: 5.5em;
  }
  .contract-item_footer_prev-link > span {
      margin-left: 0;
  }
  .contract-item_footer_prev-link_text:not(.contract-item_footer_prev-link_text_sp) {
    display: none;
  }
  .contract-item_footer_prev-link_text_sp {
    display: inline;
  }
}

/*iPad*/
@media screen and (min-width: 768px) and (max-width: 1023px){
   .invoice_detail_totalamount_payment{
      padding-bottom: 2px;
      font-size: 0.9em;
   }
}

@media screen and (min-width: 541px) and (max-width: 650px){
   .contract_name{
      width: 60%;
   }
}

@media screen and (min-width: 451px) and (max-width: 540px){
   .item_group{
      width: 60%;
   }
   .contract_name{
      width: 60%;
   }
}

@media screen and (max-width: 1023px){
   .web-details .invoicedetail dd div{
     margin: -6px 0 -6px 0 !important;
     width: 100% !important;
   }
   .web-details .printBtn{
     font-size: 14px !important;
     padding-top: 7px !important;
   }
}

@media screen and (min-width: 391px) and (max-width: 450px){
   .item_group{
      width: 60%;
   }
   .contract_name{
      width: 72%;
   }
}

@media screen and (max-width: 420px){
   .invoice_detail_totalamount_payment span.xxsbr:after {
      content: "\a";
      white-space: pre;
   }
   .invoice_detail_totalamount_payment{
      padding-top: 3px;
   }
   .invoice_detail_totalamount_data_payment{
      padding-bottom: 0px;
   }
   .payment-confirmation span.xxsbr:after {
      content: "\a";
      white-space: pre;
   }
}

@media screen and (min-width: 376px) and (max-width: 390px){
   .item_group{
      width: 60%;
   }
   .contract_btn {
      font-weight: bold;
      padding: 9px;
      cursor: pointer;
      border-radius: 5px;
   }
   .contract_name{
      width: 72%;
   }
   .contract_line {
      margin-top: 10px;
      padding-bottom: 10px;
    }
}


/*IPhone 6*/
@media screen and (max-width: 375px){
   .item_group{
      width: 58%;
   }
   .contract_name{
      width: 72%;
   }
   .mobilePaddingTop{
      padding-top: 1.3em !important;
   }
}

/*Galaxy S5 360*/
@media screen and (min-width: 360px) and (max-width: 374px){
   .item_group{
      width: 60%;
   }
   a.btn.add-contract {
     width: auto;
     line-height: 2.5em;
     height: 2.5em;
     font-size: smaller;
     min-width: inherit;
   }
   .contract_name{
      width: 72%;
   }

   .contract-item .contract_state {
      padding: 7px;
   }

   .contract_btn{
      padding: 7px;
      min-width: 75px;
      font-size: smaller;
   }
   .mobilePaddingTop{
      padding-top: 1.3em !important;
   }
}

@media screen and (min-width: 321px) and (max-width: 359px){
   .item_group{
      width: 100%;
   }
   a.btn.add-contract {
     width: auto;
     line-height: 2.5em;
     height: 2.5em;
     font-size: smaller;
     min-width: inherit;
   }
   .contract_btn {
      font-weight: bold;
      padding: 8px;
      cursor: pointer;
      border-radius: 5px;
      min-width: 75px;
      font-size: smaller;
   }
   .contract_name{
      width: 50%;
   }
   .contract-item .contract_state {
      padding: 7px;
   }
   .contract_line {
      margin-top: 10px;
      padding-bottom: 10px;
   }
   .mobilePaddingTop{
      padding-top: 1.3em !important;
   }
}

@media screen and (min-width: 321px) and (max-width: 460px){
    /* タイトルと被らない幅だけ見せる */
    div.title .contractlist-button .contractlist-button_label_short {
        display: inline;
    }
}

/*IPhone 4-5*/
@media screen and (max-width: 320px){
   .item_group{
      width: 100%;
   }
   a.btn.add-contract {
     width: auto;
     line-height: 2.5em;
     height: 2.5em;
     font-size: smaller;
     min-width: inherit;
   }
   .contract_btn {
      min-width: 75px;
      font-weight: bold;
      font-size: smaller;
      padding: 8px;
      cursor: pointer;
      border-radius: 5px;
   }
   .contract_name{
      width: 65%;
   }
   .contract-item .contract_state {
      padding: 7px;
   }
   .contract_line {
      margin-top: 10px;
      padding-bottom: 10px;
   }
   .mobilePaddingTop{
      padding-top: 1.3em !important;
   }
   .invoice_detail_targetmonth {
     font-size: smaller;
   }
   .invoice_detail_targetmonth_data {
     font-size: small;
   }
   .invoice_detail_totalusage {
     font-size: smaller;
   }
   .invoice_detail_totalusage_data {
     font-size: small;
   }
   .invoice_detail_totalamount {
     font-size: smaller;
   }
   .invoice_detail_totalamount_payment {
     font-size: smaller;
   }
   .invoice_detail_totalamount_data {
     font-size: small;
   }
   .invoice_detail_totalamount_data_payment {
     font-size: small;
     padding-bottom: 3px;
   }
   .contract_line_customeraddress {
     font-size: inherit;
   }
   .boxtitle_contract_name{
     font-size: 0.65em;
   }

}

/*印刷ページ用の設定*/
.printDisp { display: none; }
@page { size: A4; margin: 9mm; }
@media print{
   html, body {
    zoom: 100%; 
    width: 210mm;
   }
   .web-details     { margin-bottom: 0 !important; }
   .web-details div:first-child  { margin-bottom: 0 !important; }
   .webdetails p    { margin: 0 0 -10px; }
   .webdetails h5   { margin-top: 10px; margin-bottom: 0px; }
   .webdetails .table.fixed { margin-bottom: 6px !important; }
   .webdetails li   { padding-bottom: 6px; }
   .webdetails dl   { margin-bottom: 10px; }
   .webdetails dt   { line-height: 5.5mm; }
   .webdetails dd   { margin-top: -29px; padding: 2px 10px 7px 0; }
   .webdetails .invoicedetail dt                  { padding: 6px 5px 2px 1em !important; }
   .webdetails .invoicedetail dd                  { padding: 0 10px 3px 0 !important; margin-top: -26px; }
   .webdetails .invoicedetail:last-child          { margin-bottom: 1px}
   .webdetails .invoicedetail:nth-child(even) span.printDisp  { width: 100%; border-top: 7mm solid #f7f4f4; margin-bottom: -7.8mm; }
   .webdetails .invoicedetail:nth-child(18)       { page-break-before: always; }
   .webdetails footer            { height: 0 !important; padding: 4px 8px 0 !important;}
   .webdetails footer img        { margin-left: 0 !important; }
   .webdetails footer address    { margin-bottom: 0;}
   .webdetails .printDisp        { display: block; }
   .webdetails .printDispNone    { display: none; }
   .webdetails .printPaddingTop  { padding-top: 0px !important; }
   .webdetails .printDisp .yearMonthDisp { text-align: center; font-size: 1.2em; padding: 40px 0; }
   .webdetails .printDisp.issue-timestamp { text-align: right; }
   .webdetails .printSection     { margin-top: 0mm; min-height: 273mm; position: relative; page-break-after: always; }
   .webdetails .printSection:last-child { margin-bottom:0 !important; page-break-after: avoid; }
   .webdetails .printStartPage   { padding-top: 30%; }
   .webdetails .borderLong       { width: 100%; border-top: 3em solid #222E68; margin-bottom: -3em; }
   .webdetails .borderMiddle     { width: 50%; border-top: 2em solid #E7EBF8; margin: -2em 0 0 1px; } 
   .webdetails .borderShort      { width: 45%; border-top: 2em solid #f1e7dd; margin: -2em 0 0em 3em; }
   .invoiceWlInfo p { padding-bottom: 0.5em }
}