.netbk-account-2-web-main {
  background-color: var(--rur-color-bg-primary);
}

.netbk-account-2-web-main-eyecatch-section {
  background-color: var(--rur-color-blue-050);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.netbk-account-2-web-main-eyecatch-section:before {
  aspect-ratio: 1;
  background: linear-gradient(
    90deg,
    #59BFCE 0%,
    #036ADE 100%
  );
  border-radius: 50%;
  content: "";
  height: 150%;
  right: 50%;
  position: absolute;
  transform: translateX(7%) translateY(6%);
}

.netbk-account-2-web-main-eyecatch-section:after {
  background: linear-gradient(
    135deg,
    #59BFCE 0%,
    #036ADE 100%
  );
  border-radius: 50%;
  content: "";
  height: 750px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(260px) translateY(-40%);
  width: 750px;
}

.netbk-account-2-web-main-eyecatch-section-layout {
  gap: 24px 70px;
  grid-template-areas:
    "heading  eyecatch"
    "notes    eyecatch"
    "qrbox    eyecatch"
    "buttons  eyecatch";
  grid-template-columns: 1.27fr 1fr;
  margin: 72px auto 32px auto;
  max-width: 1200px;
  z-index: 10;
}

@media screen and (max-width:1296px) {
  .netbk-account-2-web-main-eyecatch-section-layout {
    margin: 72px var(--rur-spacing-padding-horizontal-padding) 32px var(--rur-spacing-padding-horizontal-padding);
  }
}

.netbk-account-2-web-main-eyecatch-section-title {
  color: var(--rur-color-text-white);
  font-size: 48px;
  font-weight: bold;
  grid-area: heading;
  letter-spacing: var(--rur-typography-ja-heading-default-h1-letter-spacing);
  line-height: var(--rur-typography-ja-heading-default-h1-line-height);
}

.netbk-account-2-web-main-eyecatch-section-title ._title-sub {
  font-size: 24px;
}

.netbk-account-2-web-main-eyecatch-section-title ._highlight {
  color: #fcd439;
}

.netbk-account-2-web-main-eyecatch-section-title ._note {
  font-size: 18px;
  vertical-align: super;
}

.netbk-account-2-web-main-eyecatch-section-notes {
  grid-area: notes;
}

.netbk-account-2-web-main-eyecatch-section-notes.rur-text-list {
  color: var(--rur-color-text-white);
  font-size: var(--rur-base-font-size-ja-xs);
}

.netbk-account-2-web-main-eyecatch-section-qr-box {
  background-color: var(--rur-color-blue-050);
  border-radius: 8px;
  grid-area: qrbox;
  max-width: 520px;
}

.netbk-account-2-web-main-eyecatch-section-qr-box ._title {
  font-size: var(--rur-typography-ja-heading-default-h5-font-size);
  font-weight: var(--rur-typography-ja-heading-default-h5-font-weight);
}

.netbk-account-2-web-main-eyecatch-qr {
  height: 140px;
  flex-shrink: 0;
  width: 140px;
}

.netbk-account-2-web-main-eyecatch-section-buttons {
  grid-area: buttons;
}

.netbk-account-2-web-app-install-button-wrapper {
  width: 100%;
}

.netbk-account-2-web-app-install-button {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  background-color: #f85050;
  border: none;
  border-radius: var(--rur-rounded-corner-button-lg);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--rur-typography-ja-button-lg-font-family);
  font-size: var(--rur-typography-ja-button-lg-font-size);
  font-weight: var(--rur-typography-ja-button-lg-font-weight);
  gap: var(--rur-spacing-sm);
  justify-content: center;
  letter-spacing: var(--rur-typography-ja-button-lg-letter-spacing);
  line-height: var(--rur-typography-ja-button-lg-line-height);
  margin: 0;
  max-height: var(--rur-sizing-button-max-height-lg);
  max-width: var(--rur-sizing-button-max-width-lg);
  min-height: var(--rur-sizing-button-min-height-lg);
  padding: var(--rur-spacing-md) var(--rur-spacing-lg);
  width: 100%;
}

.netbk-account-2-web-app-install-button:disabled {
  background-color: var(--rur-color-bg-primary-red-state-disable);
  color: var(--rur-color-text-state-disable);
  cursor: not-allowed;
}

.netbk-account-2-web-app-install-button:active.netbk-account-2-web-app-install-button:not([disabled]),
.netbk-account-2-web-app-install-button:hover.netbk-account-2-web-app-install-button:not([disabled]) {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.netbk-account-2-web-app-install-button:focus-visible {
  background-color: #f85050;
  outline: var(--rur-border-width-focus-outline-inside) solid var(--rur-color-border-focus-indigator);
  outline-offset: var(--rur-border-width-focus-outline-inside);
}

.netbk-account-2-web-app-install-button,
.netbk-account-2-web-app-install-button:link,
.netbk-account-2-web-app-install-button:visited {
  color: var(--rur-color-text-white);
}

.netbk-account-2-web-app-install-button:hover.netbk-account-2-web-app-install-button:not([disabled]) {
  background-color: #e63939;
  color: var(--rur-color-text-white);
}

.netbk-account-2-web-app-install-button:active.netbk-account-2-web-app-install-button:not([disabled]) {
  background-color: #cc2b2b;
  color: var(--rur-color-text-white);
}

.netbk-account-2-web-main-eyecatch-section-eyecatch {
  align-items: center;
  display: flex;
  grid-area: eyecatch;
  height: 100%;
  justify-content: center;
}

.netbk-account-2-web-main-eyecatch-section-eyecatch img {
  object-fit: contain;
  max-height: 500px;
  max-width: 100%;
}

@media screen and (max-width:819px) {
  .netbk-account-2-web-main-eyecatch-section:before {
    content: none;
  }

  .netbk-account-2-web-main-eyecatch-section:after {
    left: unset;
    top: -380px;
    transform: unset;
    width: 1200px;
  }

  .netbk-account-2-web-main-eyecatch-section-layout {
    grid-template-areas:
      "heading"
      "eyecatch"
      "buttons"
      "notes";
    grid-template-columns: 1fr;
    margin: 40px 0 0 0;
    max-width: none;
    width: 100%;
  }

  .netbk-account-2-web-main-eyecatch-section-title {
    font-size: 32px;
    margin: 0 auto;
    max-width: 338px;
    padding: 0 var(--rur-spacing-padding-horizontal-padding);
  }

  .netbk-account-2-web-main-eyecatch-section-title ._title-sub {
    font-size: 18px;
  }

  .netbk-account-2-web-main-eyecatch-section-title ._note {
    font-size: 14px;
    vertical-align: super;
  }

  .netbk-account-2-web-main-eyecatch-section-notes {
    background-color: var(--rur-color-bg-primary);
    padding: var(--rur-spacing-padding-vertical-padding) var(--rur-spacing-padding-horizontal-padding);
  }

  .netbk-account-2-web-main-eyecatch-section-notes.rur-text-list {
    color: var(--rur-color-text-primary);
    font-size: var(--rur-typography-ja-text-sm-font-size);
  }

  .netbk-account-2-web-main-eyecatch-section-qr-box {
    display: none;
  }

  .netbk-account-2-web-main-eyecatch-section-buttons {
    align-items: center;
    padding: 0 var(--rur-spacing-padding-horizontal-padding);
  }

  .netbk-account-2-web-app-install-button-wrapper {
    text-align: center;
  }

  .netbk-account-2-web-main-eyecatch-section-eyecatch {
    padding: 0 var(--rur-spacing-padding-horizontal-padding);
  }

  .netbk-account-2-web-main-eyecatch-section-eyecatch img {
    max-width: 320px;
    width: 100%;
  }
}

.netbk-account-2-web-main-content {
  background-color: var(--rur-color-bg-primary);
  gap: 72px;
  padding: var(--rur-spacing-padding-vertical-padding) var(--rur-spacing-padding-horizontal-padding);
  margin: 0 auto;
  max-width: 912px;
  width: 100%;
}

.netbk-account-2-web-main-content section {
  width: 100%;
}

.netbk-account-2-web-main-content .netbk-account-2-web-main-content-heading {
  border-bottom: 2px solid var(--rur-color-keycolor);
  font-weight: bold;
  padding-bottom: var(--rur-spacing-sm);
}

img.netbk-account-2-web-main-content-plus-icon {
  height: 40px;
  width: 40px;
}

.netbk-account-2-web-main-content-steps {
  width: 100%;
}

@media screen and (max-width:819px) {
  .netbk-account-2-web-main-content {
    gap: 50px;
  }

  .netbk-account-2-web-main-content-steps {
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    max-width: 328px;
  }

  .netbk-account-2-web-main-content-steps li {
    width: 100%;
  }

  .netbk-account-2-web-main-content-steps > div img {
    transform: rotate(90deg);
  }
}

.netbk-account-2-web-main-content-steps li {
  background-color: var(--rur-color-blue-050);
  flex: 1;
}

.netbk-account-2-web-main-content-steps-title-number {
  color: var(--rur-color-keycolor);
  font-family: var(--rur-typography-en-text-xl-bold-font-family);
  font-size: var(--rur-typography-en-text-xl-bold-font-size);
  font-weight: var(--rur-typography-en-text-xl-bold-font-weight);
  letter-spacing: var(--rur-typography-en-text-xl-bold-letter-spacing);
  line-height: var(--rur-typography-en-text-xl-bold-line-height);
}

.netbk-account-2-web-main-content-cards {
  max-width: 644px;
  width: 100%;
}

.netbk-account-2-web-main-content-points-list {
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  max-width: 674px;
  width: 100%;
}

.netbk-account-2-web-main-content-points-list li:first-child {
  grid-column: span 2;
}

.netbk-account-2-web-main-content-points-list li a {
  margin-top: auto;
}

.netbk-account-2-web-google-font {
  font-family: var(--rur-typography-en-text-sm-font-family);
}

.netbk-account-2-web-fixed-app-install-button-wrapper {
  background-color: var(--rur-color-bg-primary);
  bottom: 0;
  box-shadow: 2px -1px 6px 0 #00000040;
  padding: 16px;
  position: sticky;
  text-align: center;
  width: 100%;
  z-index: 100;
}

/* app */
.netbk-account-2-app-wrapper {
  background-color: #eee;
}

.netbk-account-2-app-inner-content {
  margin: 0 auto;
}

@media (min-width: 560px) {
  .netbk-account-2-app-wrapper {
    padding-top: var(--rur-spacing-xl);
    padding-bottom: 120px;
  }

  .netbk-account-2-app-inner-content {
    max-width: 550px;
  }
}

.netbk-account-2-app-header {
  background-color: var(--rur-color-keycolor);
  color: var(--rur-color-text-white);
  height: auto;
}

.netbk-account-2-app-header a svg {
  fill: var(--rur-color-text-white);
}

.netbk-account-2-app-header h1 {
  font-family: var(--rur-typography-ja-heading-default-h2-font-family);
  font-size: var(--rur-typography-ja-heading-default-h2-font-size);
  font-weight: var(--rur-typography-ja-heading-default-h2-font-weight);
  letter-spacing: var(--rur-typography-ja-heading-default-h2-letter-spacing);
  line-height: var(--rur-typography-ja-heading-default-h2-line-height);
}

.netbk-account-2-app-header h1 span {
  font-family: var(--rur-typography-ja-heading-default-h5-font-family);
  font-size: var(--rur-typography-ja-heading-default-h5-font-size);
  font-weight: var(--rur-typography-ja-heading-default-h5-font-weight);
  letter-spacing: var(--rur-typography-ja-heading-default-h5-letter-spacing);
  line-height: var(--rur-typography-ja-heading-default-h5-line-height);
}

.netbk-account-2-app-main-step-section {
  border-bottom: 1px solid var(--rur-color-border-primary);
  box-sizing: border-box;
}

.netbk-account-2-app-main-step-section ul li {
  min-height: 80px;
  padding-left: 40px;
}

.netbk-account-2-app-main-step-section ul li::before {
  bottom: 0;
  border: 1px solid var(--rur-color-border-primary);
  box-sizing: border-box;
  content: "";
  display: flex;
  height: 100%;
  left: 6px;
  position: absolute;
  width: 1px;
}

.netbk-account-2-app-main-step-section ul li::after {
  background-color: var(--rur-color-bg-primary);
  border: 4px solid var(--rur-color-border-primary);
  border-radius: 100%;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 12px;
  left: 0;
  position: absolute;
  width: 12px;
}

.netbk-account-2-app-main-step-section ul li:first-child::before {
  bottom: 0;
  height: 50%;
  top: auto;
}

.netbk-account-2-app-main-step-section ul li:last-child::before {
  bottom: auto;
  height: 50%;
  top: 0;
}

.netbk-account-2-app-main-step-section ul li ._icon {
  height: 39px;
  width: 39px;
}

.netbk-account-2-app-main-attention-section {
  border-bottom: 1px solid var(--rur-color-border-primary);
}

.netbk-account-2-app-main-attention-section ol {
  list-style: decimal;
}

.netbk-account-2-app-main-guide-section {
  border-bottom: 1px solid var(--rur-color-border-primary);
}

.netbk-account-2-app-fixed-button {
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, .25);
  width: 100%;
  z-index: 2;
}

.netbk-account-2-app-footer {
  padding-bottom: 120px;
}

@media (min-width: 560px) {
  .netbk-account-2-app-footer {
    padding-bottom: var(--rur-spacing-3xl);
  }
}
