body.page-template-page-useful-info {
  background-color: #fff;
}

.useful-info-fv,
.useful-info-fv *,
.useful-info-fv *::before,
.useful-info-fv *::after {
  box-sizing: border-box;
}

.useful-info-fv {
  width: 100%;
  background: #f3f9fd;
  overflow: clip;
}

.useful-info-fv__inner {
  position: relative;
  --cqw: min(1px, calc(100vw / 1400));
  max-width: calc(1400 * var(--cqw));
  margin-inline: auto;
  min-height: calc(320 * var(--cqw));
  overflow: hidden;
}
@media (max-width: 767px) {
  .useful-info-fv__inner {
    --cqw: calc(100vw / 390);
    max-width: none;
    min-height: 0;
    overflow: visible;
  }
}

.useful-info-fv__sp-image {
  display: none;
}
@media (max-width: 767px) {
  .useful-info-fv__sp-image {
    display: block;
    width: 100%;
    height: auto;
  }
}

.useful-info-fv__decos {
  position: absolute;
  inset: 0;
  z-index: 0;
}
@media (max-width: 767px) {
  .useful-info-fv__decos {
    display: none;
  }
}

.useful-info-fv__strip {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(96 * var(--cqw));
  height: auto;
}

@media (min-width: 1401px) {
  .useful-info-fv__inner {
    overflow: visible;
  }
  .useful-info-fv__strip {
    left: calc(50% - 50vw);
  }
}

.useful-info-fv__photo {
  position: absolute;
  left: calc(35 * var(--cqw));
  top: calc(-115 * var(--cqw));
  width: calc(1330 * var(--cqw));
  height: auto;
}

.useful-info-fv__bubble {
  position: absolute;
  left: calc(1221 * var(--cqw));
  top: calc(37 * var(--cqw));
  width: calc(136 * var(--cqw));
  height: auto;
}

.useful-info-fv__body {
  position: absolute;
  z-index: 2;
  left: calc(106 * var(--cqw));
  top: calc(37 * var(--cqw));
  width: calc(358 * var(--cqw));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(22 * var(--cqw));
}
@media (max-width: 767px) {

  .useful-info-fv__body {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.useful-info-fv__badge {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--cqw));
  width: fit-content;
  margin: 0;
  padding: calc(10 * var(--cqw)) calc(18 * var(--cqw)) calc(10 * var(--cqw)) calc(16 * var(--cqw));
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 1px 10px rgba(18, 88, 153, 0.15);
  color: #0491dd;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(14 * var(--cqw));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.useful-info-fv__badge-icon {
  display: inline-flex;
}
.useful-info-fv__badge-icon::before {
  content: "import_contacts";
  font-family: 'Material Symbols Outlined';
  font-size: calc(16 * var(--cqw));
  line-height: 1;
  color: #0491dd;
}

.useful-info-fv__copy {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--cqw));
}

.useful-info-fv__heading {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--cqw));
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.5;
}

.useful-info-fv__heading-line1 {
  font-size: calc(28 * var(--cqw));
  letter-spacing: 3.92px;
  color: #343434;
  white-space: nowrap;
}

.useful-info-fv__heading-line2 {
  font-size: calc(52 * var(--cqw));
  letter-spacing: 6.76px;
  color: #0491dd;
  white-space: nowrap;
}

.useful-info-fv__lead {
  margin: 0;
  color: #343434;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(16 * var(--cqw));
  font-weight: 500;
  line-height: 1.64;
  letter-spacing: 2.688px;
}

.page-useful-info .site-cta-wrap {

  margin-block: calc(48 * var(--cqs));
}
@media (max-width: 767px) {
  .page-useful-info .site-cta-wrap {
    margin-block: calc(28 * var(--cqs));
  }
}

.useful-info-inner {
  --cqw: min(1px, calc(100vw / 1400));
  max-width: calc(1400 * var(--cqw));
  margin-inline: auto;
  padding-inline: calc(95 * var(--cqw));
  min-height: 40vh;
}
@media (max-width: 767px) {
  .useful-info-inner {
    --cqw: calc(100vw / 390);
    padding-inline: calc(16 * var(--cqw));
  }
}

.useful-info-block {
  margin-top: calc(56 * var(--cqw));
}
.useful-info-block:first-child {
  margin-top: 0;
}
@media (max-width: 767px) {
  .useful-info-block {
    margin-top: calc(40 * var(--cqw));
  }
}

.useful-info-block__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(24 * var(--cqw));
  font-weight: 700;
  color: #0491dd;
  letter-spacing: 0.02em;
  margin: 0 0 calc(24 * var(--cqw));
  padding-bottom: calc(14 * var(--cqw));
  border-bottom: 3px solid #50bbf5;
}
@media (max-width: 767px) {
  .useful-info-block__heading {
    font-size: calc(19 * var(--cqw));
    margin-bottom: calc(16 * var(--cqw));
    padding-bottom: calc(10 * var(--cqw));
  }
}
