@charset "UTF-8";
:root {
  --text-col: #5d5d5d;
}

.household {
  --main-col: hsl(33, 100%, 65%);
  --main-col-light: hsl(32, 82%, 93%);
  --main-col-lightest: hsl(33, 80%, 96%);
  --vivid-col: hsl(16, 100%, 65%);
}

.institution {
  --main-col: hsl(152, 77%, 39%);
  --main-col-light: hsl(150, 41%, 93%);
  --main-col-lightest: hsl(112, 80%, 96%);
  --vivid-col: hsl(130, 71%, 53%);
}

.other {
  --main-col: hsl(198, 81%, 51%);
  --main-col-light: hsl(195, 85%, 94%);
  --main-col-lightest: hsl(204, 71%, 95%);
  --vivid-col: hsl(198, 81%, 51%);
}

.anzenclass {
  --main-col: hsl(15, 100%, 65%);
  --main-bg-col: hsl(18, 76%, 96%);
  --main-col-light: hsl(18, 76%, 96%);
  --vivid-col: hsl(15, 100%, 65%);
}

.electricity_plus {
  --main-col: #f686b8;
  --main-col-light: #f7abcd;
  --main-col-lightest: #fad0e3;
  --vivid-col: #f686b8;
}

.lpgas section h2.section-title {
  margin-bottom: 2.5rem;
}
.lpgas section p {
  font-size: 1.25rem;
}

.lpgas__license-wrapper {
  display: flex;
  justify-content: center;
}

.lpgas__license-table {
  width: 100%;
  max-width: 720px;
}
.lpgas__license-table th,
.lpgas__license-table td {
  padding: 1rem 0.75rem;
  border: 1px solid var(--main-col, #e0a040);
  font-size: 1rem;
  line-height: 1.6;
  vertical-align: middle;
}
@media (min-width: 576px) {
  .lpgas__license-table th,
  .lpgas__license-table td {
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
  }
}
.lpgas__license-table th {
  width: 36%;
  background-color: #fff;
  font-weight: 500;
  text-align: center;
}
.lpgas__license-table td {
  width: 64%;
  background-color: #fff;
  text-align: center;
}

.lpgas__fee-note {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  text-align: right;
}

.lpgas__fee-table {
  width: 100%;
  border-collapse: collapse;
}
.lpgas__fee-table th,
.lpgas__fee-table td {
  padding: 1rem 0.5rem;
  border: 1px solid var(--text-col, #5d5d5d);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 576px) {
  .lpgas__fee-table th,
  .lpgas__fee-table td {
    padding: 1.25rem 1rem;
    font-size: 1.125rem;
  }
}
.lpgas__fee-table thead th {
  background-color: var(--main-col-light);
  color: var(--text-col, #333);
  font-weight: 600;
}
.lpgas__fee-table tbody td {
  background-color: #fff;
}
.lpgas__fee-table .lpgas__fee-table_kubun {
  width: 14%;
  font-weight: 600;
}
.lpgas__fee-table .lpgas__fee-table_range {
  width: 30%;
}
.lpgas__fee-table .lpgas__fee-table_fee,
.lpgas__fee-table .lpgas__fee-table_unit {
  width: 28%;
}

.lpgas__formula {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem 0 2rem;
}
.lpgas__formula .lpgas__formula-table {
  width: auto;
  border: none;
  font-size: 1rem;
}
@media (min-width: 576px) {
  .lpgas__formula .lpgas__formula-table {
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) {
  .lpgas__formula .lpgas__formula-table {
    font-size: 1.5rem;
  }
}
.lpgas__formula .lpgas__formula-table td {
  padding: 0.5rem 0.75rem;
  border: none;
  vertical-align: middle;
}
.lpgas__formula .lpgas__formula-table td.summary {
  font-weight: 600;
  white-space: nowrap;
}
.lpgas__formula .lpgas__formula-table td.equal {
  width: 1.5rem;
  font-weight: 600;
  text-align: center;
}
.lpgas__formula .lpgas__formula-table td.formula {
  text-align: left;
}

.lpgas__example-title {
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 1.125rem;
}
@media (min-width: 576px) {
  .lpgas__example-title {
    font-size: 1.375rem;
  }
}

.lpgas__example-area {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid var(--text-col);
  background-color: #fff;
}
@media (min-width: 576px) {
  .lpgas__example-area {
    padding: 2rem;
  }
}
.lpgas__example-area p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.8;
}
@media (min-width: 576px) {
  .lpgas__example-area p {
    font-size: 1.125rem;
  }
}
.lpgas__example-area p:last-child {
  margin-bottom: 0;
}
.lpgas__example-area p strong {
  font-weight: 700;
}
.lpgas__example-area .lpgas__example-calc {
  -moz-column-gap: 0.5em;
  display: grid;
  grid-template-columns: max-content auto;
       column-gap: 0.5em;
  font-size: 1rem;
  line-height: 1.9;
}
@media (min-width: 576px) {
  .lpgas__example-area .lpgas__example-calc {
    font-size: 1.125rem;
  }
}
.lpgas__example-area .lpgas__example-calc .lpgas__example-calc-prefix {
  grid-row: 1;
  grid-column: 1;
}
.lpgas__example-area .lpgas__example-calc .lpgas__example-calc-eq {
  grid-column: 2;
}
@media (max-width: 499px) {
  .lpgas__example-area .lpgas__example-calc .lpgas__example-calc-tail {
    display: block;
    padding-left: 2em;
  }
}
.lpgas__example-area .lpgas__example-calc strong {
  font-weight: 700;
}

.lpgas__calc-portal-note {
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
}
@media (min-width: 576px) {
  .lpgas__calc-portal-note {
    font-size: 1rem;
  }
}

.lpgas__external-link {
  color: #1a73e8;
  text-decoration: underline;
}
.lpgas__external-link:hover, .lpgas__external-link:focus {
  color: #1558b0;
}
.lpgas__external-link:visited {
  color: #1a73e8;
}
.lpgas__external-link::after {
  display: inline-block;
  margin-left: 0.35em;
  content: "\f08e";
  font: var(--fa-font-solid);
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: baseline;
}

.lpgas__payment-subtitle {
  position: relative;
  padding: 0.2em 0;
  color: var(--text-col, #5d5d5d);
  font-weight: 600;
  font-size: 1.125rem;
}
@media (min-width: 576px) {
  .lpgas__payment-subtitle {
    font-size: 1.25rem;
  }
}

.lpgas__payment-term {
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  background-color: #efefef;
  font-size: 0.95rem;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .lpgas__payment-term {
    font-size: 1rem;
  }
}
.lpgas__payment-term strong {
  font-weight: 700;
}

.lpgas__toriatsukai-table th {
  width: 30%;
  padding: 1rem;
  border-right: none;
  border-left: none;
  background-color: var(--main-col-light);
  font-size: 1.125rem;
  text-align: left;
  vertical-align: top;
}
@media (min-width: 576px) {
  .lpgas__toriatsukai-table th {
    width: 220px;
    padding: 2rem;
    font-size: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .lpgas__toriatsukai-table th {
    width: 280px;
    padding: 2.5rem 2rem;
  }
}
.lpgas__toriatsukai-table td {
  width: 70%;
  padding: 1rem;
  border-right: none;
  border-left: none;
  background-color: var(--main-col-lightest);
  font-size: 1rem;
  line-height: 1.9;
}
@media (min-width: 576px) {
  .lpgas__toriatsukai-table td {
    width: calc(100% - 220px);
    padding: 2rem;
    font-size: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .lpgas__toriatsukai-table td {
    width: calc(100% - 280px);
    padding: 2.5rem 2rem;
  }
}
.lpgas__toriatsukai-table td ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lpgas__toriatsukai-table td ul li {
  display: inline;
}
.lpgas__toriatsukai-table td ul li:not(:last-child)::after {
  margin: 0 0.1em;
  content: "・";
}
.lpgas__toriatsukai-table td ul.lpgas__list--vertical li {
  display: block;
  line-height: 1.9;
}
.lpgas__toriatsukai-table td ul.lpgas__list--vertical li:not(:last-child)::after {
  content: none;
}

.lpgas__credit-card {
  width: 100%;
  border: 2px solid var(--main-col);
  border-radius: 10px;
}
.lpgas__credit-card .lpgas__credit-card-grid {
  width: 90%;
  margin: 2.5rem auto;
}
@media (min-width: 576px) {
  .lpgas__credit-card .lpgas__credit-card-grid {
    width: 70%;
  }
}
@media (min-width: 768px) {
  .lpgas__credit-card .lpgas__credit-card-grid {
    width: 90%;
  }
}
.lpgas__credit-card .lpgas__credit-card-grid .lpgas__credit-card-grid-item {
  justify-content: center;
  margin-bottom: 1.5rem;
}
.lpgas__credit-card .lpgas__credit-card-grid .lpgas__credit-card-grid-item .lpgas__credit-card-grid-item-wrapper {
  display: flex;
  justify-content: center;
  height: 70px;
  gap: 15px;
}
.lpgas__credit-card .lpgas__credit-card-grid .lpgas__credit-card-grid-item .lpgas__credit-card-grid-item-wrapper .lpgas__credit-card-image {
  display: flex;
  justify-content: center;
  width: 140px;
  height: 70px;
}
.lpgas__credit-card .lpgas__credit-card-grid .lpgas__credit-card-grid-item .lpgas__credit-card-grid-item-wrapper .lpgas__credit-card-image img {
  -o-object-fit: contain;
     object-fit: contain;
}

.lpgas__app_grid .lpgas__app_grid-item {
  margin-bottom: 1.5rem;
}
.lpgas__app_grid .lpgas__app_grid-item .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.lpgas__app_grid .lpgas__app_grid-item .app_name {
  width: 100%;
  text-align: center;
}
.lpgas__app_grid .lpgas__app_grid-item.lpgas__app_grid-item--shrink-60 .image-container img {
  width: 60%;
  height: auto;
  margin: 0 auto;
}

.lpgas__compliance .lpgas__compliance-heading {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 1.75rem;
  font-weight: 700;
  font-size: 1.125rem;
}
@media (min-width: 576px) {
  .lpgas__compliance .lpgas__compliance-heading {
    font-size: 1.25rem;
  }
}
.lpgas__compliance .lpgas__compliance-heading::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
  background-color: var(--main-col);
  content: "";
}
.lpgas__compliance .lpgas__compliance-list {
  margin: 0 0 2.5rem;
  padding-left: 1.5rem;
  list-style: none;
}
@media (min-width: 576px) {
  .lpgas__compliance .lpgas__compliance-list {
    padding-left: 2.25rem;
  }
}
.lpgas__compliance .lpgas__compliance-list li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
}
@media (min-width: 576px) {
  .lpgas__compliance .lpgas__compliance-list li {
    font-size: 1.0625rem;
  }
}
.lpgas__compliance .lpgas__compliance-list li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--main-col);
  content: "";
}

.btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  gap: 1rem 2rem;
}
.btn-wrapper a.btn {
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 375px;
  height: 60px;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.btn-wrapper a.btn.btn-outlined {
  border: 2px solid var(--main-col);
  border-radius: 999px;
  background: #fff;
  color: var(--main-col);
  transition: all 0.3s ease;
}
.btn-wrapper a.btn.btn-outlined:hover {
  background: var(--main-col);
  color: #fff;
}