@charset "UTF-8";

div.contents {
  margin: 0 1rem;
  text-align: center;
  padding-top: 10px;
}

@media screen and (min-width: 769px) {
  div.contents.mailapi div.condition-area dl dt {
    width: 14rem;
  }

  div.contents.mailapi div.condition-area dl dd {
    margin-left: 15.4rem;
  }

  div.contents.mailapi input[name=mail_api_client_id],
  div.contents.mailapi input[name=mail_api_client_secret],
  div.contents.mailapi input[name=mail_api_token_uri],
  div.contents.mailapi input[name=mail_api_audience],
  div.contents.mailapi input[name=mail_api_root_uri] {
    width: 600px;
  }

  div.contents .policy-text {
    padding-left: 163px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

div.contents.maildelivery div.condition-area dl dd a.downloadlink {
  text-decoration: underline;
}

div.contents.maildelivery div.condition-area dl dd button.test_send {
  background-color: #ffc960;
  background-image: linear-gradient(to bottom, #fff090, #ffc030);
  color: #333333;
  text-shadow: none;
}

div.uk-alert.template {
  display: none;
}

div.display-none {
  display: none;
}

a.disabled {
  color: lightgray;
  pointer-events: none;
}

.uk-form textarea.e {
  background-color: #fff9f9;
  border: 1px solid #ff6666;
}

.uk-form select.e {
  background-color: #fff9f9;
  border: 1px solid #ff6666;
}

.uk-form div#htmleditor-area.e {
  background-color: #fff9f9;
  border: 1px solid #ff6666 !important;
}

.uk-form div#htmleditor-area-genericpdf.e {
  background-color: #fff9f9;
  border: 1px solid #ff6666 !important;
}

input[name=customer_id],
input[name=display_company_id] {
  width: 250px;
}

input[name=customer_name],
input[name=customer_name_kana],
input[name=user_name],
input[name=admin_name],
input[name=admin_name_kana],
input[name=from_name],
input[name=login_id],
input[name=email],
input[name=from_address],
input[name=reply_address],
input[name=test_address],
input[name=company_name],
input[name=company_name_kana],
input[name=portal_title],
input[name=subject],
input[name=subject_genericpdf],
input[name=to_address],
input[name=cc_address],
input[name=bcc_address] {
  width: 600px;
}

input[name=password],
input[name=password_confirmation],
input[name=new_password],
input[name=new_password_confirmation],
input[name=management_id],
input[name=mail_api_user_name],
dd .password-wrapper {
  width: 170px;
}

input[name=mail_api_name] {
  width: 500px;
}

span.cell.day.weekend.sat {
  color: blue;
}

span.cell.day.weekend.sun {
  color: red;
}

.sk-circle {
  margin: 100px auto;
  width: 120px;
  height: 120px;
  position: relative;
}

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-circle .sk-child:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
  transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
  transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
  transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
  transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
  transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
  transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
  transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
  transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
  transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
  transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
  transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
  z-index: 99999;
}

#loading .loadingIcon {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input[type=password],
.password-wrapper input[type=text] {
  padding-right: 30px;
  box-sizing: border-box;
}

.password-wrapper .uk-icon-eye,
.password-wrapper .uk-icon-eye-slash {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.unread-row {
  background-color: #fff0cc !important;
  font-weight: bold;
}

.contents.login .login-area {
  display: inline-block;
  max-width: calc(50%);
  text-align: left;
}

@media screen and (max-width: 1199px) {
  .contents.login .login-area {
    max-width: calc(65%);
  }
}

@media screen and (max-width: 991px) {
  .contents.login .login-area {
    max-width: calc(80%);
  }
}

@media screen and (max-width: 575px) {
  .contents.login .login-area {
    max-width: none;
    width: calc(80%);
  }
}

.contents.login div.title {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid #dddddd;
}

.contents.login .main-area {
  display: flex;
  width: 100%;
  height: 205px;
}

@media screen and (max-width: 575px) {
  .contents.login .main-area {
    display: block;
    height: auto;
  }
}

.contents.login .main-area .left-area {
  max-width: 300px;
  min-width: 1px;
}

@media screen and (max-width: 575px) {
  .contents.login .main-area .left-area {
    max-width: none;
    width: 100%;
    margin-bottom: 5px;
  }
}

.contents.login .main-area .left-area .icon-area {
  height: 132px;
  width: 100%;
  max-width: 300px;
  min-width: 1px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 575px) {
  .contents.login .main-area .left-area .icon-area {
    height: auto;
    max-width: none;
    display: block;
    text-align: center;
  }
}

.contents.login .main-area .left-area .icon-area img {
  width: 100%;
  margin-right: 10px;
}

@media screen and (max-width: 575px) {
  .contents.login .main-area .left-area .icon-area img {
    width: auto;
    margin-right: 0;
  }
}

.contents.login .main-area .right-area {
  flex: 1;
  min-width: 300px;
  margin-left: 10px;
}

@media screen and (max-width: 575px) {
  .contents.login .main-area .right-area {
    flex: 1;
    min-width: auto;
    width: 100%;
    margin-left: 0px;
  }
}

.contents.login .main-area .right-area .input-area {
  width: 100%;
}

.contents.login .main-area .right-area .input-area input {
  width: 100%;
}

.contents.login .main-area .right-area .input-area form {
  margin-bottom: 5px;
}

.uk-form .uk-form-row + .uk-form-row {
  margin-top: 5px;
}

.uk-form input[type=text].e,
.uk-form input[type=password].e {
  background-color: #fff9f9;
  border: 1px solid #ff6666;
}

.uk-form input[type=text].readonly,
.uk-form input[type=password].readonly {
  background-color: #cccccc;
}

span.reqiured_mark {
  color: #c00;
  font-weight: bolder;
  font-family: "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", Osaka, "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3";
}

.condition-area {
  text-align: left;
  margin-top: 1rem;
}

.condition-area dl {
  margin: 0;
}

.condition-area dt {
  width: 10rem;
  padding: 0.3rem 0.5rem;
  background-color: #a9c0f0;
  float: left;
  clear: both;
  font-weight: normal;
}

.condition-area dd {
  margin-left: 11.4rem;
  padding: 0.3rem 0.5rem;
  background-color: #f0f0ff;
}

.condition-area dt label,
.condition-area dd > span {
  display: block;
  margin: 0.5rem 0 0.2rem 0.2rem;
}

.condition-area dd > label {
  display: inline-block;
  margin: 0.5rem 0 0.2rem 0.2rem;
  margin-right: 0.5rem;
}

.condition-area dd > label input {
  margin-right: 0.3rem;
}

.condition-area .uk-form-row.button {
  margin-left: 11.4rem;
}

.condition-area .uk-form-row.button button {
  padding: 0.3rem 1rem;
  font-size: 1rem;
}

.condition-area .uk-form-row.button a {
  padding: 0.3rem 1rem;
  font-size: 1rem;
}

.condition-area .uk-form-row.button .uk-button-primary:not(:disabled) {
  text-shadow: none;
  color: #333333;
  background-color: #ffc960;
  background-image: linear-gradient(to bottom, #fff090, #ffc030);
}

.condition-area .uk-form-row.button .uk-button-primary:not(:disabled):hover,
.condition-area .uk-form-row.button .uk-button-primary:not(:disabled):focus {
  background-color: #ffcf60;
  background-image: none;
}

@media screen and (max-width: 768px) {
  .condition-area dt {
    width: 97%;
    float: none;
  }

  .condition-area dd {
    margin-left: 0;
  }

  .condition-area dd input {
    width: 100%;
  }

  .condition-area .uk-form-row.button {
    margin-left: 0;
  }

  .condition-area .uk-form-row.button .uk-button-primary {
    width: 100%;
  }
}

.list-area {
  margin-top: 1rem;
  text-align: left;
  font-size: 1rem;
}

.list-area caption {
  text-align: right;
  font-style: normal;
  color: #333333;
}

.list-area thead {
  background-color: #a9c0f0;
}

.list-area th {
  font-weight: normal;
}

.operation-area {
  text-align: left;
  margin-top: 1rem;
}

.pagination-area {
  margin-top: 1rem;
  text-align: center;
}

.contents.company.detail dl dt {
  width: 13rem;
}

.contents.company.detail dl dd {
  margin-left: 14.4rem;
}

.contents.user .contents-header {
  font-size: 1.5rem;
  margin-top: 10px;
  margin-bottom: 20px;
}

.contents.user.home .dashboard {
  display: flex;
  justify-content: space-between;
}

.contents.user.home .dashboard .left-area {
  width: 40%;
}

.contents.user.home .dashboard .right-area {
  width: 60%;
}

.contents.user.home .dashboard .customer-info table th {
  background-color: blue;
  color: white;
}

.contents.user.home .dashboard .prices table th {
  background-color: red;
  color: white;
}

.contents.user.home .dashboard .prices span p {
  text-align: left;
  padding-left: 5px;
}

.contents.user.home .dashboard .products table th {
  background-color: orange;
  color: white;
}

.contents.user.home .dashboard table {
  border-collapse: separate;
  border-spacing: 4px;
}

.contents.user.home .dashboard table th {
  text-align: center;
}

.contents.user.home .dashboard table td {
  border: 1px solid gray;
}

.contents.user.meter-reading-slip .detail {
  display: flex;
  margin: 0 auto;
  width: 70%;
}

.contents.user.meter-reading-slip .detail .left-area {
  width: 50%;
  text-align: left;
}

.contents.user.meter-reading-slip .detail .right-area {
  width: 50%;
  text-align: left;
}

.contents.user.meter-reading-slip .detail table.security-check {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  text-align: center;
}

.contents.user.meter-reading-slip .detail table.security-check th,
.contents.user.meter-reading-slip .detail table.security-check td {
  border: 1px solid black;
}

.contents.user.meter-reading-slip .detail table.security-check .check-numbers td {
  background-color: #93b4e5;
  width: calc(100% / 12);
}

.contents.gas-usage .list-area table {
  width: 50%;
  margin: 0 auto;
}

.contents.gas-usage .list-area table th,
.contents.gas-usage .list-area table td {
  text-align: center;
}

.contents.user.point .point-area {
  width: 800px;
  margin: 0 auto;
}

.contents.user.point .point-area > div {
  float: left;
}

.contents.user.point .point-info {
  margin-right: 50px;
  width: 400px;
}

.contents.user.point .point-info div:first-child {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem;
  background-color: #eb8686;
  color: white;
  margin-bottom: 4px;
}

.contents.user.point .point-info div:nth-child(2) {
  font-size: 3rem;
  padding: 2rem;
  font-weight: bold;
  background-color: #eee3e3;
}

.contents.user.point .point-note {
  text-align: left;
}

div.contents.login.kounosekiyu div.icon-area {
  align-items: flex-start !important;
}