/* ============================================================
   SP (max-width: 767px) overrides
  Generated mobile top-page styles
   Class: .LP-typebold (= .div-wrapper in original Figma export)
   ============================================================ */
@media screen and (max-width: 767px) {

  body.page-top .global-header-reserve {
    height: 48px !important;
  }

.LP-typebold {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding: 86px 0px 0px;
  position: relative;
  background-color: #ffffff;
}

.LP-typebold .CV {
  position: relative;
  width: 100%;
  height: 510px;
}

.LP-typebold .hero-c {
  position: relative;
  height: 510px;
  background: linear-gradient(
    188deg,
    rgba(55, 125, 194, 1) 0%,
    rgba(26, 60, 141, 1) 82%
  );
}

.LP-typebold .rectangle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 390px;
  height: 351px;
}

.LP-typebold .group {
  position: absolute;
  top: 26px;
  left: 73px;
  width: 229px;
  height: 167px;
}

.LP-typebold .element-realistic {
  position: absolute;
  top: 226px;
  left: 133px;
  width: 243px;
  height: 284px;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.LP-typebold .hero-content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: calc(50.00% - 77px);
  left: calc(50.00% - 177px);
}

.LP-typebold .hero {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Noto Sans", Helvetica;
  font-weight: 700;
  color: var(--bg-01);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 33.6px;
}

.LP-typebold .text-wrapper {
  position: absolute;
  top: 459px;
  left: 73px;
  width: 295px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 17px;
}

.LP-typebold .frame {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 0px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .ma {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  align-items: center;
  gap: 16px;
  padding: 4px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--e-5-3e-3e);
}

.LP-typebold .ma-desc {
  margin-top: -1px;
  font-weight: var(--ja-SP-caption-12px-regular-font-weight);
  color: var(--e-5-3e-3e);
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  position: relative;
  width: fit-content;
  font-family: var(--ja-SP-caption-12px-regular-font-family);
  letter-spacing: var(--ja-SP-caption-12px-regular-letter-spacing);
  font-style: var(--ja-SP-caption-12px-regular-font-style);
}

body.page-top .LP-typebold .ma-wrapper .ma .ma-desc {
  font-size: 14px;
  line-height: 1.5;
}

.LP-typebold .feature-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 20px;
  padding: 20px 80px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--bg-01);
}

.LP-typebold .div {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: center;
  gap: 80px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -60px;
  margin-right: -60px;
}

.LP-typebold .feat-left {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .feat {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-SP-h1-28px-bold-font-family);
  font-weight: var(--ja-SP-h1-28px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h1-28px-bold-font-size);
  text-align: center;
  letter-spacing: var(--ja-SP-h1-28px-bold-letter-spacing);
  line-height: var(--ja-SP-h1-28px-bold-line-height);
  font-style: var(--ja-SP-h1-28px-bold-font-style);
}

.LP-typebold .rectangle-2 {
  position: relative;
  width: var(--ta-heading-accent-bar-width, 100px);
  height: var(--ta-heading-accent-bar-height, 2px);
  background-color: var(--ta-heading-accent-bar-color, var(--accentlite, #ffa54f));
}

.LP-typebold .frame-2 {
  display: flex;
  flex-direction: column;
  width: min(350px, calc(100% - 40px));
  align-items: flex-start;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .ma-2 {
  display: flex;
  height: 74px;
  align-items: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--bg-01);
  border-radius: 6px;
  border: 1px solid;
  border-color: var(--cardborder);
  box-shadow: 0px 4px 10px #8a97a533;
}

.LP-typebold .ellipse {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: var(--accentlite);
  border-radius: 6px;
}

.LP-typebold .text-wrapper-2 {
  font-weight: var(--ja-SP-h3-18px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h3-18px-bold-font-size);
  line-height: var(--ja-SP-h3-18px-bold-line-height);
  white-space: nowrap;
  position: relative;
  width: fit-content;
  font-family: var(--ja-SP-h3-18px-bold-font-family);
  letter-spacing: var(--ja-SP-h3-18px-bold-letter-spacing);
  font-style: var(--ja-SP-h3-18px-bold-font-style);
}

.LP-typebold .ma-desc-2 {
  margin-right: -8px;
  font-weight: var(--ja-SP-h3-18px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h3-18px-bold-font-size);
  line-height: var(--ja-SP-h3-18px-bold-line-height);
  white-space: nowrap;
  position: relative;
  width: fit-content;
  font-family: var(--ja-SP-h3-18px-bold-font-family);
  letter-spacing: var(--ja-SP-h3-18px-bold-letter-spacing);
  font-style: var(--ja-SP-h3-18px-bold-font-style);
}

.LP-typebold .auto-feature-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 80px;
  padding: 40px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--bg-01);
}

.LP-typebold .frame-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .af {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .element {
  position: relative;
  width: 318.27px;
  height: 45px;
}

.LP-typebold .frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .af-desc {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--ja-SP-body-16px-medium-font-family);
  font-weight: var(--ja-SP-body-16px-medium-font-weight);
  color: var(--sub-text);
  font-size: var(--ja-SP-body-16px-medium-font-size);
  letter-spacing: var(--ja-SP-body-16px-medium-letter-spacing);
  line-height: var(--ja-SP-body-16px-medium-line-height);
  font-style: var(--ja-SP-body-16px-medium-font-style);
}

.LP-typebold .hero-cta {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 18px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--accent);
  border-radius: 6px;
  box-shadow: 2px 2px 10px #ffffff33;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.LP-typebold .hero-cta-text {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  color: var(--bg-01);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.LP-typebold .hero-cta-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-PC-body-16px-medium-font-family);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  color: var(--bg-01);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  line-height: var(--ja-PC-body-16px-medium-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-body-16px-medium-font-style);
}

.LP-typebold .af-2 {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 0px 0px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .img {
  position: relative;
  width: 316.29px;
  height: 40.37px;
  aspect-ratio: 7.83;
}

.LP-typebold .hero-cta-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #357ae1;
  border-radius: 6px;
}

.LP-typebold .hero-cta-4 {
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-body-16px-medium-font-family);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  color: var(--bg-01);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  line-height: var(--ja-PC-body-16px-medium-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-body-16px-medium-font-style);
}

.LP-typebold .div-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 80px;
  padding: 40px 20px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--primary-pale);
}

.LP-typebold .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .ma-3 {
  display: flex;
  flex-direction: column;
  width: min(350px, calc(100% - 40px));
  align-items: center;
  gap: 16px;
  padding: 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 12px;
}

.LP-typebold .frame-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .frame-6 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .frame-7 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .frame-8 {
  position: relative;
  width: 39px;
  height: 32px;
}

.LP-typebold .ma-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-SP-h2-24px-bold-font-family);
  font-weight: var(--ja-SP-h2-24px-bold-font-weight);
  color: var(--mane-color);
  font-size: var(--ja-SP-h2-24px-bold-font-size);
  letter-spacing: var(--ja-SP-h2-24px-bold-letter-spacing);
  line-height: var(--ja-SP-h2-24px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-SP-h2-24px-bold-font-style);
}

.LP-typebold .ma-desc-3 {
  font-weight: var(--ja-SP-h1-28px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h1-28px-bold-font-size);
  text-align: center;
  line-height: var(--ja-SP-h1-28px-bold-line-height);
  white-space: nowrap;
  position: relative;
  width: fit-content;
  font-family: var(--ja-SP-h1-28px-bold-font-family);
  letter-spacing: var(--ja-SP-h1-28px-bold-letter-spacing);
  font-style: var(--ja-SP-h1-28px-bold-font-style);
}

.LP-typebold .frame-9 {
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .ma-desc-4 {
  position: relative;
  align-self: stretch;
  font-family: var(--ja-SP-caption-12px-regular-font-family);
  font-weight: var(--ja-SP-caption-12px-regular-font-weight);
  color: var(--sub-text);
  font-size: var(--ja-SP-caption-12px-regular-font-size);
  letter-spacing: var(--ja-SP-caption-12px-regular-letter-spacing);
  line-height: var(--ja-SP-caption-12px-regular-line-height);
  font-style: var(--ja-SP-caption-12px-regular-font-style);
}

.LP-typebold .frame-10 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .ec {
  display: flex;
  flex-direction: column;
  width: 170px;
  align-items: center;
  gap: 9.75px;
  padding: 10px;
  position: relative;
  background-color: var(--bg-01);
  border-radius: 12px; /* カード角丸（PC側 .ec と統一。2026-07-08） */
}

.LP-typebold .af-img {
  position: relative;
  width: 148.78px;
  height: 97.5px;
  margin-left: -0.66px;
}

.LP-typebold .ec-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .ec-title {
  position: relative;
  width: fit-content;
  margin-top: -0.49px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 14.6px;
  text-align: center;
  letter-spacing: 0.97px;
  line-height: 24.9px;
}

.LP-typebold .af-img-2 {
  position: relative;
  width: 150.99px;
  height: 97.5px;
  margin-left: -1.62px;
}

.LP-typebold .ec-title-2 {
  margin-top: -0.49px;
  margin-left: -2.5px;
  margin-right: -2.5px;
  font-size: 14.6px;
  text-align: center;
  letter-spacing: 0.97px;
  line-height: 24.9px;
  position: relative;
  width: fit-content;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: var(--primary-dark);
}

.LP-typebold .iphone {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 80px;
  padding: 20px 20px 40px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--primary-pale);
}

.LP-typebold .frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .ma-4 {
  display: flex;
  flex-direction: column;
  width: min(350px, calc(100% - 40px));
  align-items: center;
  padding: 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--bg-01);
  border-radius: 12px;
}

.LP-typebold .ma-desc-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-SP-h3-18px-bold-font-family);
  font-weight: var(--ja-SP-h3-18px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h3-18px-bold-font-size);
  text-align: center;
  letter-spacing: var(--ja-SP-h3-18px-bold-letter-spacing);
  line-height: var(--ja-SP-h3-18px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-SP-h3-18px-bold-font-style);
}

.LP-typebold .frame-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .component {
  position: relative;
  width: 51.82px;
  height: 38.92px;
}

.LP-typebold .clip-path-group {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  aspect-ratio: 1;
}

.LP-typebold .group-2 {
  position: absolute;
  width: 58.36%;
  height: 77.70%;
  top: 22.30%;
  left: 41.64%;
  aspect-ratio: 1;
}

.LP-typebold .ma-label-2 {
  position: relative;
  width: fit-content;
  font-family: var(--ja-SP-h3-18px-bold-font-family);
  font-weight: var(--ja-SP-h3-18px-bold-font-weight);
  color: var(--mane-color);
  font-size: var(--ja-SP-h3-18px-bold-font-size);
  letter-spacing: var(--ja-SP-h3-18px-bold-letter-spacing);
  line-height: var(--ja-SP-h3-18px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-SP-h3-18px-bold-font-style);
}

.LP-typebold .ma-title-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .ma-title {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: fit-content;
  margin-top: -1px;
  font-family: "DIN 2014 Narrow-Bold", Helvetica;
  font-weight: 400;
  color: var(--accent);
  font-size: 96px;
  line-height: 96px;
}

.LP-typebold .span {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 134.4px;
}

.LP-typebold .text-wrapper-3 {
  font-family: var(--ja-PC-h2-28px-bold-font-family);
  font-weight: var(--ja-PC-h2-28px-bold-font-weight);
  font-size: var(--ja-PC-h2-28px-bold-font-size);
  letter-spacing: var(--ja-PC-h2-28px-bold-letter-spacing);
  line-height: var(--ja-PC-h2-28px-bold-line-height);
  font-style: var(--ja-PC-h2-28px-bold-font-style);
}

.LP-typebold .group-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  aspect-ratio: 1;
}

.LP-typebold .frame-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 308px;
  background-color: var(--bg-01);
  border-radius: 14.02px;
  box-shadow: var(--card);
}

.LP-typebold .frame-14 {
  display: flex;
  flex-direction: column;
  width: 310px;
  align-items: center;
  gap: 14px;
  position: relative;
  top: calc(50.00% - 134px);
  left: calc(50.00% - 155px);
}

.LP-typebold .group-4 {
  position: relative;
  width: 164px;
  height: 122px;
}

.LP-typebold .frame-15 {
  display: flex;
  flex-direction: column;
  height: 132px;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP-typebold .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-SP-h3-18px-bold-font-family);
  font-weight: var(--ja-SP-h3-18px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h3-18px-bold-font-size);
  letter-spacing: var(--ja-SP-h3-18px-bold-letter-spacing);
  line-height: var(--ja-SP-h3-18px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-SP-h3-18px-bold-font-style);
}

.LP-typebold .af-desc-2 {
  position: relative;
  align-self: stretch;
  font-family: var(--ja-SP-body-16px-medium-font-family);
  font-weight: var(--ja-SP-body-16px-medium-font-weight);
  color: var(--sub-text);
  font-size: var(--ja-SP-body-16px-medium-font-size);
  letter-spacing: var(--ja-SP-body-16px-medium-letter-spacing);
  line-height: var(--ja-SP-body-16px-medium-line-height);
  font-style: var(--ja-SP-body-16px-medium-font-style);
}

.LP-typebold .easy-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 80px;
  padding: 40px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--primary-pale);
}

.LP-typebold .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-SP-h1-28px-bold-font-family);
  font-weight: var(--ja-SP-h1-28px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h1-28px-bold-font-size);
  text-align: center;
  letter-spacing: var(--ja-SP-h1-28px-bold-letter-spacing);
  line-height: var(--ja-SP-h1-28px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-SP-h1-28px-bold-font-style);
}

.LP-typebold .frame-16 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .af-desc-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--ja-SP-h2-24px-bold-font-family);
  font-weight: var(--ja-SP-h2-24px-bold-font-weight);
  color: var(--accent);
  font-size: var(--ja-SP-h2-24px-bold-font-size);
  text-align: center;
  letter-spacing: var(--ja-SP-h2-24px-bold-letter-spacing);
  line-height: var(--ja-SP-h2-24px-bold-line-height);
  font-style: var(--ja-SP-h2-24px-bold-font-style);
}

.LP-typebold .group-5 {
  position: relative;
  width: 333.86px;
  height: 234.82px;
}

.LP-typebold .frame-17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-18 {
  position: relative;
  flex: 0 0 auto;
  margin-left: -0.12px;
  margin-right: -0.12px;
}

.LP-typebold .af-desc-4 {
  position: relative;
  align-self: stretch;
  font-family: var(--ja-PC-body-16px-medium-font-family);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  color: var(--sub-text);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  text-align: center;
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  line-height: var(--ja-PC-body-16px-medium-line-height);
  font-style: var(--ja-PC-body-16px-medium-font-style);
}

.LP-typebold .ec-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--bg-02);
  border-radius: 12px; /* カード角丸（PC側 .ec-2 と統一。2026-07-08） */
}

.LP-typebold .af-img-3 {
  position: relative;
  width: 300px;
  height: 200px;
  margin-left: -7px;
  margin-right: -7px;
  background-color: var(--primary-pale);
  border-radius: 12px;
}

.LP-typebold .invastgoldcard-omote {
  position: absolute;
  top: 64px;
  left: 115px;
  width: 175px;
  height: 109px;
  aspect-ratio: 1.6;
  object-fit: cover;
}

.LP-typebold .element-propercard {
  position: absolute;
  top: 26px;
  left: 10px;
  width: 168px;
  height: 106px;
  aspect-ratio: 1.59;
  object-fit: cover;
}

.LP-typebold .frame-19 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-20 {
  position: relative;
  width: 60px;
  height: 60px;
  margin-top: -6px;
  margin-bottom: -14px;
  aspect-ratio: 1;
}

.LP-typebold .af-desc-5 {
  position: relative;
  align-self: stretch;
  font-family: var(--ja-PC-body-16px-medium-font-family);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  color: var(--sub-text);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  line-height: var(--ja-PC-body-16px-medium-line-height);
  font-style: var(--ja-PC-body-16px-medium-font-style);
}

.LP-typebold .image {
  position: absolute;
  top: calc(50.00% - 77px);
  left: calc(50.00% - 135px);
  width: 271px;
  height: 154px;
  aspect-ratio: 1.76;
  object-fit: cover;
}

.LP-typebold .ec-title-3 {
  margin-left: -4px;
  position: relative;
  width: fit-content;
  font-family: var(--ja-SP-h3-18px-bold-font-family);
  font-weight: var(--ja-SP-h3-18px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-SP-h3-18px-bold-font-size);
  letter-spacing: var(--ja-SP-h3-18px-bold-letter-spacing);
  line-height: var(--ja-SP-h3-18px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-SP-h3-18px-bold-font-style);
}

.LP-typebold .frame-21 {
  margin-right: -14px;
  position: relative;
  width: 60px;
  height: 60px;
  margin-top: -6px;
  margin-bottom: -14px;
  aspect-ratio: 1;
}

.LP-typebold .img-2 {
  position: relative;
  width: 300px;
  height: 200px;
  margin-left: -7px;
  margin-right: -7px;
}

.LP-typebold .frame-22 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-23 {
  margin-right: -3px;
  position: relative;
  width: 60px;
  height: 60px;
  margin-top: -6px;
  margin-bottom: -14px;
  aspect-ratio: 1;
}

.LP-typebold .clicklogo {
  position: relative;
  width: 350.07px;
  height: 74px;
  margin-left: -0.04px;
  margin-right: -0.04px;
}

.LP-typebold .ma-desc-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: var(--card);
}

.LP-typebold .ma-desc-6 {
  margin-top: -1px;
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  white-space: nowrap;
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.LP-typebold .faq-section-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 40px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .faq-section {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
  padding: 80px 20px 40px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--bg-01);
}

.LP-typebold .frame-24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.LP-typebold .frame-25 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-26 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-27 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .frame-28 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--border);
}

.LP-typebold .frame-29 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .news-link {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--eg-PC-caption-12px-regular-font-family);
  font-weight: var(--eg-PC-caption-12px-regular-font-weight);
  color: var(--sub-text);
  font-size: var(--eg-PC-caption-12px-regular-font-size);
  letter-spacing: var(--eg-PC-caption-12px-regular-letter-spacing);
  line-height: var(--eg-PC-caption-12px-regular-line-height);
  white-space: nowrap;
  font-style: var(--eg-PC-caption-12px-regular-font-style);
}

.LP-typebold .news-link-2 {
  color: #ff197a;
  font-size: var(--ja-PC-caption-12px-medium-font-size);
  line-height: var(--ja-PC-caption-12px-medium-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-caption-12px-medium-font-family);
  font-weight: var(--ja-PC-caption-12px-medium-font-weight);
  letter-spacing: var(--ja-PC-caption-12px-medium-letter-spacing);
  white-space: nowrap;
  font-style: var(--ja-PC-caption-12px-medium-font-style);
}

.LP-typebold .news-link-3 {
  color: var(--text);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  line-height: var(--ja-PC-body-16px-medium-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-body-16px-medium-font-family);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  white-space: nowrap;
  font-style: var(--ja-PC-body-16px-medium-font-style);
}

.LP-typebold .frame-30 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--border);
}

.LP-typebold .news-link-4 {
  color: var(--mane-color);
  font-size: var(--ja-PC-caption-12px-medium-font-size);
  line-height: var(--ja-PC-caption-12px-medium-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-caption-12px-medium-font-family);
  font-weight: var(--ja-PC-caption-12px-medium-font-weight);
  letter-spacing: var(--ja-PC-caption-12px-medium-letter-spacing);
  white-space: nowrap;
  font-style: var(--ja-PC-caption-12px-medium-font-style);
}

.LP-typebold .news-link-5 {
  color: var(--e-5-3e-3e);
  font-size: var(--ja-PC-caption-12px-medium-font-size);
  line-height: var(--ja-PC-caption-12px-medium-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-caption-12px-medium-font-family);
  font-weight: var(--ja-PC-caption-12px-medium-font-weight);
  letter-spacing: var(--ja-PC-caption-12px-medium-letter-spacing);
  white-space: nowrap;
  font-style: var(--ja-PC-caption-12px-medium-font-style);
}

.LP-typebold .news-link-6 {
  color: var(--mane-color);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  line-height: var(--ja-PC-body-16px-medium-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-body-16px-medium-font-family);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  white-space: nowrap;
  font-style: var(--ja-PC-body-16px-medium-font-style);
}

.LP-typebold .frame-31 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 80px;
  padding: 80px 20px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: #0a2463;
}

.LP-typebold .frame-32 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .imgi-logo-footer {
  position: relative;
  width: 136px;
  height: 109px;
}

.LP-typebold .container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .heading {
  height: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP-typebold .text-wrapper-6 {
  position: absolute;
  top: 1px;
  left: 0;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  color: var(--accent);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.LP-typebold .list {
  display: flex;
  flex-direction: column;
  height: 244px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP-typebold .text-wrapper-7 {
  position: relative;
  flex: 1;
  width: 186.66px;
  margin-top: -1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: var(--bg-02);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
}

.LP-typebold .text-wrapper-8 {
  flex: 1;
  width: 186.66px;
  font-weight: 700;
  color: var(--bg-02);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
}

.LP-typebold .list-2 {
  display: flex;
  flex-direction: column;
  height: 216px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP-typebold .list-3 {
  display: flex;
  flex-direction: column;
  height: 76px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP-typebold .text-wrapper-9 {
  width: 186.67px;
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: var(--bg-02);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
}

.LP-typebold .text-wrapper-10 {
  position: relative;
  flex: 1;
  width: 186.67px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: var(--bg-02);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
}

.LP-typebold .list-4 {
  display: inline-flex;
  flex-direction: column;
  height: 104px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.LP-typebold .list-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .text-wrapper-11 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--bg-02);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
}

.LP-typebold .text-wrapper-12 {
  width: fit-content;
  font-weight: 700;
  color: var(--bg-02);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
}

.LP-typebold .container-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .text-wrapper-13 {
  font-weight: var(--ja-SP-caption-12px-regular-font-weight);
  color: var(--bg-01);
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--ja-SP-caption-12px-regular-font-family);
  font-size: var(--ja-SP-caption-12px-regular-font-size);
  letter-spacing: var(--ja-SP-caption-12px-regular-letter-spacing);
  line-height: var(--ja-SP-caption-12px-regular-line-height);
  font-style: var(--ja-SP-caption-12px-regular-font-style);
}

.LP-typebold .text-wrapper-14 {
  position: relative;
  align-self: stretch;
  font-family: var(--ja-SP-caption-12px-regular-font-family);
  font-weight: var(--ja-SP-caption-12px-regular-font-weight);
  color: var(--bg-01);
  font-size: var(--ja-SP-caption-12px-regular-font-size);
  letter-spacing: var(--ja-SP-caption-12px-regular-letter-spacing);
  line-height: var(--ja-SP-caption-12px-regular-line-height);
  font-style: var(--ja-SP-caption-12px-regular-font-style);
}

.LP-typebold .container-3 {
  gap: 19px;
  padding: 24px 20px;
  background-color: var(--sub-text);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .heading-2 {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.LP-typebold .text-wrapper-15 {
  flex: 1;
  margin-top: -1px;
  font-weight: 500;
  color: var(--bg-01);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
}

.LP-typebold .container-4 {
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.LP-typebold .text-wrapper-16 {
  font-weight: var(--ja-PC-caption-12px-medium-font-weight);
  color: #d1d5dc;
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--ja-PC-caption-12px-medium-font-family);
  font-size: var(--ja-PC-caption-12px-medium-font-size);
  letter-spacing: var(--ja-PC-caption-12px-medium-letter-spacing);
  line-height: var(--ja-PC-caption-12px-medium-line-height);
  font-style: var(--ja-PC-caption-12px-medium-font-style);
}

.LP-typebold .text-wrapper-17 {
  position: relative;
  align-self: stretch;
  font-family: var(--ja-PC-caption-12px-medium-font-family);
  font-weight: var(--ja-PC-caption-12px-medium-font-weight);
  color: #d1d5dc;
  font-size: var(--ja-PC-caption-12px-medium-font-size);
  letter-spacing: var(--ja-PC-caption-12px-medium-letter-spacing);
  line-height: var(--ja-PC-caption-12px-medium-line-height);
  font-style: var(--ja-PC-caption-12px-medium-font-style);
}

.LP-typebold .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  height: 43px;
  align-items: flex-start;
  padding: 12px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--bg-02);
}

.LP-typebold .text-wrapper-18 {
  position: relative;
  flex: 1;
  font-family: var(--ja-PC-caption-12px-medium-font-family);
  font-weight: var(--ja-PC-caption-12px-medium-font-weight);
  color: var(--bg-02);
  font-size: var(--ja-PC-caption-12px-medium-font-size);
  text-align: center;
  letter-spacing: var(--ja-PC-caption-12px-medium-letter-spacing);
  line-height: var(--ja-PC-caption-12px-medium-line-height);
  font-style: var(--ja-PC-caption-12px-medium-font-style);
}

.LP-typebold .all-rights-reserved-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.LP-typebold .all-rights-reserved {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--eg-PC-caption-12px-regular-font-family);
  font-weight: var(--eg-PC-caption-12px-regular-font-weight);
  color: var(--sub-text);
  font-size: var(--eg-PC-caption-12px-regular-font-size);
  text-align: center;
  letter-spacing: var(--eg-PC-caption-12px-regular-letter-spacing);
  line-height: var(--eg-PC-caption-12px-regular-line-height);
  white-space: nowrap;
  font-style: var(--eg-PC-caption-12px-regular-font-style);
}

.LP-typebold .group-6 {
  position: fixed;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 48px;
  z-index: 200;
}

.LP-typebold .hero-cta-5 {
  display: flex;
  width: 195px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 40px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--accent);
  border-radius: 6px 0px 0px 0px;
  box-shadow: 2px 2px 10px #ffffff33;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.LP-typebold .hero-cta-text-2 {
  color: var(--bg-01);
  position: relative;
  width: fit-content;
  margin-top: -12px;
  margin-bottom: -10px;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.LP-typebold .hero-cta-text-wrapper {
  display: flex;
  width: 195px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 40px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--bg-01);
  border-radius: 0px 6px 0px 0px;
  border: 1px solid;
  border-color: var(--mane-color);
  box-shadow: 2px 2px 10px #ffffff33;
}

.LP-typebold .hero-cta-text-3 {
  color: var(--mane-color);
  position: relative;
  width: fit-content;
  margin-top: -12px;
  margin-bottom: -10px;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.LP-typebold .navigation {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 350px;
  height: 58px;
display: none;
}

  /* ── Section-level width/margin guard (structural fix) ── */
  /* Protects PC HTML .frame and .div wrappers from SP class styles */
  .LP-typebold > .frame {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding-top: 70px !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  .LP-typebold > .frame > .div {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .LP-typebold > .frame > .div > .div {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Top page SP: main visual (Figma 2097:43910) */
  body.page-top .LP-typebold {
    --top-sp-mainvisual-scale: min(1, calc(100vw / 390px));
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }

  body.page-top .invast-sp-content {
    /* 100vw に対して常に等倍で追従させる（上限を1に固定すると390px超の幅で
       .invast-sp-hero__stage が縮こまり、外側の #1a3c8d 背景が左右に帯として露出する） */
    --invast-sp-scale: calc(100vw / 390px);
    display: block !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background: #fff;
  }

  /* SP は .invast-sp-content が正。PC マークアップ(.LP-typebold)は SP では表示しない
     （このファイル前半の .LP-typebold 向けモバイル再スタイルは旧方式の名残で、非表示により無効） */
  body.page-top .LP-typebold {
    display: none !important;
  }

  body.page-top .invast-sp-hero {
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(439px * var(--invast-sp-scale));
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #1a3c8d;
  }

  body.page-top .invast-sp-hero__stage {
    position: relative;
    flex: 0 0 390px;
    width: 390px;
    height: 439px;
    overflow: hidden;
    /* Figma 3133:20300: ベースグラデ + 右下の白21%三角(849x351, bottom -71px) */
    background:
      url("/img/common/invast-top-sp-mainvisual-diagonal.svg") right 0 bottom -71px / 849px 351px no-repeat,
      linear-gradient(197.89deg, #377dc2 21.51%, #1a3c8d 73.72%);
    transform: scale(var(--invast-sp-scale));
    transform-origin: top center;
  }

  body.page-top .invast-sp-hero__award {
    position: absolute;
    top: 49px;
    left: 243px;
    z-index: 5; /* MV内の最前面（title/note の 4 より上。2026-07-08 ユーザー指定） */
    width: 168.4px;
    height: 123px;
    pointer-events: none;
    /* Figma 3133:20302: アワードは旧比率のまま 0.7805 倍 (131.43x96) */
    transform: scale(0.7805);
    transform-origin: top left;
  }

  body.page-top .invast-sp-hero__award-laurel,
  body.page-top .invast-sp-hero__award-center {
    position: absolute;
    display: block;
    max-width: none;
  }

  body.page-top .invast-sp-hero__award-laurel {
    top: 19.12px;
    width: 72.64px;
    height: 103.88px;
  }

  body.page-top .invast-sp-hero__award-laurel--left {
    left: 0;
  }

  body.page-top .invast-sp-hero__award-laurel--right {
    right: 0;
  }

  body.page-top .invast-sp-hero__award-center {
    top: 0;
    left: 28.18px;
    width: 111.62px;
    height: 97.42px;
  }

  body.page-top .invast-sp-hero__phone {
    position: absolute;
    top: 145px;
    left: 133px;
    z-index: 2;
    display: block;
    width: 243.21px;
    height: 283.68px;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
    /* SP メインビジュアル: スマホ画像をゆっくり上下させて浮遊感を出す */
    animation: invast-sp-hero-float 4s ease-in-out infinite;
  }

  /* スマホ画像の浮遊アニメーション (上下 8px をなめらかに往復) */
  @keyframes invast-sp-hero-float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  body.page-top .invast-sp-hero__title {
    position: absolute;
    top: 33px;
    left: 20px;
    z-index: 4;
    margin: 0;
    color: #fff;
    font-family: var(--ta-font-family-ja);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.67;
    letter-spacing: 0;
    white-space: nowrap;
  }

  body.page-top .invast-sp-hero__note {
    position: absolute;
    top: 381px;
    left: 18px;
    z-index: 4;
    width: 295px;
    margin: 0;
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-notice {
    display: flex;
    /* お知らせバーが2枚になったため縦積み（PC .ma-wrapper の gap 10px と統一。2026-07-08） */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    background: #fff;
  }

  /* 注意書きバーは枠ごとリンク（a要素）。下線は引かない（2026-07-08 ユーザー指定） */
  body.page-top a.invast-sp-notice__item {
    text-decoration: none;
  }

  body.page-top .invast-sp-notice__item {
    width: min(348px, calc(100vw - 42px));
    padding: 4px 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--ta-color-error);
    border-radius: 4px;
    text-align: center;
  }

  body.page-top .invast-sp-notice__item p {
    margin: 0;
    color: var(--ta-color-error);
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  body.page-top .invast-sp-reasons {
    display: flex;
    width: min(21.875rem, calc(100vw - 2.5rem));
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin: 0 auto;
    padding: 20px 0 40px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-reasons__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-reasons__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  body.page-top .invast-sp-reasons__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-reasons__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.page-top .invast-sp-reasons__item {
    display: flex;
    width: 100%;
    min-height: 74px;
    align-items: center;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #ebf3fc;
    border-radius: 6px;
    box-shadow: var(--ta-shadow-card);
  }

  body.page-top .invast-sp-reasons__item p {
    margin: 0;
  }

  body.page-top .invast-sp-reasons__item span {
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffa54f;
  }

  body.page-top .invast-sp-services {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-services__inner {
    display: flex;
    width: min(350px, calc(100vw - 40px));
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  body.page-top .invast-sp-service {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding-top: 20px;
    box-sizing: border-box;
  }

  body.page-top .invast-sp-service__logo {
    display: block;
    width: 100%;
    height: auto;
  }

  body.page-top .invast-sp-service__logo--fx {
    max-width: 318.27px;
  }

  body.page-top .invast-sp-service__logo--cfd {
    max-width: 316.29px;
  }

  body.page-top .invast-sp-service__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  body.page-top .invast-sp-service__text {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-service__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 40px;
    box-sizing: border-box;
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
  }

  body.page-top .invast-sp-service__button--fx {
    background: var(--ta-color-primary-light);
    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
  }

  body.page-top .invast-sp-service__button--cfd {
    background: var(--ta-color-primary-light);
  }

  body.page-top .invast-sp-service__button span {
    font-size: 16px;
    font-weight: 500;
  }

  body.page-top .invast-sp-auto {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #ebf3fc;
  }

  body.page-top .invast-sp-auto__heading {
    display: flex;
    width: min(260px, 100%);
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-auto__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-auto__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-auto__content {
    display: flex;
    width: min(350px, calc(100vw - 40px));
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  body.page-top .invast-sp-auto-award {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
  }

  body.page-top .invast-sp-auto-award__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  body.page-top .invast-sp-auto-award__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  body.page-top .invast-sp-auto-award__label {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body.page-top .invast-sp-auto-award__label img {
    display: block;
    width: 39px;
    height: 32px;
  }

  body.page-top .invast-sp-auto-award__label span {
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  body.page-top .invast-sp-auto-award__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-auto-award__badge {
    display: block;
    width: 184.69px;
    height: auto;
  }

  body.page-top .invast-sp-auto-award__note {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-fee-card {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 7px rgba(235, 243, 252, 0.48);
  }

  body.page-top .invast-sp-fee-card__label {
    margin: 0;
    color: #0a2463;
    font-family: var(--ta-font-family-ja);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-fee-card__value {
    margin: 0;
  }

  /* Figma 3133:20512: 特殊形状の0円はアウトライン画像で再現（高さ141px） */
  body.page-top .invast-sp-fee-card__value img {
    display: block;
    width: auto;
    height: 141px;
    max-width: none;
  }

  body.page-top .invast-sp-auto__cards {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  body.page-top .invast-sp-auto-card {
    display: flex;
    width: calc((100% - 10px) / 2);
    min-height: 177.25px;
    flex-direction: column;
    align-items: center;
    gap: 9.75px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-auto-card__image {
    display: block;
    width: 100%;
    max-width: 148px;
    height: 97.5px;
    object-fit: contain;
  }

  body.page-top .invast-sp-auto-card__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 14.625px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.975px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-manual {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-manual__heading,
  body.page-top .invast-sp-tools__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-manual__title,
  body.page-top .invast-sp-tools__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-manual__bar,
  body.page-top .invast-sp-tools__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-manual__content {
    display: flex;
    width: min(350px, calc(100vw - 40px));
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  body.page-top .invast-sp-rate-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
  }

  body.page-top .invast-sp-rate-card__heading {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-rate-card__main {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  body.page-top .invast-sp-rate-card__pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  body.page-top .invast-sp-rate-card__flag {
    display: block;
    width: 51.83px;
    height: 38.92px;
  }

  body.page-top .invast-sp-rate-card__pair p {
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  body.page-top .invast-sp-rate-card__value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  body.page-top .invast-sp-rate-card__value span {
    font-family: var(--ta-font-family-en);
    font-size: 96px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* 0.2銭カード(1枚目)の数字は PC(.ma-title)と同じ通常幅 DIN 2014 に統一。
     --ta-font-family-en は Narrow(コンデンス)系のため 0 が潰れて見えていた（2026-07-08 ユーザー指定）。
     256円カード(2枚目)は PC(.ma-title-2)も Narrow のため据え置き */
  body.page-top .invast-sp-rate-card:first-child .invast-sp-rate-card__value span {
    font-family: "DIN 2014-Bold", Helvetica;
    font-weight: 400;
  }

  /* 0.2銭の縦位置を少しだけ下げる（2026-07-08 ユーザー指定。translate なので周囲の余白計算に影響しない） */
  body.page-top .invast-sp-rate-card:first-child .invast-sp-rate-card__value {
    transform: translateY(6px);
  }

  body.page-top .invast-sp-rate-card__note {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-swap-card {
    display: flex;
    width: 100%;
    min-height: 308px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 7px rgba(235, 243, 252, 0.48);
  }

  body.page-top .invast-sp-swap-card__image {
    display: block;
    width: 164px;
    height: 122px;
    object-fit: contain;
  }

  body.page-top .invast-sp-swap-card__body {
    display: flex;
    width: 100%;
    min-height: 132px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  body.page-top .invast-sp-swap-card__body h3 {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-swap-card__body p {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-cfd-feature {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #ebf3fc;
  }

  body.page-top .invast-sp-cfd-feature__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-cfd-feature__title {
    margin: 0;
    color: #0a2463;
    font-family: var(--ta-font-family-ja);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  body.page-top .invast-sp-cfd-feature__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-cfd-feature__content {
    display: flex;
    width: min(350px, calc(100vw - 40px));
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  body.page-top .invast-sp-cfd-feature-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ebf3fc;
    border-radius: 12px;
    box-shadow: var(--ta-shadow-card);
  }

  body.page-top .invast-sp-cfd-feature-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body.page-top .invast-sp-cfd-feature-card__head img {
    display: block;
    width: 24px;
    height: 24px;
  }

  body.page-top .invast-sp-cfd-feature-card__head p {
    margin: 0;
    color: #1e5fad;
    font-family: var(--ta-font-family-ja);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-cfd-feature-card__title {
    letter-spacing: 1px;
    text-align: center;
  }

  /* Figma 3133:22585: 白カード(min 308px)にベッドイラスト+2行タイトル+説明 */
  body.page-top .invast-sp-cfd-feature-note {
    display: flex;
    width: 100%;
    min-height: 308px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--ta-color-card-border);
    border-radius: 14px;
  }

  body.page-top .invast-sp-cfd-feature-note__image {
    display: block;
    width: 164px;
    height: auto;
  }

  body.page-top .invast-sp-cfd-feature-note__title {
    margin: 0;
    color: #0a2463;
    font-family: var(--ta-font-family-ja);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  body.page-top .invast-sp-cfd-feature-note__desc {
    margin: 0;
    color: #5a6a85;
    font-family: var(--ta-font-family-ja);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-tools {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-tools__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  body.page-top .invast-sp-tools__lead {
    width: 100%;
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  body.page-top .invast-sp-tools__devices {
    display: block;
    width: min(334px, calc(100vw - 40px));
    height: auto;
  }

  body.page-top .invast-sp-tools__download {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body.page-top .invast-sp-tools__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  body.page-top .invast-sp-tools__badge-link {
    display: inline-flex;
    flex: 0 1 auto;
  }

  body.page-top .invast-sp-tools__badge {
    display: block;
    height: auto;
    flex: 0 1 auto;
  }

  body.page-top .invast-sp-tools__badge--app {
    width: 147.39px;
  }

  body.page-top .invast-sp-tools__badge--google {
    width: 182.85px;
  }

  body.page-top .invast-sp-tools__note {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  body.page-top .invast-sp-support {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #ebf3fc;
  }

  body.page-top .invast-sp-support__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-support__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-support__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-support__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  body.page-top .invast-sp-support-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 32px;
    box-sizing: border-box;
    background: #f7f9fc;
    border-radius: 12px; /* カード角丸（--ta-radius-l 相当。2026-07-08 ユーザー指定） */
  }

  body.page-top .invast-sp-support-card__image {
    display: block;
    width: min(300px, 100%);
    height: auto;
    border-radius: 12px;
  }

  /* PC版（.af-img-2 300×200 薄青パネル）と同じカードビジュアルを再現（2026-07-08 ユーザー指定）。
     インヴァストカード=2枚重ね / 社会貢献=写真センター。座標は PC の
     .invastgoldcard-omote / .element-propercard / .image と同値 */
  body.page-top .invast-sp-support-card__media {
    position: relative;
    height: 200px;
    background: var(--primary-pale, #ebf3fc);
    overflow: hidden;
  }

  /* カード2枚はパネル幅に対する%配置（PC座標比）にして、パネルが300px未満でも
     右端が見切れないようにする（2026-07-08 ユーザー指摘「枠に入り切るように」） */
  body.page-top .invast-sp-support-card__media .invast-sp-invastcard-omote {
    position: absolute;
    top: 32%;
    left: 36%;
    width: 57%;
    height: auto;
  }

  body.page-top .invast-sp-support-card__media .invast-sp-invastcard-proper {
    position: absolute;
    top: 13%;
    left: 4.5%;
    width: 56%;
    height: auto;
  }

  body.page-top .invast-sp-support-card__media .invast-sp-scp-photo {
    position: absolute;
    top: calc(50% - 77px);
    left: calc(50% - 135px);
    width: 271px;
    height: 154px;
    object-fit: cover;
  }

  body.page-top .invast-sp-support-card__title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  body.page-top .invast-sp-support-card__title img {
    /* PC版と同じ矢印(arrow2-3.svg 18×18)に統一。旧40×40のservice-arrow.svgは
       preserveAspectRatio:none+filterで滲んで見えたため廃止（2026-07-08） */
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }

  body.page-top .invast-sp-support-card__text {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-click365 {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-click365__heading {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-click365__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-click365__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-click365__content {
    display: flex;
    width: min(350px, calc(100vw - 40px));
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  body.page-top .invast-sp-click365__logo {
    display: block;
    width: min(350px, 100%);
    height: auto;
  }

  /* Figma 3133:23060: 注文カードは全幅の縦積み（padding 20 / radius 12） */
  body.page-top .invast-sp-click365__orders {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
  }

  body.page-top .invast-sp-click365__orders span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    background: #fff;
    border: 1px solid #ebf3fc;
    border-radius: 12px;
    box-shadow: var(--ta-shadow-card);
  }

  body.page-top .invast-sp-click365__text {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-news {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  body.page-top .invast-sp-news__inner {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  body.page-top .invast-sp-news__heading {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body.page-top .invast-sp-news__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  body.page-top .invast-sp-news__bar {
    display: block;
    width: var(--ta-heading-accent-bar-width, 100px);
    height: var(--ta-heading-accent-bar-height, 2px);
    background: var(--ta-heading-accent-bar-color, #ffa54f);
  }

  body.page-top .invast-sp-news__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  body.page-top .invast-sp-news__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  body.page-top .invast-sp-news-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #d4dce8;
    color: inherit;
    text-decoration: none;
  }

  body.page-top .invast-sp-news-item:nth-child(2) {
    gap: 16px;
  }

  body.page-top .invast-sp-news-item__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #5a6a85;
    font-family: "DIN 2014 Narrow", "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-news-item:nth-child(2) .invast-sp-news-item__meta {
    gap: 8px;
  }

  body.page-top .invast-sp-news-item__tag {
    color: #e53e3e;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
  }

  body.page-top .invast-sp-news-item__tag--etf {
    color: #ff197a;
  }

  body.page-top .invast-sp-news-item__tag--notice {
    color: #1e5fad;
  }

  body.page-top .invast-sp-news-item__tag--important,
  body.page-top .invast-sp-news-item__tag--fx {
    color: #e53e3e;
  }

  body.page-top .invast-sp-news-item__title {
    color: #1a1a2e;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  body.page-top .invast-sp-news__more {
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
    text-decoration: none;
  }

  body.page-top .LP-typebold .group,
  body.page-top .LP-typebold .CV-2,
  body.page-top .LP-typebold .ma-wrapper,
  body.page-top .LP-typebold .feature-sec,
  body.page-top .LP-typebold .auto-feature-section,
  body.page-top .LP-typebold .auto-feature-section-2,
  body.page-top .LP-typebold .auto-trade-section,
  body.page-top .LP-typebold .easy-section,
  body.page-top .LP-typebold .easy-section-2,
  body.page-top .LP-typebold .faq-section-wrapper {
    display: none !important;
  }

  body.page-top .LP-typebold > .frame {
    padding-top: 0 !important;
  }

  body.page-top .LP-typebold .CV {
    display: flex !important;
    justify-content: center !important;
    width: 100vw !important;
    height: calc(439px * var(--top-sp-mainvisual-scale)) !important;
    min-height: 0 !important;
    max-height: none !important;
    left: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }

  body.page-top .LP-typebold .CV > .group {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    flex: 0 0 390px !important;
    width: 390px !important;
    height: 439px !important;
    transform: scale(var(--top-sp-mainvisual-scale)) !important;
    transform-origin: top center !important;
  }

  body.page-top .LP-typebold .hero-c {
    position: relative !important;
    width: 390px !important;
    height: 439px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #1a3c8d url("/img/mainvisual-sp.png") center top / 390px 439px no-repeat !important;
  }

  body.page-top .LP-typebold .hero-c > .rectangle,
  body.page-top .LP-typebold .hero-c > .element-realistic,
  body.page-top .LP-typebold .hero-c > .frame-2,
  body.page-top .LP-typebold .hero-tag {
    display: none !important;
  }

  body.page-top .LP-typebold .hero-content {
    position: absolute !important;
    top: 106px !important;
    left: 18px !important;
    display: block !important;
    width: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.page-top .LP-typebold .hero-content > .div {
    display: block !important;
    width: auto !important;
  }

  body.page-top .LP-typebold .hero {
    margin: 0 !important;
    color: #fff !important;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  body.page-top .LP-typebold .hero-comma-pc {
    display: none !important;
  }

  body.page-top .LP-typebold .hero-comma-sp {
    display: inline !important;
  }

  body.page-top .LP-typebold .hero-c > .p {
    position: absolute !important;
    top: 381px !important;
    left: 18px !important;
    width: 295px !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 1px !important;
  }

  /* Top page SP: phishing notice (Figma 2097:40713) */
  body.page-top .LP-typebold .ma-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-top .LP-typebold .ma-wrapper .ma:first-child {
    display: none !important;
  }

  body.page-top .LP-typebold .ma-wrapper .ma {
    width: 348px !important;
    max-width: calc(100vw - 42px) !important;
    padding: 4px 20px !important;
    gap: 0 !important;
    border: 1px solid #e53e3e !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body.page-top .LP-typebold .ma-wrapper .ma-desc {
    width: auto !important;
    margin: 0 !important;
    color: #e53e3e !important;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body.page-top .LP-typebold .sp-only-br {
    display: block !important;
  }

  body.page-top .LP-typebold .group,
  body.page-top .LP-typebold .CV-2,
  body.page-top .LP-typebold .ma-wrapper,
  body.page-top .LP-typebold .feature-sec,
  body.page-top .LP-typebold .auto-feature-section,
  body.page-top .LP-typebold .auto-feature-section-2,
  body.page-top .LP-typebold .auto-trade-section,
  body.page-top .LP-typebold .easy-section,
  body.page-top .LP-typebold .easy-section-2,
  body.page-top .LP-typebold .faq-section-wrapper {
    display: none !important;
  }

  /* ── Body bottom padding for sticky CTA bar ── */
  body {
    padding-bottom: 48px;
  }

  body.page-top {
    padding-bottom: 0;
  }

} /* end @media (max-width: 767px) */