@charset "UTF-8";
.text-strong {
  color: #2E5884;
  font-weight: 700;
}

.text-list {
  text-indent: -1em;
  padding-left: 1em;
}

.text-bold {
  font-weight: 700;
}

.text-red {
  color: #CA0817;
  font-weight: 700;
}

.text-blue {
  color: #2E5884;
  font-weight: 700;
}

.text-gray {
  color: #666666;
}

.content__title-strong {
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .content__title-strong {
    text-align: center;
  }
}

.contact__info-title {
  font-size: 14px;
}

.trouble__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .trouble__list {
    grid-template-columns: 1fr;
  }
}
.trouble__list-item {
  border: 1px solid #dddddd;
}
.trouble__list-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  text-decoration: none;
  color: #333333;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .trouble__list-link:hover {
    opacity: 0.7;
  }
}
.trouble__list-image {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
}
.trouble__list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media only screen and (max-width: 767px) {
  .trouble__list-image {
    width: 84px;
    height: 84px;
  }
}
.trouble__list-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.trouble__btn {
  display: inline-block;
  width: 100%;
  padding: 12px;
  border: 1px solid #3A6EA5;
  border-radius: 4px;
  color: #3A6EA5;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
  text-align: center;
}
@media (any-hover: hover) {
  .trouble__btn:hover {
    background-color: #3A6EA5;
    color: #ffffff;
  }
}

.trouble .notice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media only screen and (max-width: 767px) {
  .trouble .notice-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.notice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media only screen and (max-width: 767px) {
  .notice-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.notice-card {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
}
.notice-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.step__list {
  display: grid;
  gap: 40px;
}
@media only screen and (max-width: 767px) {
  .step__list {
    gap: 40px;
  }
}
@media (min-width: 768px) {
  .step__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step__list-flex {
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .step__list-flex {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .step__list--col02 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .step__list-img {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .step__list-img {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step__item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.step__item-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: #CA0817;
  color: #ffffff;
  font-size: clamp(calc(15 / 16 * 1rem), calc(18 / 1440 * 100vw), calc(18 / 16 * 1rem));
  font-weight: 700;
}
.step__item-title {
  margin: 0;
  font-size: clamp(calc(16 / 16 * 1rem), calc(20 / 1440 * 100vw), calc(20 / 16 * 1rem));
  font-weight: 700;
}
.step__item-image img {
  width: 100%;
  height: auto;
  display: block;
}
.step__item-text {
  font-size: clamp(calc(14 / 16 * 1rem), calc(16 / 1440 * 100vw), calc(16 / 16 * 1rem));
  line-height: 1.8;
}
.step__sub-title {
  background-color: #2E5884;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  padding: 0.5em 1em;
}
.step__caption {
  text-align: center;
}
.step__btn {
  text-align: right;
}

.caution-box {
  padding: 16px 20px;
  border: 1px solid #CA0817;
  border-radius: 8px;
}
.caution-box__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.caution-box__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.caution-box__icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #CA0817;
  mask-image: url("/assets/images/common/icon_emergency_heat.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.caution-box__icon--alert::before {
  mask-image: url("/assets/images/common/icon_alert.svg");
}
.caution-box__label {
  font-size: 16px;
  font-weight: 700;
  color: #CA0817;
}
.caution-box__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.bg_blue_box {
  background-color: #F0F7FF;
  padding: 20px;
}

.step-ex__list {
  display: grid;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .step-ex__list {
    gap: 20px;
  }
}
@media (min-width: 768px) {
  .step-ex__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 768px) {
  .step-ex__list--col02 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .step-ex__item + .step-ex__item {
    border-top: 1px solid #CCD6DF;
    padding-top: 20px;
  }
}
.step-ex__text--caption {
  font-size: 14px;
  padding-top: 0.5em;
}

.alert-box {
  padding: 24px;
  border: 2px solid #CA0817;
  border-radius: 12px;
  display: flex;
  gap: 40px;
}
@media only screen and (max-width: 767px) {
  .alert-box {
    flex-direction: column;
    gap: 20px;
  }
}
.alert-box__image {
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .alert-box__image {
    width: 100%;
  }
}
.alert-box__image img {
  width: 100%;
  height: auto;
  display: block;
}
.alert-box__checklist {
  padding: 0;
  list-style: none;
}
.alert-box__checklist li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(calc(15 / 16 * 1rem), calc(18 / 1440 * 100vw), calc(18 / 16 * 1rem));
  font-weight: 700;
}
.alert-box__checklist li + li {
  margin-top: 12px;
}
.alert-box__checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #CA0817;
  mask-image: url("/assets/images/common/icon_check.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.alert-box__text {
  margin: 0;
  font-size: clamp(calc(14 / 16 * 1rem), calc(16 / 1440 * 100vw), calc(16 / 16 * 1rem));
  line-height: 1.8;
}

.table--scrollable {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .table--scrollable {
    width: auto !important;
    table-layout: auto !important;
  }
}

.video-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media only screen and (max-width: 767px) {
  .video-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --- 共通・PC版のスタイル --- */
.overflow__inner {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .overflow__inner {
    width: max-content;
  }
}

.overflow__box {
  width: 100%;
}

.common__table {
  border-collapse: collapse;
}
.common__table small {
  display: block;
  line-height: 1.2;
}

/* --- スマホ版（768px以下）のスタイル --- */
@media only screen and (max-width: 767px) {
  /* 横スクロールを許可 */
  .overflow__box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSのスクロールを滑らかにする */
  }
  /* セル内のテキストが勝手に改行されて潰れないようにする */
  .common__table th,
.common__table td {
    white-space: nowrap;
  }
}
/* --- ScrollHintのアイコン位置の上書き --- */
.scroll-hint-icon {
  top: 40px !important;
}

.gas-table th {
  background-color: #EEEEEE;
}

.gas-table td {
  background-color: #ffffff;
}

.js-table-opener {
  height: auto;
}

.js-table-opener::after {
  background: none;
}

.price-list {
  border: 1px solid #2E5884;
  overflow: hidden;
}
.price-list__row {
  display: grid;
  grid-template-columns: 1fr;
}
.price-list__row + .price-list__row {
  border-top: 1px solid #2E5884;
}
@media (min-width: 768px) {
  .price-list__row {
    grid-template-columns: 240px 1fr;
  }
}
.price-list__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: #CCD6DF;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #2E5884;
}
@media (min-width: 768px) {
  .price-list__label {
    border-right: 1px solid #2E5884;
    border-bottom: none;
  }
}
.price-list__content {
  padding: 20px 24px;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.price-list__content p + p {
  margin-top: 12px;
}
.price-list + .note {
  margin-top: 1em;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-list__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border: 1px solid #EEEEEE;
}
.info-list__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.info-list__icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #3A6EA5;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.info-list__item:nth-child(1) .info-list__icon::before {
  mask-image: url("/assets/images/common/icon_issue.svg");
}
.info-list__item:nth-child(2) .info-list__icon::before {
  mask-image: url("/assets/images/common/icon_support.svg");
}
.info-list__item:nth-child(3) .info-list__icon::before {
  mask-image: url("/assets/images/common/icon_calendar.svg");
}
.info-list__item:nth-child(4) .info-list__icon::before {
  mask-image: url("/assets/images/common/icon_swap.svg");
}
.info-list__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .info-list__text {
    font-size: 16px;
  }
}

.ask-box {
  padding: 16px 20px;
  border: 1px solid #2E5884;
}/*# sourceMappingURL=trouble.css.map */