/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: var(--spacing-source);
    --text-xs: var(--text-xs-source);
    --text-sm: var(--text-sm-source);
    --text-base: var(--text-base-source);
    --text-lg: var(--text-lg-source);
    --text-xl: var(--text-xl-source);
    --text-2xl: var(--text-2xl-source);
    --text-4xl: var(--text-4xl-source);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-blue: #2083bd;
    --color-deep-blue: #04618c;
    --color-sky-blue: #39b0e5;
    --color-ice-blue: #def3ff;
    --color-pale-blue: #c7e8fa;
    --color-yellow: #fff89b;
    --color-star-yellow: #fdec3c;
    --color-green: #8fd489;
    --color-orange: #e95504;
    --color-text: #111;
    --color-link: #2083bd;
    --color-gray: #7f7f7f;
    --color-light-gray: #e8edf0;
    --color-pale-gray: #f0f5f8;
    --color-silver: #c7c7c7;
    --color-gainsboro: #d9d9d9;
    --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    --font-en: "Jost", Futura, sans-serif;
    --text-xxs: var(--text-xxs-source);
    --leading-comfort: 1.75;
    --tracking-jp: .08em;
    --tracking-en: normal;
    --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
    --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
    --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
    --ease-overshoot-in-out-soft: linear(0, -.004 4.9%, -.02 9.4%, -.124 26.4%, -.126 30.5%, -.104 34.1%, -.027 38.8%, .108 43.1%, .299 47%, .817 55.2%, .97 59.1%, 1.071 63.4%, 1.118 67.7%, 1.127 72.6%, 1.108 77.2%, 1.019 90.7%, 1.004 95.2%, 1);
  }
}

@layer base {
  :root {
    --fade-in: fadeIn var(--sumakouza-duration) var(--sumakouza-easing) forwards;
    --fade-out: fadeOut var(--sumakouza-duration) var(--sumakouza-easing) forwards;
    --floating-smaton: floatingSmaton calc(4 * var(--sumakouza-duration)) var(--ease-in-out-quad) infinite;
    --stepping-smaton: steppinggSmaton calc(4 * var(--sumakouza-duration)) steps(1) infinite;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes floatingSmaton {
    0% {
      translate: 0;
    }

    50% {
      translate: 0 3%;
    }

    to {
      translate: 0;
    }
  }

  @keyframes steppinggSmaton {
    0% {
      rotate: 0deg;
    }

    50% {
      rotate: -3deg;
    }

    to {
      rotate: 0deg;
    }
  }

  :root {
    --z-header: 10;
    --z-modal: 1000;
    scrollbar-gutter: stable;
  }

  html:not(:has(dialog[open]), .dialog-open) {
    scroll-behavior: smooth;
  }

  body {
    width: 100%;
    min-height: 100vh;
    font-family: var(--font-jp);
    font-size: var(--text-base);
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--leading-normal);
    color: var(--color-text);
    letter-spacing: .08em;
    background-color: var(--color-white);
  }

  :where([id]) {
    scroll-margin-top: var(--header-height);
  }

  a:not(:has(img)) {
    color: var(--color-blue);
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    text-underline-offset: .25em;
    text-decoration-line: underline;
    text-decoration-thickness: .0625rem;
  }

  a:not(:has(img)):hover {
    text-decoration: none;
  }

  mark {
    background-color: #0000;
    background-image: linear-gradient(var(--color-yellow),var(--color-yellow));
    background-size: 100% calc(12 * var(--spacing));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-left: calc(2 * var(--spacing));
    padding-right: calc(2 * var(--spacing));
    background-position: 0 100%;
    background-repeat: repeat-x;
  }

  @view-transition {
    navigation: auto;
  }

  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components {
  .c-button-rect {
    --background-color: var(--color-blue);
    --text-color: var(--color-white);
    --background-hover: var(--color-white);
    --text-hover: var(--color-blue);
    --mask-icon: url("/d-bank/sumakouza/img/circle_arrow-m.svg");
    grid-template: "text icon" auto / 1fr calc(24 * var(--spacing));
    gap: calc(8 * var(--spacing));
    width: 100%;
    height: calc(56 * var(--spacing));
    padding: calc(16 * var(--spacing)) calc(16 * var(--spacing)) calc(16 * var(--spacing)) calc(32 * var(--spacing));
    color: var(--text-color);
    background-color: var(--background-color);
    border: calc(2 * var(--spacing)) solid var(--background-color);
    border-radius: calc(6 * var(--spacing));
    transition-timing-function: var(--sumakouza-easing);
    align-content: center;
    align-items: center;
    text-decoration: none;
    transition-property: color, background-color;
    transition-duration: .3s;
    display: grid;
  }

  @media (width >= 800px) {
    .c-button-rect {
      width: calc(300 * var(--spacing));
    }
  }

  .c-button-rect > span {
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    grid-area: text;
    line-height: 1;
  }

  .c-button-rect:before, .c-button-rect:after {
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    grid-area: icon;
    width: 100%;
    height: auto;
  }

  .c-button-rect:before {
    background-color: currentColor;
  }

  .c-button-rect:after {
    background-color: var(--background-color);
    -webkit-mask-image: var(--mask-icon);
    -webkit-mask-image: var(--mask-icon);
    mask-image: var(--mask-icon);
    mask-position: 0 0;
    mask-size: contain;
    mask-repeat: repeat-x;
  }

  .c-button-rect:hover {
    color: var(--text-hover);
    background-color: var(--background-hover);
  }

  .c-button-rect:hover:after {
    background-color: var(--background-hover);
    animation: arrowToRightM calc(2 * var(--sumakouza-duration)) var(--ease-in-out-cubic) forwards;
  }

  .c-button-rect[data-align="center"] > span {
    text-align: center;
  }

  .c-button-rect[data-background="white"] {
    --background-color: var(--color-white);
    --text-color: var(--color-blue);
    --background-hover: var(--color-blue);
    --text-hover: var(--color-white);
  }

  .c-button-rect[data-background="white"][data-color="sky-blue"] {
    --text-color: var(--color-sky-blue);
    --background-hover: var(--color-sky-blue);
  }

  .c-button-rect[data-background="orange"] {
    --background-color: var(--color-orange);
    --text-color: var(--color-white);
    --background-hover: var(--color-white);
    --text-hover: var(--color-orange);
  }

  .c-button-rect[data-icon="arrow"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_arrow-m.svg");
  }

  .c-button-rect[target="_blank"]:not([data-icon]), .c-button-rect[data-icon="blank"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_blank-m.svg");
  }

  :is(.c-button-rect[target="_blank"]:not([data-icon]), .c-button-rect[data-icon="blank"]):hover:after {
    animation: none !important;
  }

  .c-button-rect[href^="#"]:not([data-icon]), .c-button-rect[data-icon="anchor"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_arrow-m.svg");
  }

  :is(.c-button-rect[href^="#"]:not([data-icon]), .c-button-rect[data-icon="anchor"]):after {
    translate: 0 2.5%;
    rotate: 90deg;
  }

  .c-button-rect[data-size="large"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_arrow-l.svg");
    grid-template: ". text icon" auto / calc(36 * var(--spacing)) 1fr calc(36 * var(--spacing));
    height: calc(72 * var(--spacing));
    padding: calc(18 * var(--spacing));
  }

  @media (width >= 800px) {
    .c-button-rect[data-size="large"] {
      width: calc(480 * var(--spacing));
      height: calc(84 * var(--spacing));
    }
  }

  .c-button-rect[data-size="large"]:hover:after {
    animation-name: arrowToRightL;
  }

  .c-button-rect[data-size="large"] > span {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-extrabold);
    text-align: center;
  }

  .c-button-rect[data-size="large"][data-icon="arrow"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_arrow-l.svg");
  }

  .c-button-rect[data-size="large"][target="_blank"]:not([data-icon]), .c-button-rect[data-size="large"][data-icon="blank"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_blank-l.svg");
  }

  .c-button-rect[data-size="large"][href^="#"]:not([data-icon]), .c-button-rect[data-size="large"][data-icon="anchor"] {
    --mask-icon: url("/d-bank/sumakouza/img/circle_arrow-l.svg");
  }

  @keyframes arrowToRightM {
    0% {
      mask-position: 0 0;
    }

    to {
      -webkit-mask-position: calc(24 * var(--spacing)) 0;
      -webkit-mask-position: calc(24 * var(--spacing)) 0;
      mask-position: calc(24 * var(--spacing)) 0;
    }
  }

  @keyframes arrowToRightL {
    0% {
      mask-position: 0 0;
    }

    to {
      -webkit-mask-position: calc(36 * var(--spacing)) 0;
      -webkit-mask-position: calc(36 * var(--spacing)) 0;
      mask-position: calc(36 * var(--spacing)) 0;
    }
  }

  .c-collapsible-panel summary {
    cursor: pointer;
    list-style: none;
  }

  .c-collapsible-panel summary::marker {
    content: none;
    display: none;
  }

  .c-collapsible-panel summary::-webkit-details-marker {
    content: none;
    display: none;
  }

  .c-collapsible-panel summary:has(.icon) {
    grid-template-columns: 1fr auto;
    grid-template-areas: ". icon";
    align-content: center;
    align-items: center;
    display: grid;
  }

  .c-collapsible-panel .icon {
    width: calc(32 * var(--spacing));
    height: calc(32 * var(--spacing));
    color: currentColor;
    background-color: var(--color-white);
    transition: color var(--sumakouza-duration) var(--sumakouza-easing);
    border-radius: 50%;
    grid-area: icon;
    place-content: center;
    place-items: center;
    display: grid;
  }

  @media (width >= 800px) {
    .c-collapsible-panel .icon {
      width: calc(36 * var(--spacing));
      height: calc(36 * var(--spacing));
    }
  }

  .c-collapsible-panel .icon:before, .c-collapsible-panel .icon:after {
    width: calc(9.6 * var(--spacing));
    height: calc(1.6 * var(--spacing));
    content: "";
    transition: rotate calc(2 * var(--sumakouza-duration)) var(--sumakouza-easing);
    background-color: currentColor;
    border-radius: 100vmax;
    grid-area: 1 / 1 / 2 / 2;
    display: block;
  }

  @media (width >= 800px) {
    .c-collapsible-panel .icon:before, .c-collapsible-panel .icon:after {
      width: calc(12 * var(--spacing));
      height: calc(2 * var(--spacing));
    }
  }

  .c-collapsible-panel .icon:before {
    rotate: -90deg;
  }

  .c-collapsible-panel .wrapper {
    transition: grid-template-rows calc(2 * var(--sumakouza-duration)) var(--sumakouza-easing);
    grid-template-rows: 0fr;
    grid-template-columns: 100%;
    display: grid;
    overflow: hidden;
  }

  .c-collapsible-panel .body {
    height: 100%;
    overflow: hidden;
  }

  .c-collapsible-panel.is-open .wrapper {
    grid-template-rows: 1fr;
  }

  .c-collapsible-panel.is-open .icon:before {
    rotate: 0deg;
  }

  .c-desc {
    font-size: var(--text-base);
    line-height: var(--leading-comfort);
  }

  .c-desc a {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-blue);
    letter-spacing: inherit;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    text-underline-offset: .25em;
    text-decoration-line: underline;
    text-decoration-thickness: .0625rem;
  }

  .c-desc a[target="_blank"]:after {
    aspect-ratio: 1;
    vertical-align: middle;
    content: "";
    background-color: currentColor;
    width: .642857em;
    margin-inline: .142857em;
    display: inline-block;
    mask-image: url("/d-bank/sumakouza/img/icon_blank.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .c-desc a:hover {
    text-decoration: none;
  }

  .c-desc + .c-desc {
    margin-top: 8px;
  }

  .c-dl-attention {
    font-size: var(--text-sm);
    line-height: var(--leading-comfort);
  }

  .c-dl-attention dt {
    min-height: calc(16 * var(--spacing));
    padding-left: calc(20 * var(--spacing));
    font-weight: var(--font-weight-bold);
    position: relative;
  }

  .c-dl-attention dt:before {
    top: calc(4.25 * var(--spacing));
    width: calc(16 * var(--spacing));
    aspect-ratio: 1;
    content: "";
    background-color: currentColor;
    height: auto;
    display: inline-block;
    position: absolute;
    left: 0;
    mask-image: url("/d-bank/sumakouza/img/icon_attention.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .c-link {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-blue);
    letter-spacing: inherit;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    text-underline-offset: .25em;
    text-decoration-line: underline;
    text-decoration-thickness: .0625rem;
  }

  .c-link[target="_blank"]:after {
    aspect-ratio: 1;
    vertical-align: middle;
    content: "";
    background-color: currentColor;
    width: .642857em;
    margin-inline: .142857em;
    display: inline-block;
    mask-image: url("/d-bank/sumakouza/img/icon_blank.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .c-link:hover {
    text-decoration: none;
  }

  .c-list-check {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
  }

  .c-list-check > li {
    min-height: calc(24 * var(--spacing));
    padding-left: calc(32 * var(--spacing));
    position: relative;
  }

  .c-list-check > li:before {
    width: calc(24 * var(--spacing));
    aspect-ratio: 1;
    height: auto;
    font-family: var(--font-en);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: normal;
    content: "";
    background-color: var(--color-green);
    background-image: url("/d-bank/sumakouza/img/icon_check.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    place-content: center;
    place-items: center;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-list-check > li + li {
    margin-top: calc(12 * var(--spacing));
  }

  .c-list-decimal {
    padding-left: 2em;
    list-style: decimal;
  }

  .c-list-disc {
    font-size: var(--text-sm);
    padding-left: 1em;
    list-style: outside;
  }

  .c-list-disc > li + li {
    margin-top: calc(4 * var(--spacing));
  }

  .c-list-disc a {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-blue);
    letter-spacing: inherit;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    text-underline-offset: .25em;
    text-decoration-line: underline;
    text-decoration-thickness: .0625rem;
  }

  .c-list-disc a[target="_blank"]:after {
    aspect-ratio: 1;
    vertical-align: middle;
    content: "";
    background-color: currentColor;
    width: .642857em;
    margin-inline: .142857em;
    display: inline-block;
    mask-image: url("/d-bank/sumakouza/img/icon_blank.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .c-list-disc a:hover {
    text-decoration: none;
  }

  .c-list-link {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  .c-list-link > li + li {
    margin-top: calc(4 * var(--spacing));
  }

  .c-list-link a {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-blue);
    letter-spacing: inherit;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    text-underline-offset: .25em;
    text-decoration-line: underline;
    text-decoration-thickness: .0625rem;
  }

  .c-list-link a[target="_blank"]:after {
    aspect-ratio: 1;
    vertical-align: middle;
    content: "";
    background-color: currentColor;
    width: .642857em;
    margin-left: .142857em;
    display: inline-block;
    mask-image: url("/d-bank/sumakouza/img/icon_blank.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .c-list-link a:hover {
    text-decoration: none;
  }

  .c-list-notes {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  .c-list-notes > li {
    padding-left: 1em;
    position: relative;
  }

  .c-list-notes > li:before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-list-notes > li + li {
    margin-top: calc(4 * var(--spacing));
  }

  .c-list-notes:is(ol) {
    counter-reset: notes;
  }

  .c-list-notes:is(ol) > li {
    counter-increment: notes;
    padding-left: 2em;
  }

  .c-list-notes:is(ol) > li:before {
    content: "※" counter(notes);
  }

  .c-list-notes a {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-blue);
    letter-spacing: inherit;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    text-underline-offset: .25em;
    text-decoration-line: underline;
    text-decoration-thickness: .0625rem;
  }

  .c-list-notes a[target="_blank"]:after {
    aspect-ratio: 1;
    vertical-align: middle;
    content: "";
    background-color: currentColor;
    width: .642857em;
    margin-inline: .142857em;
    display: inline-block;
    mask-image: url("/d-bank/sumakouza/img/icon_blank.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .c-list-notes a:hover {
    text-decoration: none;
  }

  .c-star-program {
    row-gap: calc(12 * var(--spacing));
    padding-bottom: calc(12 * var(--spacing));
    background-color: var(--color-white);
    border: calc(2 * var(--spacing)) solid var(--color-sky-blue);
    border-radius: calc(8 * var(--spacing));
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    overflow: clip;
  }

  .c-star-program .title {
    padding: calc(8 * var(--spacing));
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-relaxed);
    color: var(--color-white);
    text-align: center;
    letter-spacing: .06em;
    background-color: var(--color-sky-blue);
    grid-column: span 2;
  }

  @media (width >= 800px) {
    .c-star-program .title {
      font-size: var(--text-sm);
    }
  }

  .c-star-program .title .star {
    color: var(--color-star-yellow);
  }

  .c-star-program .item {
    grid-template-rows: subgrid;
    row-gap: calc(4 * var(--spacing));
    text-align: center;
    grid-row: span 2;
    display: grid;
  }

  @media (width >= 800px) {
    .c-star-program .item {
      row-gap: calc(6 * var(--spacing));
    }
  }

  .c-star-program .item:nth-of-type(2n) {
    background-image: linear-gradient(to bottom, var(--color-gray) 50%, transparent 50%);
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: var(--spacing) calc(3 * var(--spacing));
    border-left: var(--spacing) solid transparent;
  }

  .c-star-program .item .text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
    align-content: center;
  }

  @media (width >= 800px) {
    .c-star-program .item .text {
      font-size: calc(13 * var(--spacing));
    }
  }

  .c-star-program .item .free {
    font-family: var(--font-en);
    font-size: calc(40 * var(--spacing));
    font-weight: var(--font-weight-bold);
    color: var(--color-blue);
    letter-spacing: .01em;
    line-height: 1;
  }

  .c-star-program .item .free:first-letter {
    font-size: calc(36 * var(--spacing));
  }

  .c-table {
    table-layout: fixed;
    border-collapse: collapse;
    border: var(--spacing) solid var(--color-silver);
    width: 100%;
  }

  .c-table caption {
    margin-bottom: calc(12 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    text-align: left;
  }

  .c-table th, .c-table td {
    padding: calc(12 * var(--spacing)) calc(8 * var(--spacing));
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--color-text);
    border: 1px solid var(--color-silver);
  }

  .c-table th {
    text-align: center;
    background-color: var(--color-pale-gray);
  }

  .c-table td {
    text-align: center;
    background-color: var(--color-white);
  }

  .c-table thead th {
    font-weight: var(--font-weight-medium);
  }

  .c-table tbody th {
    font-weight: var(--font-weight-bold);
  }

  .c-tabs {
    scroll-margin-top: var(--header-height);
  }

  .c-tabs [role="tabpanel"]:not([hidden]) {
    opacity: 1;
    animation: .6s forwards tabShow;
    display: block;
  }

  .c-tabs [role="tabpanel"][hidden] {
    opacity: 0;
    display: none;
  }

  @keyframes tabShow {
    0% {
      display: none;
    }

    1% {
      opacity: 0;
      display: block;
    }

    to {
      opacity: 1;
    }
  }
}

@layer layout {
  .l-container {
    grid-template-rows: var(--header-height, auto) 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas: "header"
                         "main"
                         "footer";
    min-height: 100vh;
    display: grid;
    overflow: clip;
  }

  .l-footer-codes {
    gap: calc(12 * var(--spacing));
    margin-top: calc(24 * var(--spacing));
    display: flex;
  }

  @media (width >= 800px) {
    .l-footer-codes {
      margin-top: calc(44 * var(--spacing));
    }
  }

  .l-footer-codes .code {
    display: flex;
  }

  .l-footer-codes .code dt, .l-footer-codes .code dd {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    flex: none;
  }

  .l-footer-copyright {
    padding: calc(18 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-xxs);
    font-weight: var(--font-weight-medium);
    color: #999;
    text-align: center;
    text-transform: none;
    letter-spacing: .02em;
    background-color: var(--color-pale-gray);
    line-height: 1;
  }

  @media (width >= 800px) {
    .l-footer-copyright {
      padding: calc(20 * var(--spacing));
    }
  }

  .l-footer-links {
    gap: calc(12 * var(--spacing));
    padding-top: calc(32 * var(--spacing));
    margin-top: calc(32 * var(--spacing));
    background-image: linear-gradient(to right, var(--color-gainsboro) 50%, transparent 50%);
    background-repeat: repeat-x;
    background-position: left calc(-1 * var(--spacing));
    background-clip: border-box;
    background-size: calc(4 * var(--spacing)) var(--spacing);
    border-top: var(--spacing) solid transparent;
    flex-wrap: wrap;
    display: flex;
  }

  @media (width >= 800px) {
    .l-footer-links {
      padding-top: calc(24 * var(--spacing));
      margin-top: calc(100 * var(--spacing));
    }
  }

  .l-footer-links .item {
    padding-right: calc(12 * var(--spacing));
    font-size: var(--text-xs);
    letter-spacing: normal;
    background-image: linear-gradient(var(--color-gainsboro));
    background-position: 100%;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-size: var(--spacing) 1em;
    border-right: var(--spacing) solid transparent;
    line-height: normal;
  }

  .l-footer-links .item a {
    color: var(--color-text);
    transition: color var(--sumakouza-duration) var(--sumakouza-easing);
    text-decoration: none;
  }

  .l-footer-links .item a:hover {
    color: var(--color-blue);
  }

  .l-footer-nav .list {
    display: flex;
  }

  @media not all and (width >= 800px) {
    .l-footer-nav .list {
      gap: calc(12 * var(--spacing));
      text-align: right;
      flex-direction: column;
    }
  }

  @media (width >= 800px) {
    .l-footer-nav .list {
      gap: calc(24 * var(--spacing));
      align-content: center;
      align-items: center;
    }
  }

  .l-footer-nav .list .item {
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: normal;
  }

  .l-footer-nav .list .item a {
    color: var(--color-text);
    transition: color var(--sumakouza-duration) var(--sumakouza-easing);
    text-decoration: none;
  }

  .l-footer-nav .list .item a:hover {
    color: var(--color-blue);
  }

  .l-footer-pagetop {
    right: 0;
    bottom: calc(16 * var(--spacing));
    position: absolute;
  }

  .l-footer-pagetop a {
    width: 36px;
    height: 36px;
    color: var(--color-white);
    background-color: var(--color-blue);
    border: calc(2 * var(--spacing)) solid var(--color-blue);
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: .3s;
    transition-property: color, var(--background-color);
    border-radius: 50%;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    place-content: center;
    place-items: center;
    display: grid;
    overflow: clip;
    container-type: inline-size;
  }

  @media (width >= 800px) {
    .l-footer-pagetop a {
      border-width: min(.15625vw, 2px);
      width: min(2.8125vw, 36px);
      height: min(2.8125vw, 36px);
    }
  }

  .l-footer-pagetop a:before {
    content: "";
    width: 100%;
    height: 100%;
    transition: mask-position var(--sumakouza-duration) var(--sumakouza-easing);
    background-color: currentColor;
    display: block;
    rotate: -90deg;
    mask-image: url("/d-bank/sumakouza/img/circle_arrow-l.svg");
    mask-position: 0 0;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .l-footer-pagetop a:hover {
    color: var(--color-blue);
    background-color: var(--color-white);
  }

  .l-footer-pagetop a:hover:before {
    mask-position: 5cqw 0;
  }

  .l-footer {
    background-color: var(--color-white);
    grid-area: footer;
  }

  .l-footer > .inner {
    grid-template-areas: "logo nav"
                         "links links"
                         "codes codes";
    grid-template-columns: calc(120 * var(--spacing)) 1fr;
    width: calc(360 * var(--spacing));
    padding-top: calc(48 * var(--spacing));
    padding-bottom: calc(68 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
    display: grid;
    position: relative;
  }

  @media (width >= 800px) {
    .l-footer > .inner {
      grid-template-columns: calc(140 * var(--spacing)) 1fr;
      width: calc(1120 * var(--spacing));
      padding-top: calc(74 * var(--spacing));
      padding-bottom: calc(16 * var(--spacing));
    }
  }

  .l-footer .sitename {
    grid-area: logo;
  }

  @media not all and (width >= 800px) {
    .l-footer .sitename {
      padding-left: calc(8 * var(--spacing));
    }
  }

  .l-footer .sitename a {
    transition: opacity var(--sumakouza-duration) var(--sumakouza-easing);
  }

  .l-footer .sitename a:hover {
    opacity: .6;
  }

  .l-footer .sitename img {
    width: 100%;
    height: auto;
    display: block;
  }

  .l-footer .l-footer-nav {
    grid-area: nav;
    margin-left: auto;
  }

  .l-footer .l-footer-links {
    grid-area: links;
  }

  .l-footer .l-footer-codes {
    grid-area: codes;
  }

  :root {
    --header-height: calc(68 * var(--spacing));
  }

  @media (width >= 800px) {
    :root {
      --header-height: min(88 / 1280 * 100vw, 88px);
    }
  }

  .l-header {
    z-index: var(--z-header);
    width: 100%;
    height: var(--header-height);
    color: var(--color-text);
    background-color: var(--color-white);
    align-items: center;
    display: grid;
    position: fixed;
    top: 0;
    left: 0;
  }

  @media not all and (width >= 800px) {
    .l-header {
      grid-template-columns: calc(76 * var(--spacing)) calc(40 * var(--spacing));
      padding: 0 calc(20 * var(--spacing)) 0 calc(16 * var(--spacing));
      justify-content: space-between;
    }
  }

  @media (width >= 800px) {
    .l-header {
      grid-template-columns: calc(109 * var(--spacing)) 1fr;
      gap: calc(24 * var(--spacing));
      padding: 0 calc(32 * var(--spacing)) 0 calc(40 * var(--spacing));
    }
  }

  .l-header .sitename a {
    transition: opacity var(--sumakouza-duration) var(--sumakouza-easing);
    display: block;
  }

  .l-header .sitename a:hover {
    opacity: .6;
  }

  .l-header .sitename img {
    width: 100%;
    height: auto;
    display: block;
  }

  .l-main {
    grid-area: main;
  }

  @media not all and (width >= 800px) {
    .l-menu-account {
      width: calc(200 * var(--spacing));
      margin-top: calc(32 * var(--spacing));
      margin-left: auto;
      margin-right: auto;
    }

    .l-menu-account:after {
      width: calc(200 * var(--spacing));
      height: calc(190 * var(--spacing));
      margin-top: calc(40 * var(--spacing));
      content: "";
      background-image: url("/d-bank/sumakouza/img/menu_smaton_sp.png");
      background-position: 0 0;
      background-size: contain;
      display: block;
    }
  }

  .l-menu-account a {
    height: calc(56 * var(--spacing));
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-orange);
    border: 2px solid var(--color-orange);
    border-radius: calc(6 * var(--spacing));
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: var(--sumakouza-duration);
    place-content: center;
    place-items: center;
    text-decoration: none;
    transition-property: color, background-color;
    display: grid;
  }

  @media (width >= 800px) {
    .l-menu-account a {
      height: calc(52 * var(--spacing));
      padding: calc(12 * var(--spacing));
      font-size: var(--text-lg);
    }
  }

  .l-menu-account a:hover {
    color: var(--color-orange);
    background-color: var(--color-white);
  }

  .l-menu-contents {
    align-content: center;
    align-items: center;
    display: flex;
  }

  @media not all and (width >= 800px) {
    .l-menu-contents {
      gap: calc(20 * var(--spacing));
      width: calc(200 * var(--spacing));
      flex-direction: column;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (width >= 800px) {
    .l-menu-contents {
      gap: calc(24 * var(--spacing));
    }
  }

  .l-menu-contents .item {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: normal;
  }

  @media (width >= 800px) {
    .l-menu-contents .item {
      font-size: calc(15 * var(--spacing));
    }
  }

  .l-menu-contents .item a {
    color: var(--color-text);
    transition: color var(--sumakouza-duration) var(--sumakouza-easing);
    text-decoration: none;
  }

  .l-menu-contents .item a:hover {
    color: var(--color-blue);
  }

  @media not all and (width >= 800px) {
    .l-menu-nav {
      width: auto;
      width: calc(364 * var(--spacing));
      height: 100%;
      padding-top: calc(102 * var(--spacing));
      padding-right: calc(20 * var(--spacing));
      padding-left: calc(20 * var(--spacing));
      background-color: var(--color-pale-blue);
      margin-left: auto;
      display: block;
      overflow-y: auto;
    }

    .l-menu-nav:after {
      width: 100%;
      height: calc(102 * var(--spacing));
      pointer-events: none;
      content: "";
      display: block;
    }
  }

  @media (width >= 800px) {
    .l-menu-nav {
      grid-template-columns: 1fr calc(173 * var(--spacing));
      gap: calc(40 * var(--spacing));
      width: fit-content;
      margin-left: auto;
      display: grid;
    }

    .l-menu-trigger {
      display: none;
    }
  }

  @media not all and (width >= 800px) {
    .l-menu-trigger {
      z-index: 2;
      width: calc(40 * var(--spacing));
      height: calc(40 * var(--spacing));
      color: var(--color-white);
      appearance: none;
      cursor: pointer;
      background-color: var(--color-orange);
      border-radius: calc(4 * var(--spacing));
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;
      place-content: center;
      place-items: center;
      display: grid;
      position: relative;
    }

    .l-menu-trigger:before, .l-menu-trigger:after {
      width: calc(16 * var(--spacing));
      height: calc(2 * var(--spacing));
      content: "";
      transition: translate var(--sumakouza-duration) var(--sumakouza-easing) var(--sumakouza-duration), opacity var(--sumakouza-duration) var(--sumakouza-easing), rotate var(--sumakouza-duration) var(--sumakouza-easing);
      background-color: currentColor;
      grid-area: 1 / 1 / -1 / -1;
      display: block;
    }

    .l-menu-trigger:before {
      translate: 0 calc(-3 * var(--spacing));
    }

    .l-menu-trigger:after {
      translate: 0 calc(3 * var(--spacing));
    }

    .l-menu-trigger[aria-expanded="true"]:before, .l-menu-trigger[aria-expanded="true"]:after {
      transition: translate var(--sumakouza-duration) var(--sumakouza-easing), opacity var(--sumakouza-duration) var(--sumakouza-easing) var(--sumakouza-duration), rotate var(--sumakouza-duration) var(--sumakouza-easing) var(--sumakouza-duration);
    }

    .l-menu-trigger[aria-expanded="true"]:before {
      translate: 0;
      rotate: 45deg;
    }

    .l-menu-trigger[aria-expanded="true"]:after {
      translate: 0;
      rotate: -45deg;
    }
  }

  @media (width >= 800px) {
    .l-menu {
      display: contents;
    }
  }

  @media not all and (width >= 800px) {
    .l-menu {
      z-index: 1;
      background-color: #000c;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;
      place-content: center;
      place-items: center;
      width: 100%;
      height: 100dvh;
      transition: visibility .3s, opacity .3s;
      display: grid;
      position: absolute;
      top: 0;
      right: 0;
    }

    .l-menu[aria-hidden="true"] {
      visibility: hidden;
      opacity: 0;
    }
  }
}

@layer projects {
  .p-top-about-cta {
    width: 100%;
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    margin-top: calc(72 * var(--spacing));
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-sky-blue);
  }

  @media (width >= 800px) {
    .p-top-about-cta {
      padding-top: calc(96 * var(--spacing));
      padding-bottom: calc(96 * var(--spacing));
      margin-top: calc(120 * var(--spacing));
    }
  }

  .p-top-about-cta .title {
    margin-bottom: calc(16 * var(--spacing));
    font-weight: var(--font-weight-bold);
  }

  .p-top-about-cta .button {
    width: calc(312 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-about-cta .button {
      width: calc(300 * var(--spacing));
    }
  }

  .p-top-about-cta .account .title {
    font-size: var(--text-lg);
  }

  @media (width >= 800px) {
    .p-top-about-cta .account .title {
      margin-bottom: calc(20 * var(--spacing));
      font-size: var(--text-2xl);
    }
  }

  .p-top-about-cta .account .button {
    width: calc(360 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-about-cta .account .button {
      width: calc(480 * var(--spacing));
    }
  }

  .p-top-about-cta .merit {
    margin-top: calc(32 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-about-cta .merit {
      margin-top: calc(56 * var(--spacing));
    }
  }

  .p-top-about-cta .merit .title {
    column-gap: calc(8 * var(--spacing));
    width: fit-content;
    font-size: var(--text-sm);
    justify-content: center;
    align-items: end;
    display: inline-flex;
  }

  .p-top-about-cta .merit .title:before, .p-top-about-cta .merit .title:after {
    width: calc(2 * var(--spacing));
    height: calc(16 * var(--spacing));
    content: "";
    background-color: currentColor;
    border-radius: 100vmax;
    display: block;
  }

  .p-top-about-cta .merit .title:before {
    rotate: -30deg;
  }

  .p-top-about-cta .merit .title:after {
    rotate: 30deg;
  }

  .p-top-about-intro {
    width: calc(360 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-about-intro {
      width: calc(1040 * var(--spacing));
    }
  }

  .p-top-about-intro .lead {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-about-intro .lead {
      font-size: var(--text-lg);
    }
  }

  .p-top-about-intro .lead strong {
    font-size: calc(22 * var(--spacing));
    font-weight: var(--font-weight-bold);
  }

  .p-top-about-intro .lead .smart {
    font-size: calc(22 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-about-intro .lead .smart {
      font-size: var(--text-2xl);
    }
  }

  .p-top-about-intro .lead + .lead {
    margin-top: calc(16 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-about-intro .lead + .lead {
      margin-top: calc(12 * var(--spacing));
    }
  }

  .p-top-about-intro .lead + .desc {
    margin-top: calc(24 * var(--spacing));
  }

  .p-top-about-intro .desc {
    font-size: var(--text-base);
    line-height: var(--leading-comfort);
    text-align: center;
  }

  .p-top-about-intro .button {
    width: calc(312 * var(--spacing));
    margin-top: calc(24 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-about-intro .button {
      width: calc(300 * var(--spacing));
      margin-top: calc(32 * var(--spacing));
    }
  }

  .p-top-about-intro .button .c-list-notes {
    margin-top: calc(16 * var(--spacing));
  }

  @media not all and (width >= 800px) {
    .p-top-about-intro .smaton {
      width: calc(190 * var(--spacing));
      height: calc(180 * var(--spacing));
      margin-top: calc(32 * var(--spacing));
      margin-right: auto;
      margin-left: calc(110 * var(--spacing));
      position: relative;
    }
  }

  @media (width >= 800px) {
    .p-top-about-intro .smaton {
      bottom: calc(16 * var(--spacing));
      width: calc(229 * var(--spacing));
      height: calc(217 * var(--spacing));
      margin-left: calc(247 * var(--spacing));
      position: absolute;
      left: 50%;
    }
  }

  .p-top-about-intro .smaton:before, .p-top-about-intro .smaton:after {
    content: "";
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
  }

  .p-top-about-intro .smaton:before {
    width: calc(136 * var(--spacing));
    height: calc(141 * var(--spacing));
    background-image: url("/d-bank/sumakouza/img/about-intro_smaton-body.svg");
    bottom: 0;
    left: 0;
  }

  @media (width >= 800px) {
    .p-top-about-intro .smaton:before {
      width: calc(167 * var(--spacing));
      height: calc(174 * var(--spacing));
    }
  }

  .p-top-about-intro .smaton:after {
    width: calc(95 * var(--spacing));
    height: calc(64 * var(--spacing));
    background-image: url("/d-bank/sumakouza/img/about-intro_smaton-balloon.svg");
    top: 0;
    right: 0;
  }

  @media (width >= 800px) {
    .p-top-about-intro .smaton:after {
      width: calc(115 * var(--spacing));
      height: calc(79 * var(--spacing));
    }
  }

  .p-top-about-intro .smaton[data-rola-inview]:after {
    opacity: 0;
    transform-origin: 0 100%;
    transition-timing-function: var(--ease-overshoot-in-out-soft);
    transition-duration: calc(2 * var(--sumakouza-duration));
    transition-property: opacity, scale;
    scale: 0;
  }

  .p-top-about-intro .smaton[data-rola-inview="true"]:before {
    animation: var(--floating-smaton);
  }

  .p-top-about-intro .smaton[data-rola-inview="true"]:after {
    opacity: 1;
    scale: 1;
  }

  .p-top-about-value {
    width: calc(360 * var(--spacing));
    padding: calc(32 * var(--spacing)) calc(24 * var(--spacing)) calc(168 * var(--spacing));
    margin-top: calc(48 * var(--spacing));
    text-align: center;
    background-color: var(--color-white);
    border-radius: calc(20 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-about-value {
      width: calc(1040 * var(--spacing));
      padding: calc(64 * var(--spacing));
      margin-top: calc(64 * var(--spacing));
    }
  }

  .p-top-about-value > .title {
    width: max-content;
    margin-right: auto;
    margin-bottom: calc(20 * var(--spacing));
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    color: var(--color-blue);
    border-bottom: calc(2 * var(--spacing)) solid currentColor;
    margin-left: auto;
  }

  @media (width >= 800px) {
    .p-top-about-value > .title {
      margin-bottom: calc(32 * var(--spacing));
      font-size: calc(31 * var(--spacing));
    }
  }

  .p-top-about-value > .desc {
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-comfort);
  }

  @media (width >= 800px) {
    .p-top-about-value > .desc {
      font-size: var(--text-base);
    }
  }

  .p-top-about-value > .merit {
    width: 100%;
    padding: calc(20 * var(--spacing)) calc(8 * var(--spacing)) calc(22 * var(--spacing));
    margin-top: calc(24 * var(--spacing));
    background-color: var(--color-pale-gray);
    border-radius: calc(12 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-about-value > .merit {
      width: calc(510 * var(--spacing));
      padding: calc(32 * var(--spacing));
      margin-top: calc(40 * var(--spacing));
      border-radius: calc(20 * var(--spacing));
      margin-left: auto;
      margin-right: auto;
    }
  }

  .p-top-about-value > .merit:before {
    width: calc(31 * var(--spacing));
    height: calc(31 * var(--spacing));
    pointer-events: none;
    content: "";
    background-color: var(--color-pale-gray);
    display: block;
    position: absolute;
  }

  @media not all and (width >= 800px) {
    .p-top-about-value > .merit:before {
      bottom: calc(-16 * var(--spacing));
      left: calc(29 * var(--spacing));
      clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
  }

  @media (width >= 800px) {
    .p-top-about-value > .merit:before {
      top: 0;
      bottom: 0;
      left: calc(-22 * var(--spacing));
      clip-path: polygon(0 100%, 100% 0, 100% 100%);
      margin-top: auto;
      margin-bottom: auto;
    }
  }

  .p-top-about-value > .merit .desc {
    align-content: center;
    align-items: baseline;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .p-top-about-value > .merit .desc small {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
  }

  .p-top-about-value > .merit .desc .text {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
  }

  @media (width >= 800px) {
    .p-top-about-value > .merit .desc .text {
      font-size: var(--text-xl);
    }
  }

  .p-top-about-value > .merit .desc .amount {
    position: relative;
  }

  .p-top-about-value > .merit .desc .amount mark {
    font-family: var(--font-en);
    font-size: calc(18 * var(--spacing));
    font-weight: var(--font-weight-medium);
    color: var(--color-blue);
  }

  @media (width >= 800px) {
    .p-top-about-value > .merit .desc .amount mark {
      font-size: calc(22 * var(--spacing));
    }
  }

  .p-top-about-value > .merit .desc .amount mark strong {
    margin-right: calc(2 * var(--spacing));
    font-size: calc(30 * var(--spacing));
    font-weight: var(--font-weight-medium);
    letter-spacing: -.02em;
    line-height: 1;
  }

  @media (width >= 800px) {
    .p-top-about-value > .merit .desc .amount mark strong {
      font-size: calc(46 * var(--spacing));
    }
  }

  .p-top-about-value > .merit .desc .amount small {
    margin-top: calc(4 * var(--spacing));
    white-space: nowrap;
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50%;
  }

  .p-top-about-value > .merit .desc + .desc {
    margin-top: calc(32 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-about-value > .merit .desc + .desc {
      margin-top: calc(42 * var(--spacing));
    }
  }

  .p-top-about-value > .smaton {
    position: absolute;
    bottom: 0;
  }

  @media not all and (width >= 800px) {
    .p-top-about-value > .smaton {
      left: calc(32 * var(--spacing));
      width: calc(104 * var(--spacing));
      height: calc(144 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-about-value > .smaton {
      left: calc(109 * var(--spacing));
      width: calc(130 * var(--spacing));
      height: calc(180 * var(--spacing));
    }
  }

  .p-top-about-value > .smaton:before {
    content: "";
    transform-origin: bottom;
    background-image: url("/d-bank/sumakouza/img/about-value_smaton-body.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .p-top-about-value > .smaton[data-rola-inview="true"]:before {
    animation: var(--stepping-smaton);
  }

  .p-top-about {
    width: 100%;
    padding-top: calc(64 * var(--spacing));
    margin-top: calc(64 * var(--spacing));
    background-color: var(--color-ice-blue);
    background-image: url("/d-bank/sumakouza/img/about_bg_sp.svg");
    background-repeat: no-repeat;
    background-size: 100% calc(64 * var(--spacing));
    background-position: top;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-about {
      background-image: url("/d-bank/sumakouza/img/about_bg_pc.svg");
      background-size: 100% calc(128 * var(--spacing));
      padding-top: calc(120 * var(--spacing));
      margin-top: calc(120 * var(--spacing));
    }
  }

  .p-top-account {
    gap: calc(22 * var(--spacing));
    width: calc(360 * var(--spacing));
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    grid-template-columns: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-account {
      grid-template-columns: calc(556 * var(--spacing)) calc(400 * var(--spacing));
      gap: calc(84 * var(--spacing));
      width: calc(1040 * var(--spacing));
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
      align-items: start;
    }
  }

  .p-top-account > .image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-account > .body {
    row-gap: calc(16 * var(--spacing));
    flex-direction: column;
    display: flex;
  }

  @media (width >= 800px) {
    .p-top-account > .body {
      row-gap: calc(32 * var(--spacing));
    }
  }

  .p-top-account > .body .title {
    font-size: calc(20 * var(--spacing));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: .06em;
  }

  @media (width >= 800px) {
    .p-top-account > .body .title {
      font-size: calc(32 * var(--spacing));
    }
  }

  .p-top-banner {
    gap: calc(24 * var(--spacing));
    width: calc(360 * var(--spacing));
    margin-top: calc(64 * var(--spacing));
    margin-right: auto;
    margin-bottom: calc(64 * var(--spacing));
    text-align: center;
    place-content: center;
    place-items: center;
    margin-left: auto;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-banner {
      gap: calc(40 * var(--spacing));
      width: calc(1040 * var(--spacing));
      margin-top: calc(100 * var(--spacing));
      margin-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-banner a {
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: var(--sumakouza-duration);
    transition-property: opacity;
  }

  .p-top-banner a:hover {
    opacity: .6;
  }

  .p-top-banner img {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .p-top-benefits-table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
  }

  .p-top-benefits-table th, .p-top-benefits-table td {
    padding: calc(16 * var(--spacing));
    font-size: var(--text-sm);
    line-height: var(--leading-comfort);
    vertical-align: top;
    border: var(--spacing) solid var(--color-white);
  }

  @media (width >= 800px) {
    .p-top-benefits-table th, .p-top-benefits-table td {
      padding: calc(28 * var(--spacing)) calc(32 * var(--spacing));
    }
  }

  .p-top-benefits-table th {
    font-weight: var(--font-weight-medium);
    background-color: var(--color-ice-blue);
  }

  @media not all and (width >= 800px) {
    .p-top-benefits-table th {
      padding-inline: calc(8 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-benefits-table th {
      font-size: var(--text-base);
    }
  }

  .p-top-benefits-table td {
    background-color: var(--color-pale-gray);
  }

  @media (width >= 800px) {
    .p-top-benefits-table td {
      font-size: calc(15 * var(--spacing));
    }
  }

  .p-top-benefits-table td > * + * {
    margin-top: calc(8 * var(--spacing));
  }

  .p-top-benefits-table td ul:not([class]) {
    font-size: inherit;
    padding-left: 1em;
    list-style: outside;
  }

  .p-top-benefits-table td ul:not([class]) > li > :is(ul, ol), .p-top-benefits-table td ul:not([class]) > li + li {
    margin-top: calc(8 * var(--spacing));
  }

  .p-top-benefits {
    width: calc(360 * var(--spacing));
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-benefits {
      width: calc(1040 * var(--spacing));
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-benefits > .title {
    margin-bottom: calc(32 * var(--spacing));
    font-size: calc(28 * var(--spacing));
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-benefits > .title {
      margin-bottom: calc(40 * var(--spacing));
      font-size: calc(32 * var(--spacing));
    }
  }

  .p-top-cta {
    width: 100%;
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(168 * var(--spacing));
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-sky-blue);
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-cta {
      padding-top: calc(128 * var(--spacing));
      padding-bottom: calc(128 * var(--spacing));
    }
  }

  .p-top-cta .desc {
    margin-bottom: calc(16 * var(--spacing));
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
  }

  @media (width >= 800px) {
    .p-top-cta .desc {
      margin-bottom: calc(20 * var(--spacing));
      font-size: var(--text-2xl);
    }
  }

  .p-top-cta .button {
    width: calc(360 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-cta .button {
      width: calc(480 * var(--spacing));
    }
  }

  .p-top-cta > .smaton {
    pointer-events: none;
    position: absolute;
    bottom: 0;
  }

  @media not all and (width >= 800px) {
    .p-top-cta > .smaton {
      left: calc(20 * var(--spacing));
      width: calc(104 * var(--spacing));
      height: calc(144 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-cta > .smaton {
      width: calc(130 * var(--spacing));
      height: calc(180 * var(--spacing));
      margin-right: calc(260 * var(--spacing));
      right: 50%;
    }
  }

  .p-top-cta > .smaton:before {
    content: "";
    transform-origin: bottom;
    background-image: url("/d-bank/sumakouza/img/about-value_smaton-body.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .p-top-cta > .smaton[data-rola-inview="true"]:before {
    animation: var(--stepping-smaton);
  }

  .p-top-data-age {
    display: grid;
  }

  @media not all and (width >= 800px) {
    .p-top-data-age {
      gap: calc(24 * var(--spacing));
      padding-top: calc(24 * var(--spacing));
      padding-bottom: calc(32 * var(--spacing));
      grid-template-columns: 100%;
      justify-items: center;
    }
  }

  @media (width >= 800px) {
    .p-top-data-age {
      grid-template-columns: calc(180 * var(--spacing)) 1fr;
      gap: calc(32 * var(--spacing));
      padding: calc(44 * var(--spacing)) calc(44 * var(--spacing)) calc(44 * var(--spacing)) calc(50 * var(--spacing));
      align-items: center;
    }
  }

  @media not all and (width >= 800px) {
    .p-top-data-age .graph {
      width: calc(180 * var(--spacing));
    }
  }

  .p-top-data-age .graph img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-data-age .detail {
    grid-template-columns: 1fr calc(72 * var(--spacing));
    gap: calc(12 * var(--spacing));
    display: grid;
  }

  @media not all and (width >= 800px) {
    .p-top-data-age .detail {
      gap: calc(16 * var(--spacing)) calc(12 * var(--spacing));
      width: calc(194 * var(--spacing));
    }
  }

  .p-top-data-age .detail dt, .p-top-data-age .detail dd {
    flex: none;
  }

  :is(.p-top-data-age .detail dt, .p-top-data-age .detail dd) .number {
    margin-right: calc(2 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: normal;
    line-height: 1;
    display: inline-block;
  }

  .p-top-data-age .detail dt {
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-bold);
    align-items: baseline;
    line-height: 1;
    display: flex;
  }

  @media not all and (width >= 800px) {
    .p-top-data-age .detail dt .number {
      font-size: calc(22 * var(--spacing));
    }
  }

  .p-top-data-age .detail dt:after {
    width: auto;
    height: 1em;
    margin-left: calc(12 * var(--spacing));
    content: "";
    background-image: radial-gradient(circle, currentColor 30.3043%, #0000 30.3043%);
    background-repeat: repeat-x;
    background-position: right calc(-2 * var(--spacing)) top 50%;
    background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
    flex: auto;
    display: block;
  }

  .p-top-data-age .detail dd {
    font-family: var(--font-en);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    text-align: right;
    white-space: nowrap;
    line-height: 1;
  }

  .p-top-data-area {
    padding: calc(24 * var(--spacing)) calc(20 * var(--spacing)) calc(32 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-data-area {
      padding: calc(62 * var(--spacing)) calc(540 * var(--spacing)) calc(70 * var(--spacing)) calc(70 * var(--spacing));
    }
  }

  .p-top-data-area .detail {
    columns: 2;
    column-fill: auto;
  }

  @media not all and (width >= 800px) {
    .p-top-data-area .detail {
      column-gap: calc(20 * var(--spacing));
      width: 100%;
      height: calc(182 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-data-area .detail {
      column-gap: calc(40 * var(--spacing));
      height: calc(196 * var(--spacing));
      margin-bottom: calc(-14 * var(--spacing));
    }
  }

  .p-top-data-area .detail .item {
    column-gap: calc(6 * var(--spacing));
    margin-bottom: calc(14 * var(--spacing));
    break-inside: avoid;
    align-items: center;
    display: flex;
  }

  @media (width >= 800px) {
    .p-top-data-area .detail .item {
      column-gap: calc(8 * var(--spacing));
    }
  }

  @media not all and (width >= 800px) {
    .p-top-data-area .detail .item.-kyushu {
      column-gap: 0;
    }

    .p-top-data-area .detail .item.-kyushu dt:after {
      display: none;
    }

    .p-top-data-area .detail .item.-kyushu dd {
      width: auto;
    }
  }

  .p-top-data-area .detail .item dt, .p-top-data-area .detail .item dd {
    flex: none;
  }

  :is(.p-top-data-area .detail .item dt, .p-top-data-area .detail .item dd) .number {
    margin-right: calc(2 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: normal;
    line-height: 1;
    display: inline-block;
  }

  @media (width >= 800px) {
    :is(.p-top-data-area .detail .item dt, .p-top-data-area .detail .item dd) .number {
      font-size: calc(28 * var(--spacing));
    }
  }

  .p-top-data-area .detail .item dt {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    flex: auto;
    align-items: baseline;
    line-height: 1;
    display: flex;
  }

  .p-top-data-area .detail .item dt:after {
    width: auto;
    height: 1em;
    margin-left: calc(6 * var(--spacing));
    content: "";
    background-image: radial-gradient(circle, currentColor 30.3043%, #0000 30.3043%);
    background-repeat: repeat-x;
    background-position: right calc(-2 * var(--spacing)) top 50%;
    background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
    flex: auto;
    display: block;
  }

  @media (width >= 800px) {
    .p-top-data-area .detail .item dt:after {
      margin-left: calc(12 * var(--spacing));
    }
  }

  .p-top-data-area .detail .item dd {
    width: calc(70 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    text-align: right;
    white-space: nowrap;
    line-height: 1;
  }

  @media (width >= 800px) {
    .p-top-data-area .detail .item dd {
      width: calc(78 * var(--spacing));
      font-size: var(--text-base);
    }
  }

  .p-top-data-area .detail .item dd.lower {
    width: calc(56 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-data-area .detail .item dd.lower {
      width: calc(64 * var(--spacing));
    }
  }

  @media not all and (width >= 800px) {
    .p-top-data-area .map {
      width: calc(320 * var(--spacing));
      margin-top: calc(24 * var(--spacing));
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (width >= 800px) {
    .p-top-data-area .map {
      right: calc(20 * var(--spacing));
      bottom: calc(24 * var(--spacing));
      width: calc(453 * var(--spacing));
      height: calc(321 * var(--spacing));
      position: absolute;
    }
  }

  .p-top-data-area .map img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-data-container {
    gap: calc(24 * var(--spacing));
    width: calc(360 * var(--spacing));
    grid-template-columns: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-data-container {
      gap: calc(20 * var(--spacing));
      width: calc(1040 * var(--spacing));
      grid-template-columns: repeat(2, 1fr);
    }

    .p-top-data-container .p-top-data-figure:last-child {
      grid-column: span 2;
    }
  }

  .p-top-data-figure {
    background-color: var(--color-white);
    border-radius: calc(20 * var(--spacing));
    padding-top: calc(76 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-data-figure {
      padding-top: calc(84 * var(--spacing));
    }
  }

  .p-top-data-figure figcaption {
    top: calc(32 * var(--spacing));
    background-color: var(--color-pale-gray);
    border-radius: calc(8 * var(--spacing));
    padding: calc(10 * var(--spacing)) calc(22 * var(--spacing));
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    place-content: center;
    place-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
  }

  .p-top-data-gender {
    gap: calc(40 * var(--spacing));
    width: fit-content;
    padding-top: calc(24 * var(--spacing));
    padding-bottom: calc(32 * var(--spacing));
    grid-template-columns: repeat(2, 1fr);
    margin-left: auto;
    margin-right: auto;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-data-gender {
      gap: calc(78 * var(--spacing));
      padding-top: calc(64 * var(--spacing));
      padding-bottom: calc(72 * var(--spacing));
    }
  }

  .p-top-data-gender .item {
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .p-top-data-gender .item dt {
    margin-bottom: calc(10 * var(--spacing));
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue);
    line-height: 1;
  }

  @media (width >= 800px) {
    .p-top-data-gender .item dt {
      margin-bottom: calc(8 * var(--spacing));
    }
  }

  .p-top-data-gender .item dd {
    font-family: var(--font-en);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: normal;
    line-height: 1;
  }

  @media (width >= 800px) {
    .p-top-data-gender .item dd {
      font-size: calc(27 * var(--spacing));
    }
  }

  .p-top-data-gender .item dd .number {
    font-size: calc(48 * var(--spacing));
    font-weight: var(--font-weight-medium);
    vertical-align: baseline;
    display: inline-block;
  }

  @media (width >= 800px) {
    .p-top-data-gender .item dd .number {
      font-size: calc(60 * var(--spacing));
    }
  }

  .p-top-data-gender .item:after {
    width: calc(110 * var(--spacing));
    aspect-ratio: 1;
    height: auto;
    margin-top: calc(12 * var(--spacing));
    content: "";
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  @media (width >= 800px) {
    .p-top-data-gender .item:after {
      width: calc(116 * var(--spacing));
      margin-top: calc(20 * var(--spacing));
    }
  }

  .p-top-data-gender .item.-male:after {
    background-image: url("/d-bank/sumakouza/img/data-gender_male.svg");
  }

  .p-top-data-gender .item.-female:after {
    background-image: url("/d-bank/sumakouza/img/data-gender_female.svg");
  }

  .p-top-data {
    background-image: linear-gradient(var(--color-pale-blue));
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% calc(60 * var(--spacing));
    position: relative;
  }

  .p-top-data > .inner {
    width: 100%;
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    background-color: var(--color-sky-blue);
    background-image: url("/d-bank/sumakouza/img/data_bg-grid.svg");
    background-position: top;
    background-repeat: repeat;
    background-size: calc(30 * var(--spacing)) calc(30 * var(--spacing));
    border-radius: calc(60 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-data > .inner {
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-data > .inner .notes {
    width: calc(360 * var(--spacing));
    margin-top: calc(12 * var(--spacing));
    color: var(--color-white);
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-data > .inner .notes {
      width: calc(1040 * var(--spacing));
    }

    .p-top-data > .inner .notes .c-list-notes {
      text-align: right;
      width: fit-content;
      margin-left: auto;
    }
  }

  .p-top-data > .smaton {
    pointer-events: none;
    position: absolute;
  }

  @media not all and (width >= 800px) {
    .p-top-data > .smaton {
      top: calc(-45 * var(--spacing));
      left: calc(18 * var(--spacing));
      width: calc(102 * var(--spacing));
      height: calc(125 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-data > .smaton {
      top: calc(-34 * var(--spacing));
      width: calc(134 * var(--spacing));
      height: calc(164 * var(--spacing));
      margin-right: calc(360 * var(--spacing));
      right: 50%;
    }
  }

  .p-top-data > .smaton:before {
    content: "";
    transform-origin: bottom;
    background-image: url("/d-bank/sumakouza/img/data_smaton-body.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .p-top-data > .smaton[data-rola-inview="true"]:before {
    animation: var(--floating-smaton);
  }

  .p-top-faq-question {
    border-top: var(--spacing) solid var(--color-silver);
    border-bottom: var(--spacing) solid var(--color-silver);
  }

  @media (width >= 800px) {
    .p-top-faq-question {
      padding-right: calc(20 * var(--spacing));
      padding-left: calc(20 * var(--spacing));
    }
  }

  .p-top-faq-question .toggle {
    gap: calc(16 * var(--spacing));
    padding-top: calc(24 * var(--spacing));
    padding-bottom: calc(24 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-faq-question .toggle {
      padding-top: calc(32 * var(--spacing));
      padding-bottom: calc(32 * var(--spacing));
    }
  }

  .p-top-faq-question .toggle .question {
    padding-left: calc(42 * var(--spacing));
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    position: relative;
  }

  .p-top-faq-question .toggle .question:before {
    font-family: var(--font-en);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    content: "Q.";
    line-height: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .p-top-faq-question .toggle:hover .question span {
    background-image: linear-gradient(currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% var(--spacing);
  }

  .p-top-faq-question .wrapper .body .answer {
    padding-bottom: calc(24 * var(--spacing));
    padding-left: calc(42 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-faq-question .wrapper .body .answer {
      padding-bottom: calc(32 * var(--spacing));
    }
  }

  .p-top-faq-question .wrapper .body .answer:before {
    font-family: var(--font-en);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    content: "A.";
    line-height: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .p-top-faq-question .wrapper .body .answer > * + * {
    margin-top: calc(8 * var(--spacing));
  }

  .p-top-faq-question .wrapper .body .answer .c-desc, .p-top-faq-question .wrapper .body .answer .c-list-notes, .p-top-faq-question .wrapper .body .answer .c-list-disc {
    font-size: var(--text-sm);
  }

  @media (width >= 800px) {
    .p-top-faq-question .wrapper .body .answer .c-desc, .p-top-faq-question .wrapper .body .answer .c-list-notes, .p-top-faq-question .wrapper .body .answer .c-list-disc {
      font-size: calc(15 * var(--spacing));
    }
  }

  .p-top-faq-question .wrapper .body .answer .c-table:not(:first-child) {
    margin-top: calc(16 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-faq-question .wrapper .body .answer .c-table:not(:first-child) {
      margin-top: calc(20 * var(--spacing));
    }
  }

  .p-top-faq-question .wrapper .body .answer .c-table:not(:last-child) {
    margin-bottom: calc(16 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-faq-question .wrapper .body .answer .c-table:not(:last-child) {
      margin-bottom: calc(20 * var(--spacing));
    }
  }

  .p-top-faq-question + .p-top-faq-question {
    margin-top: calc(-1 * var(--spacing));
  }

  .p-top-faq-tablist {
    gap: calc(2 * var(--spacing));
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-faq-tablist {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .p-top-faq-tablist .tab {
    min-height: calc(64 * var(--spacing));
    padding: calc(8 * var(--spacing));
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
    background-color: var(--color-light-gray);
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: var(--sumakouza-duration);
    place-content: center;
    place-items: center;
    transition-property: color, background-color;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-faq-tablist .tab {
      border-radius: calc(4 * var(--spacing)) calc(4 * var(--spacing)) 0 0;
    }
  }

  .p-top-faq-tablist .tab span {
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-medium);
  }

  @media (width >= 800px) {
    .p-top-faq-tablist .tab span {
      font-size: var(--text-base);
    }
  }

  .p-top-faq-tablist .tab:hover span {
    background-image: linear-gradient(currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% var(--spacing);
  }

  .p-top-faq-tablist .tab[aria-selected="true"] {
    color: var(--color-white);
    background-color: var(--color-sky-blue);
  }

  .p-top-faq-tabpanels {
    background-color: var(--color-pale-gray);
    padding: calc(40 * var(--spacing)) calc(24 * var(--spacing));
    border-radius: 0 0 calc(20 * var(--spacing)) calc(20 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-faq-tabpanels {
      padding: calc(80 * var(--spacing));
    }
  }

  .p-top-faq {
    width: calc(360 * var(--spacing));
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-faq {
      width: calc(1040 * var(--spacing));
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-faq:has( + .p-top-fee) {
    padding-bottom: 0;
  }

  .p-top-fee-wisely {
    padding: calc(48 * var(--spacing)) calc(24 * var(--spacing));
    text-align: center;
    background-color: var(--color-pale-gray);
    border-radius: calc(20 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-fee-wisely {
      padding: calc(56 * var(--spacing));
    }
  }

  .p-top-fee-wisely > .title {
    margin-bottom: calc(24 * var(--spacing));
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl);
  }

  @media (width >= 800px) {
    .p-top-fee-wisely > .title {
      margin-bottom: calc(40 * var(--spacing));
      font-size: calc(28 * var(--spacing));
    }
  }

  .p-top-fee-wisely > .desc {
    line-height: var(--leading-comfort);
  }

  @media (width >= 800px) {
    .p-top-fee-wisely > .desc {
      font-size: var(--text-base);
    }
  }

  .p-top-fee-wisely > .buttons {
    gap: calc(12 * var(--spacing));
    width: calc(312 * var(--spacing));
    margin-top: calc(32 * var(--spacing));
    grid-template-columns: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-fee-wisely > .buttons {
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      width: fit-content;
    }
  }

  .p-top-fee-wisely > .smaton {
    pointer-events: none;
    position: absolute;
  }

  @media not all and (width >= 800px) {
    .p-top-fee-wisely > .smaton {
      top: calc(-72 * var(--spacing));
      width: calc(131 * var(--spacing));
      height: calc(110 * var(--spacing));
      right: 0;
    }
  }

  @media (width >= 800px) {
    .p-top-fee-wisely > .smaton {
      bottom: calc(71 * var(--spacing));
      width: calc(175 * var(--spacing));
      height: calc(148 * var(--spacing));
      margin-left: calc(381 * var(--spacing));
      left: 50%;
    }
  }

  .p-top-fee-wisely > .smaton:before {
    content: "";
    transform-origin: bottom;
    background-image: url("/d-bank/sumakouza/img/fee-wisely_smaton-body.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .p-top-fee-wisely > .smaton[data-rola-inview="true"]:before {
    animation: var(--floating-smaton);
  }

  .p-top-fee-wisely + * {
    margin-top: calc(20 * var(--spacing));
  }

  .p-top-fee {
    width: calc(360 * var(--spacing));
    padding-top: calc(96 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-fee {
      width: calc(1040 * var(--spacing));
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-fee:has( + .p-top-benefits) {
    padding-bottom: 0;
  }

  .p-top-flow-steps {
    width: calc(304 * var(--spacing));
    padding-top: calc(28 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-flow-steps {
      gap: calc(62 * var(--spacing));
      width: calc(1120 * var(--spacing));
      grid-template-columns: repeat(3, 1fr);
      display: grid;
    }
  }

  .p-top-flow-steps > .item {
    position: relative;
  }

  .p-top-flow-steps > .item[data-rola-inview] {
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: calc(2 * var(--sumakouza-duration));
    transition-property: opacity, translate;
  }

  .p-top-flow-steps > .item[data-rola-inview="false"] {
    opacity: 0;
    translate: 0 10%;
  }

  .p-top-flow-steps > .item[data-rola-inview="true"] {
    opacity: 1;
    translate: 0;
  }

  @media (width >= 800px) {
    .p-top-flow-steps > .item[data-rola-inview="true"]:nth-of-type(2) {
      transition-delay: calc(1.5 * var(--sumakouza-duration));
    }

    .p-top-flow-steps > .item[data-rola-inview="true"]:nth-of-type(3) {
      transition-delay: calc(3 * var(--sumakouza-duration));
    }
  }

  .p-top-flow-steps > .item .label {
    z-index: 2;
    width: calc(56 * var(--spacing));
    aspect-ratio: 1;
    height: auto;
    font-family: var(--font-en);
    color: var(--color-blue);
    letter-spacing: .02em;
    background-color: var(--color-yellow);
    border-radius: calc(14 * var(--spacing));
    place-content: center;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    translate: 0 -50%;
  }

  .p-top-flow-steps > .item .label .step {
    font-size: var(--text-xxs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
  }

  .p-top-flow-steps > .item .label .number {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
  }

  .p-top-flow-steps > .item .image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-flow-steps > .item .desc {
    margin-top: calc(16 * var(--spacing));
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-flow-steps > .item .desc {
      margin-top: calc(32 * var(--spacing));
      font-size: var(--text-xl);
    }
  }

  .p-top-flow-steps > .item + .item {
    position: relative;
  }

  @media not all and (width >= 800px) {
    .p-top-flow-steps > .item + .item {
      margin-top: calc(88 * var(--spacing));
    }

    .p-top-flow-steps > .item + .item:before {
      top: calc(-67 * var(--spacing));
      width: calc(3 * var(--spacing));
      height: calc(17 * var(--spacing));
      content: "";
      background-image: radial-gradient(circle, var(--color-white) calc(3 / 7 * 70.71%), transparent calc(3 / 7 * 70.71%));
      background-repeat: repeat-y;
      background-position: calc(-2 * var(--spacing)) calc(-2 * var(--spacing));
      background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
      margin-left: auto;
      margin-right: auto;
      display: block;
      position: absolute;
      left: 0;
      right: 0;
    }
  }

  .p-top-flow-steps > .item + .item .image {
    overflow: visible;
  }

  @media (width >= 800px) {
    .p-top-flow-steps > .item + .item .image {
      position: relative;
    }

    .p-top-flow-steps > .item + .item .image:before {
      top: 0;
      bottom: 0;
      left: calc(-46 * var(--spacing));
      width: calc(31 * var(--spacing));
      height: calc(3 * var(--spacing));
      content: "";
      background-image: radial-gradient(circle, var(--color-white) calc(3 / 7 * 70.71%), transparent calc(3 / 7 * 70.71%));
      background-repeat: repeat-x;
      background-position: calc(-2 * var(--spacing)) calc(-2 * var(--spacing));
      background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
      margin-top: auto;
      margin-bottom: auto;
      position: absolute;
    }
  }

  .p-top-flow {
    width: 100%;
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    color: var(--color-white);
    background-color: var(--color-sky-blue);
  }

  @media (width >= 800px) {
    .p-top-flow {
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-flow > .heading {
    margin-bottom: calc(32 * var(--spacing));
    line-height: var(--leading-snug);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-flow > .heading {
      margin-bottom: calc(64 * var(--spacing));
    }
  }

  .p-top-flow > .heading .sub {
    margin-bottom: calc(12 * var(--spacing));
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
  }

  @media (width >= 800px) {
    .p-top-flow > .heading .sub {
      margin-bottom: calc(16 * var(--spacing));
    }
  }

  .p-top-flow > .heading .main {
    font-size: calc(26 * var(--spacing));
    font-weight: var(--font-weight-bold);
  }

  @media (width >= 800px) {
    .p-top-flow > .heading .main {
      font-size: calc(32 * var(--spacing));
    }
  }

  .p-top-flow > .notes {
    width: calc(360 * var(--spacing));
    margin-top: calc(40 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-flow > .notes {
      width: calc(1120 * var(--spacing));
      margin-top: calc(56 * var(--spacing));
    }
  }

  .p-top-flow > .notes .desc {
    margin-bottom: calc(12 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  @media (width >= 800px) {
    .p-top-flow > .notes .desc {
      margin-bottom: calc(8 * var(--spacing));
    }
  }

  .p-top-flow > .button {
    width: calc(360 * var(--spacing));
    margin-top: calc(40 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-flow > .button {
      width: calc(480 * var(--spacing));
      margin-top: calc(72 * var(--spacing));
    }
  }

  .p-top-heading {
    gap: calc(12 * var(--spacing));
    width: max-content;
    margin-right: auto;
    margin-bottom: calc(32 * var(--spacing));
    text-align: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    margin-left: auto;
    display: flex;
  }

  @media (width >= 800px) {
    .p-top-heading {
      gap: calc(8 * var(--spacing));
      margin-bottom: calc(56 * var(--spacing));
    }
  }

  .p-top-heading:has(.sumakouza) {
    gap: calc(16 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-heading:has(.sumakouza) {
      gap: calc(20 * var(--spacing));
    }
  }

  .p-top-heading:has(.accent) {
    gap: calc(2 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-heading:has(.accent) {
      gap: 0;
    }
  }

  .p-top-heading .sub {
    font-family: var(--font-en);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .p-top-heading .main {
    font-size: calc(28 * var(--spacing));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
  }

  @media (width >= 800px) {
    .p-top-heading .main {
      font-size: calc(40 * var(--spacing));
    }
  }

  .p-top-heading .main .sumakouza {
    width: auto;
    height: calc(28 * var(--spacing));
    margin-right: calc(4 * var(--spacing));
    vertical-align: -.1em;
    display: inline-block;
  }

  @media (width >= 800px) {
    .p-top-heading .main .sumakouza {
      height: calc(48 * var(--spacing));
    }
  }

  .p-top-heading .main .accent {
    font-family: var(--font-en);
    font-size: calc(43 * var(--spacing));
    font-weight: var(--font-weight-medium);
    line-height: 1;
    display: inline-block;
  }

  @media (width >= 800px) {
    .p-top-heading .main .accent {
      font-size: calc(72 * var(--spacing));
    }
  }

  .p-top-howto-steps {
    padding: calc(32 * var(--spacing));
    background-color: var(--color-white);
  }

  @media (width >= 800px) {
    .p-top-howto-steps {
      padding: calc(40 * var(--spacing));
    }
  }

  .p-top-howto-steps > .list {
    padding-top: calc(24 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-howto-steps > .list {
      gap: calc(33 * var(--spacing));
      grid-template-columns: repeat(3, 1fr);
      display: grid;
    }
  }

  .p-top-howto-steps .item {
    position: relative;
  }

  .p-top-howto-steps .item .label {
    z-index: 2;
    width: calc(48 * var(--spacing));
    aspect-ratio: 1;
    height: auto;
    font-family: var(--font-en);
    color: var(--color-blue);
    letter-spacing: .02em;
    background-color: var(--color-yellow);
    border-radius: calc(14 * var(--spacing));
    place-content: center;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    translate: 0 -50%;
  }

  .p-top-howto-steps .item .label .step {
    font-size: calc(8 * var(--spacing));
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
  }

  .p-top-howto-steps .item .label .number {
    font-size: calc(17 * var(--spacing));
    font-weight: var(--font-weight-medium);
  }

  .p-top-howto-steps .item .image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-howto-steps .item .desc {
    margin-top: calc(16 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-howto-steps .item .desc {
      margin-top: calc(24 * var(--spacing));
      font-size: var(--text-sm);
    }
  }

  .p-top-howto-steps .item + .item {
    position: relative;
  }

  @media not all and (width >= 800px) {
    .p-top-howto-steps .item + .item {
      margin-top: calc(64 * var(--spacing));
    }

    .p-top-howto-steps .item + .item:before {
      top: calc(-53 * var(--spacing));
      width: calc(3 * var(--spacing));
      height: calc(17 * var(--spacing));
      content: "";
      background-image: radial-gradient(circle, var(--color-text) calc(3 / 7 * 70.71%), transparent calc(3 / 7 * 70.71%));
      background-repeat: repeat-y;
      background-position: calc(-2 * var(--spacing)) calc(-2 * var(--spacing));
      background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
      margin-left: auto;
      margin-right: auto;
      display: block;
      position: absolute;
      left: 0;
      right: 0;
    }
  }

  .p-top-howto-steps .item + .item .image {
    overflow: visible;
  }

  @media (width >= 800px) {
    .p-top-howto-steps .item + .item .image {
      position: relative;
    }

    .p-top-howto-steps .item + .item .image:before {
      top: 0;
      bottom: 0;
      left: calc(-25 * var(--spacing));
      width: calc(17 * var(--spacing));
      height: calc(3 * var(--spacing));
      content: "";
      background-image: radial-gradient(circle, var(--color-text) calc(3 / 7 * 70.71%), transparent calc(3 / 7 * 70.71%));
      background-repeat: repeat-x;
      background-position: calc(-2 * var(--spacing)) calc(-2 * var(--spacing));
      background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
      margin-top: auto;
      margin-bottom: auto;
      position: absolute;
    }
  }

  .p-top-howto .toggle {
    gap: calc(16 * var(--spacing));
    min-height: calc(80 * var(--spacing));
    padding: calc(16 * var(--spacing)) calc(16 * var(--spacing)) calc(16 * var(--spacing)) calc(20 * var(--spacing));
    color: var(--color-white);
    background-color: var(--color-sky-blue);
  }

  @media (width >= 800px) {
    .p-top-howto .toggle {
      padding: calc(22 * var(--spacing)) calc(26 * var(--spacing)) calc(22 * var(--spacing)) calc(44 * var(--spacing));
    }
  }

  .p-top-howto .toggle .title {
    font-weight: var(--font-weight-bold);
  }

  .p-top-howto .toggle .icon {
    color: var(--color-sky-blue);
  }

  .p-top-howto .toggle:hover .title span {
    background-image: linear-gradient(currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% var(--spacing);
  }

  .p-top-howto .wrapper {
    background-color: var(--color-pale-gray);
  }

  .p-top-howto .wrapper .body {
    padding-right: calc(20 * var(--spacing));
    padding-left: calc(20 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-howto .wrapper .body {
      padding-right: calc(64 * var(--spacing));
      padding-left: calc(64 * var(--spacing));
    }
  }

  .p-top-howto .wrapper .body:before, .p-top-howto .wrapper .body:after {
    height: calc(48 * var(--spacing));
    pointer-events: none;
    content: "";
    display: block;
  }

  @media (width >= 800px) {
    .p-top-howto .wrapper .body:before, .p-top-howto .wrapper .body:after {
      height: calc(72 * var(--spacing));
    }
  }

  .p-top-howto .wrapper .body > * + * {
    margin-top: calc(12 * var(--spacing));
  }

  .p-top-howto .wrapper .body > * + :is(.p-top-howto-steps, .c-table) {
    margin-top: calc(24 * var(--spacing));
  }

  .p-top-howto .wrapper .body .heading {
    margin-top: calc(40 * var(--spacing));
    margin-bottom: calc(16 * var(--spacing));
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
  }

  .p-top-howto .wrapper .body .heading[data-number] {
    padding-left: calc(32 * var(--spacing));
    position: relative;
  }

  .p-top-howto .wrapper .body .heading[data-number]:before {
    width: calc(24 * var(--spacing));
    height: calc(24 * var(--spacing));
    aspect-ratio: 1;
    font-family: var(--font-en);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: normal;
    content: attr(data-number);
    background-color: var(--color-green);
    border-radius: 50%;
    place-content: center;
    place-items: center;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .p-top-howto + * {
    margin-top: calc(16 * var(--spacing));
  }

  .p-top-merit-heading {
    margin-bottom: calc(32 * var(--spacing));
  }

  .p-top-merit-heading > .label {
    width: fit-content;
    padding: calc(10 * var(--spacing)) calc(20 * var(--spacing));
    margin-bottom: calc(12 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: .04em;
    background-color: var(--color-sky-blue);
    border-radius: 100vmax;
    line-height: 1;
  }

  @media (width >= 800px) {
    .p-top-merit-heading > .label {
      margin-bottom: calc(16 * var(--spacing));
    }
  }

  .p-top-merit-heading > .title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
  }

  @media (width >= 800px) {
    .p-top-merit-heading > .title {
      font-size: var(--text-4xl);
    }
  }

  .p-top-merit-heading > .title ruby {
    ruby-align: center;
  }

  .p-top-merit-heading > .title rt, .p-top-merit-heading > .title rp {
    font-size: var(--text-xxs);
  }

  .p-top-merit-heading > .title .number {
    font-family: var(--font-en);
    font-size: calc(30 * var(--spacing));
    font-weight: var(--font-weight-semibold);
    vertical-align: -.05em;
    letter-spacing: normal;
    line-height: 1;
    display: inline-block;
  }

  @media (width >= 800px) {
    .p-top-merit-heading > .title .number {
      font-size: calc(44 * var(--spacing));
    }
  }

  .p-top-merit-row {
    gap: calc(32 * var(--spacing));
    grid-template-columns: 100%;
    display: grid;
  }

  @media (width >= 800px) {
    .p-top-merit-row {
      grid-template-columns: calc(500 * var(--spacing)) calc(380 * var(--spacing));
      gap: calc(80 * var(--spacing));
      justify-content: space-between;
    }
  }

  .p-top-merit-row > .body .lead {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-comfort);
  }

  .p-top-merit-row > .body .lead + * {
    margin-top: calc(20 * var(--spacing));
  }

  .p-top-merit-row > .body .table-cashback {
    margin-top: calc(32 * var(--spacing));
  }

  :is(.p-top-merit-row > .body .list-decimal, .p-top-merit-row > .body .list-check):not(:first-child) {
    margin-top: calc(40 * var(--spacing));
  }

  :is(.p-top-merit-row > .body .list-decimal, .p-top-merit-row > .body .list-check) .title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    padding-bottom: 12px;
  }

  :is(.p-top-merit-row > .body .list-decimal, .p-top-merit-row > .body .list-check) + .c-list-notes {
    margin-top: calc(16 * var(--spacing));
  }

  .p-top-merit-row > .body .list-decimal {
    counter-reset: list-decimal;
  }

  .p-top-merit-row > .body .list-decimal .title {
    background-image: linear-gradient(to right, var(--color-gray) 50%, transparent 50%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-clip: border-box;
    background-size: calc(6 * var(--spacing)) var(--spacing);
    border-bottom: var(--spacing) solid transparent;
  }

  .p-top-merit-row > .body .list-decimal .item {
    min-height: calc(24 * var(--spacing));
    padding-top: calc(12 * var(--spacing));
    padding-right: calc(4 * var(--spacing));
    padding-bottom: calc(12 * var(--spacing));
    padding-left: calc(32 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    counter-increment: list-decimal;
    background-image: linear-gradient(to right, var(--color-gray) 50%, transparent 50%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: calc(6 * var(--spacing)) var(--spacing);
    border-bottom: var(--spacing) solid transparent;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-merit-row > .body .list-decimal .item {
      padding-right: calc(12 * var(--spacing));
      padding-left: calc(44 * var(--spacing));
    }
  }

  .p-top-merit-row > .body .list-decimal .item:before {
    width: calc(24 * var(--spacing));
    height: calc(24 * var(--spacing));
    aspect-ratio: 1;
    font-family: var(--font-en);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: normal;
    content: counter(list-decimal);
    background-color: var(--color-green);
    border-radius: 50%;
    place-content: center;
    place-items: center;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  @media (width >= 800px) {
    .p-top-merit-row > .body .list-decimal .item:before {
      left: calc(12 * var(--spacing));
    }
  }

  .p-top-merit-row > .body .list-check {
    grid-template-rows: auto var(--spacing) auto var(--spacing) auto;
    background-image: linear-gradient(to right, var(--color-gray) 50%, transparent 50%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-clip: border-box;
    background-size: calc(6 * var(--spacing)) var(--spacing);
    border-bottom: var(--spacing) solid transparent;
    grid-template-columns: auto 1fr;
    display: grid;
    position: relative;
  }

  .p-top-merit-row > .body .list-check:before {
    grid-row: 2 / 3;
  }

  .p-top-merit-row > .body .list-check:after {
    grid-row: 4 / 5;
  }

  .p-top-merit-row > .body .list-check:before, .p-top-merit-row > .body .list-check:after {
    width: 100%;
    height: var(--spacing);
    content: "";
    background-image: linear-gradient(to right, var(--color-gray) 50%, transparent 50%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: calc(6 * var(--spacing)) var(--spacing);
    grid-column: span 2;
    display: block;
  }

  .p-top-merit-row > .body .list-check .title {
    grid-column: span 2;
  }

  .p-top-merit-row > .body .list-check .item {
    min-height: calc(24 * var(--spacing));
    padding-top: calc(12 * var(--spacing));
    padding-right: calc(4 * var(--spacing));
    padding-bottom: calc(12 * var(--spacing));
    padding-left: calc(32 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    align-self: center;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-merit-row > .body .list-check .item {
      padding-right: calc(12 * var(--spacing));
      padding-left: calc(44 * var(--spacing));
    }
  }

  .p-top-merit-row > .body .list-check .item:before {
    width: calc(24 * var(--spacing));
    height: calc(24 * var(--spacing));
    aspect-ratio: 1;
    font-family: var(--font-en);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: normal;
    content: "";
    background-color: var(--color-green);
    background-image: url("/d-bank/sumakouza/img/icon_check.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    place-content: center;
    place-items: center;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  @media (width >= 800px) {
    .p-top-merit-row > .body .list-check .item:before {
      left: calc(12 * var(--spacing));
    }
  }

  .p-top-merit-row > .body .button {
    margin-top: calc(32 * var(--spacing));
  }

  .p-top-merit-row > .body .button + .c-list-notes {
    margin-top: calc(16 * var(--spacing));
  }

  .p-top-merit-row > .image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-merit-row.-merit03 .button {
    margin-top: calc(24 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-merit-row.-merit03 .button {
      margin-top: calc(40 * var(--spacing));
    }
  }

  .p-top-merit-section {
    width: calc(360 * var(--spacing));
    padding: calc(48 * var(--spacing)) calc(24 * var(--spacing));
    background-color: var(--color-white);
    border-radius: calc(20 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-merit-section {
      width: calc(1120 * var(--spacing));
      padding: calc(80 * var(--spacing));
    }
  }

  .p-top-merit-section[data-rola-inview] {
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: calc(2 * var(--sumakouza-duration));
    transition-property: opacity, translate;
  }

  .p-top-merit-section[data-rola-inview="false"] {
    opacity: 0;
    translate: 0 10%;
  }

  .p-top-merit-section[data-rola-inview="true"] {
    opacity: 1;
    translate: 0;
  }

  .p-top-merit-section + .p-top-merit-section {
    margin-top: calc(24 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-merit-section + .p-top-merit-section {
      margin-top: calc(48 * var(--spacing));
    }
  }

  .p-top-merit {
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    background-color: var(--color-pale-blue);
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-merit {
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-merit > .smaton {
    pointer-events: none;
  }

  @media not all and (width >= 800px) {
    .p-top-merit > .smaton {
      display: none;
    }
  }

  @media (width >= 800px) {
    .p-top-merit > .smaton {
      top: calc(160 * var(--spacing));
      width: calc(176 * var(--spacing));
      height: calc(149 * var(--spacing));
      margin-left: calc(400 * var(--spacing));
      position: absolute;
      left: 50%;
    }
  }

  .p-top-merit > .smaton:before {
    content: "";
    transform-origin: bottom;
    background-image: url("/d-bank/sumakouza/img/merit_smaton-body.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .p-top-merit > .smaton[data-rola-inview="true"]:before {
    animation: var(--floating-smaton);
  }

  .p-top-mv {
    background-color: var(--color-pale-blue);
  }

  .p-top-mv > .inner {
    width: calc(360 * var(--spacing));
    padding-top: calc(32 * var(--spacing));
    padding-bottom: calc(40 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-mv > .inner {
      grid-template: "info comic feature" auto "merit comic feature" 1fr "notice comic feature" auto / calc(446 * var(--spacing)) calc(576 * var(--spacing)) 1fr;
      width: 100%;
      max-width: 1280px;
      padding-top: calc(48 * var(--spacing));
      padding-right: calc(24 * var(--spacing));
      padding-bottom: calc(46 * var(--spacing));
      padding-left: calc(80 * var(--spacing));
      align-items: start;
      display: grid;
    }

    .p-top-mv .info {
      grid-area: info;
      position: relative;
    }
  }

  .p-top-mv .sumakouza {
    width: calc(260 * var(--spacing));
    margin-right: auto;
    margin-bottom: calc(20 * var(--spacing));
    margin-left: auto;
  }

  @media (width >= 800px) {
    .p-top-mv .sumakouza {
      width: calc(402 * var(--spacing));
      margin-bottom: calc(48 * var(--spacing));
    }
  }

  .p-top-mv .sumakouza img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-mv .merit {
    background-color: var(--color-pale-gray);
    border-radius: calc(16 * var(--spacing));
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-mv .merit {
      border-radius: calc(20 * var(--spacing));
      grid-area: merit;
    }
  }

  .p-top-mv .merit .label {
    width: fit-content;
    padding: calc(6 * var(--spacing)) calc(20 * var(--spacing)) calc(8 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-green);
    border-radius: 100vmax;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    translate: 0 -50%;
  }

  .p-top-mv .merit .monthly, .p-top-mv .merit .double {
    min-height: calc(128 * var(--spacing));
    padding-top: calc(28 * var(--spacing));
    padding-bottom: calc(10 * var(--spacing));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-snug);
    text-align: center;
    place-content: center;
    place-items: center;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-mv .merit .monthly, .p-top-mv .merit .double {
      min-height: calc(162 * var(--spacing));
      padding-top: calc(34 * var(--spacing));
      padding-bottom: calc(24 * var(--spacing));
      font-size: var(--text-base);
    }
  }

  :is(.p-top-mv .merit .monthly, .p-top-mv .merit .double) mark {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    position: relative;
  }

  @media (width >= 800px) {
    :is(.p-top-mv .merit .monthly, .p-top-mv .merit .double) mark {
      font-size: var(--text-2xl);
    }
  }

  :is(.p-top-mv .merit .monthly, .p-top-mv .merit .double) strong {
    margin-right: var(--spacing);
    font-family: var(--font-en);
    font-size: calc(38 * var(--spacing));
    font-weight: var(--font-weight-semibold);
    vertical-align: -.05em;
    letter-spacing: .01em;
    line-height: 1;
    display: inline-block;
  }

  @media (width >= 800px) {
    :is(.p-top-mv .merit .monthly, .p-top-mv .merit .double) strong {
      font-size: calc(40 * var(--spacing));
    }
  }

  :is(.p-top-mv .merit .monthly, .p-top-mv .merit .double) sup {
    position: absolute;
    top: .5em;
    left: 100%;
  }

  .p-top-mv .merit .monthly strong {
    margin-top: calc(3 * var(--spacing));
    margin-bottom: calc(3 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-mv .merit .monthly strong {
      margin-top: calc(8 * var(--spacing));
      margin-bottom: calc(5 * var(--spacing));
    }
  }

  .p-top-mv .merit .monthly:after {
    width: var(--spacing);
    height: auto;
    margin-top: calc(28 * var(--spacing));
    margin-bottom: calc(10 * var(--spacing));
    content: "";
    background-image: linear-gradient(to bottom, var(--color-silver) 50%, transparent 50%);
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: var(--spacing) calc(4 * var(--spacing));
    margin-left: auto;
    display: block;
    position: absolute;
    inset: 0;
    translate: 50%;
  }

  @media (width >= 800px) {
    .p-top-mv .merit .monthly:after {
      margin-top: calc(34 * var(--spacing));
      margin-bottom: calc(24 * var(--spacing));
    }

    .p-top-mv .merit .double strong {
      margin-top: calc(3 * var(--spacing));
    }
  }

  .p-top-mv .merit .present {
    padding-top: calc(8 * var(--spacing));
    padding-bottom: calc(16 * var(--spacing));
    font-size: calc(15 * var(--spacing));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    text-align: center;
    letter-spacing: .02em;
    background-color: var(--color-white);
    border-radius: 0 0 calc(16 * var(--spacing)) calc(16 * var(--spacing));
    grid-column: span 2;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-mv .merit .present {
      padding-top: calc(17 * var(--spacing));
      padding-bottom: calc(22 * var(--spacing));
      font-size: var(--font-lg);
      letter-spacing: var(--tracking-jp);
      border-radius: 0 0 calc(20 * var(--spacing)) calc(20 * var(--spacing));
    }
  }

  .p-top-mv .merit .present mark {
    color: var(--color-blue);
  }

  .p-top-mv .merit .present strong {
    margin-right: var(--spacing);
    font-family: var(--font-en);
    font-size: calc(32 * var(--spacing));
    font-weight: var(--font-weight-semibold);
    vertical-align: -.05em;
    letter-spacing: var(--tracking-en);
    line-height: 1;
    display: inline-block;
  }

  @media (width >= 800px) {
    .p-top-mv .merit .present strong {
      font-size: var(--text-4xl);
    }
  }

  .p-top-mv .merit .present .balloon {
    top: calc(-23 * var(--spacing));
    left: calc(-12 * var(--spacing));
    width: calc(48 * var(--spacing));
    aspect-ratio: 1;
    height: auto;
    font-size: calc(11 * var(--spacing));
    font-weight: var(--font-weight-bold);
    line-height: var(--loeading-snug);
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-sky-blue);
    place-content: center;
    place-items: center;
    display: grid;
    position: absolute;
    mask-image: url("/d-bank/sumakouza/img/mv_balloon.svg");
    mask-position: 50%;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  @media (width >= 800px) {
    .p-top-mv .merit .present .balloon {
      top: calc(-20 * var(--spacing));
      left: calc(-20 * var(--spacing));
      width: calc(54 * var(--spacing));
      font-size: var(--text-xs);
    }
  }

  .p-top-mv .notice {
    margin-top: calc(8 * var(--spacing));
    font-size: calc(11 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-mv .notice {
      margin-top: calc(12 * var(--spacing));
      grid-area: notice;
    }
  }

  .p-top-mv .notice > li {
    padding-left: 1em;
    position: relative;
  }

  .p-top-mv .notice > li:before {
    content: "※";
    width: 1em;
    height: auto;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media not all and (width >= 800px) {
    .p-top-mv .comic {
      margin-bottom: calc(36 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-mv .comic {
      margin-right: calc(36 * var(--spacing));
      margin-left: calc(40 * var(--spacing));
      grid-area: comic;
    }
  }

  .p-top-mv .comic img {
    width: 100%;
    height: auto;
    display: block;
  }

  @media not all and (width >= 800px) {
    .p-top-mv .feature {
      display: none;
    }
  }

  @media (width >= 800px) {
    .p-top-mv .feature {
      margin-top: calc(42 * var(--spacing));
      grid-area: feature;
      grid-template-columns: 100%;
      justify-content: center;
      place-items: start center;
      display: grid;
    }
  }

  .p-top-mv .feature .title {
    column-gap: calc(8 * var(--spacing));
    width: fit-content;
    margin-bottom: calc(16 * var(--spacing));
    font-weight: var(--font-weight-bold);
    text-align: center;
    white-space: nowrap;
    justify-content: center;
    align-items: end;
    display: flex;
  }

  @media not all and (width >= 800px) {
    .p-top-mv .feature .title {
      font-size: var(--text-base);
      grid-column: span 2;
    }
  }

  @media (width >= 800px) {
    .p-top-mv .feature .title {
      margin-bottom: calc(12 * var(--spacing));
      font-size: var(--text-sm);
    }
  }

  .p-top-mv .feature .title:before, .p-top-mv .feature .title:after {
    width: calc(2 * var(--spacing));
    height: calc(16 * var(--spacing));
    content: "";
    background-color: currentColor;
    border-radius: 100vmax;
    display: block;
  }

  .p-top-mv .feature .title:before {
    rotate: -30deg;
  }

  .p-top-mv .feature .title:after {
    rotate: 30deg;
  }

  .p-top-mv .feature .item {
    gap: calc(8 * var(--spacing));
    text-align: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    display: flex;
  }

  @media (width >= 800px) {
    .p-top-mv .feature .item {
      gap: calc(10 * var(--spacing));
    }
  }

  .p-top-mv .feature .item .illust {
    width: calc(64 * var(--spacing));
    aspect-ratio: 1;
  }

  @media (width >= 800px) {
    .p-top-mv .feature .item .illust {
      width: calc(82 * var(--spacing));
    }
  }

  .p-top-mv .feature .item .text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-snug);
  }

  @media (width >= 800px) {
    .p-top-mv .feature .item .text {
      font-size: calc(13 * var(--spacing));
    }

    .p-top-mv .feature .item + .item {
      margin-top: calc(28 * var(--spacing));
    }
  }

  @keyframes flyngSmaton {
    0% {
      background-position: 0 0;
    }

    50% {
      background-position: 0 -100cqh;
    }

    to {
      background-position: 0 0;
    }
  }

  .p-top-reason-list {
    width: calc(360 * var(--spacing));
    padding-top: calc(16 * var(--spacing));
    counter-reset: reason;
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-reason-list {
      gap: calc(32 * var(--spacing));
      width: calc(1120 * var(--spacing));
      grid-template-columns: repeat(3, 1fr);
      display: grid;
    }
  }

  .p-top-reason-section {
    padding: calc(48 * var(--spacing)) calc(32 * var(--spacing));
    counter-increment: reason;
    background-color: var(--color-white);
    border-radius: calc(20 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-reason-section {
      grid-template-rows: subgrid;
      padding: calc(48 * var(--spacing)) calc(40 * var(--spacing));
      grid-row: span 3;
      grid-template-columns: 100%;
      justify-items: center;
      gap: 0;
      display: grid;
    }
  }

  .p-top-reason-section:before {
    width: calc(56 * var(--spacing));
    height: calc(32 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    text-align: center;
    letter-spacing: .04em;
    content: counter(reason, decimal-leading-zero);
    background-color: var(--color-blue);
    border-radius: 100vmax;
    place-content: center;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    translate: 0 -50%;
  }

  .p-top-reason-section[data-rola-inview] {
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: calc(2 * var(--sumakouza-duration));
    transition-property: opacity, translate;
  }

  .p-top-reason-section[data-rola-inview="false"] {
    opacity: 0;
    translate: 0 10%;
  }

  .p-top-reason-section[data-rola-inview="true"] {
    opacity: 1;
    translate: 0;
  }

  @media (width >= 800px) {
    .p-top-reason-section[data-rola-inview="true"]:nth-of-type(2) {
      transition-delay: calc(1.5 * var(--sumakouza-duration));
    }

    .p-top-reason-section[data-rola-inview="true"]:nth-of-type(3) {
      transition-delay: calc(3 * var(--sumakouza-duration));
    }
  }

  .p-top-reason-section > .title {
    margin-bottom: calc(20 * var(--spacing));
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-reason-section > .title {
      margin-bottom: calc(24 * var(--spacing));
    }
  }

  .p-top-reason-section > .image {
    width: calc(120 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-reason-section > .image {
      width: calc(140 * var(--spacing));
    }
  }

  .p-top-reason-section > .image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-reason-section > .body {
    padding-top: calc(20 * var(--spacing));
    margin-top: calc(20 * var(--spacing));
    background-image: linear-gradient(to right, var(--color-gray) 50%, transparent 50%);
    background-repeat: repeat-x;
    background-position: 0 calc(-1 * var(--spacing));
    background-clip: border-box;
    background-size: calc(6 * var(--spacing)) var(--spacing);
    border-top: var(--spacing) solid transparent;
  }

  @media (width >= 800px) {
    .p-top-reason-section > .body {
      padding-top: calc(32 * var(--spacing));
      margin-top: calc(32 * var(--spacing));
    }
  }

  .p-top-reason-section > .body .lead {
    margin-bottom: calc(20 * var(--spacing));
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-relaxed);
  }

  .p-top-reason-section > .body > * + * {
    margin-top: calc(16 * var(--spacing));
  }

  @media not all and (width >= 800px) {
    .p-top-reason-section + .p-top-reason-section {
      margin-top: calc(40 * var(--spacing));
    }
  }

  .p-top-reason {
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    background-color: var(--color-pale-blue);
    border-radius: 0 calc(140 * var(--spacing)) 0 0;
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-reason {
      width: 100%;
      max-width: 1280px;
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
      border-radius: 0 calc(300 * var(--spacing)) 0 0;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (width >= 1280px) {
    .p-top-reason:before {
      z-index: -1;
      pointer-events: none;
      content: "";
      background-color: var(--color-pale-blue);
      width: calc(50vw - 50%);
      height: 100%;
      position: absolute;
      top: 0;
      right: 100%;
    }
  }

  .p-top-reason > .smaton {
    pointer-events: none;
    position: absolute;
    container-type: size;
  }

  @media not all and (width >= 800px) {
    .p-top-reason > .smaton {
      top: calc(-34 * var(--spacing));
      right: calc(21 * var(--spacing));
      width: calc(90 * var(--spacing));
      height: calc(144 * var(--spacing));
    }
  }

  @media (width >= 800px) {
    .p-top-reason > .smaton {
      top: calc(-53 * var(--spacing));
      width: calc(125 * var(--spacing));
      height: calc(200 * var(--spacing));
      margin-left: calc(412 * var(--spacing));
      left: 50%;
    }
  }

  .p-top-reason > .smaton:before {
    content: "";
    transform-origin: bottom;
    background-image: url("/d-bank/sumakouza/img/reason_smaton-body.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .p-top-reason > .smaton[data-rola-inview="true"]:before {
    animation: 2s step-end infinite bashfulSmaton;
  }

  @keyframes bashfulSmaton {
    0% {
      background-position: 0 0;
    }

    7.5% {
      background-position: 0 -100cqh;
    }

    15% {
      background-position: 0 0;
    }

    22.5% {
      background-position: 0 -100cqh;
    }

    30% {
      background-position: 0 0;
    }

    to {
      background-position: 0 0;
    }
  }

  .p-top-recommend-section {
    background-color: var(--color-white);
    border-radius: calc(20 * var(--spacing));
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-recommend-section {
      grid-template-rows: subgrid;
      grid-row: span 2;
      grid-template-columns: 100%;
      justify-items: center;
      gap: 0;
      display: grid;
    }
  }

  .p-top-recommend-section:before {
    top: calc(-24 * var(--spacing));
    left: calc(24 * var(--spacing));
    z-index: 2;
    width: calc(44 * var(--spacing));
    height: calc(36 * var(--spacing));
    content: "";
    background-color: var(--color-blue);
    place-content: center;
    place-items: center;
    display: grid;
    position: absolute;
    mask-image: url("/d-bank/sumakouza/img/icon_quote.svg");
    mask-position: 0 0;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  @media (width >= 800px) {
    .p-top-recommend-section:before {
      left: calc(20 * var(--spacing));
    }
  }

  .p-top-recommend-section[data-rola-inview] {
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: calc(2 * var(--sumakouza-duration));
    transition-property: opacity, translate;
  }

  .p-top-recommend-section[data-rola-inview="false"] {
    opacity: 0;
    translate: 0 10%;
  }

  .p-top-recommend-section[data-rola-inview="true"] {
    opacity: 1;
    translate: 0;
  }

  @media (width >= 800px) {
    .p-top-recommend-section[data-rola-inview="true"]:nth-of-type(2) {
      transition-delay: calc(1.5 * var(--sumakouza-duration));
    }

    .p-top-recommend-section[data-rola-inview="true"]:nth-of-type(3) {
      transition-delay: calc(3 * var(--sumakouza-duration));
    }
  }

  .p-top-recommend-section > .header {
    width: 100%;
    padding: calc(32 * var(--spacing)) calc(24 * var(--spacing)) calc(24 * var(--spacing));
    background-color: var(--color-pale-gray);
    border-radius: calc(20 * var(--spacing)) calc(20 * var(--spacing)) 0 0;
  }

  @media screen {
    .p-top-recommend-section > .header {
      padding: calc(40 * var(--spacing)) calc(32 * var(--spacing)) calc(32 * var(--spacing));
    }
  }

  .p-top-recommend-section > .header .title {
    margin-bottom: calc(12 * var(--spacing));
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-recommend-section > .header .title {
      margin-bottom: calc(24 * var(--spacing));
    }
  }

  .p-top-recommend-section > .header .image {
    width: calc(120 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-recommend-section > .header .image {
      width: calc(140 * var(--spacing));
    }
  }

  .p-top-recommend-section > .header .image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-recommend-section > .body {
    padding: calc(24 * var(--spacing)) calc(32 * var(--spacing)) calc(32 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-recommend-section > .body {
      padding: calc(32 * var(--spacing)) calc(40 * var(--spacing)) calc(40 * var(--spacing));
    }
  }

  .p-top-recommend-section > .body .lead {
    margin-bottom: calc(16 * var(--spacing));
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-relaxed);
  }

  .p-top-recommend-section > .body .desc {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  .p-top-recommend-section > .body > * + * {
    margin-top: calc(8 * var(--spacing));
  }

  @media not all and (width >= 800px) {
    .p-top-recommend-section + .p-top-recommend-section {
      margin-top: calc(48 * var(--spacing));
    }
  }

  .p-top-recommend {
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(64 * var(--spacing));
    background-color: var(--color-pale-blue);
    position: relative;
  }

  @media (width >= 800px) {
    .p-top-recommend {
      width: 100%;
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(120 * var(--spacing));
    }
  }

  .p-top-recommend-list {
    width: calc(360 * var(--spacing));
    padding-top: calc(24 * var(--spacing));
    margin-left: auto;
    margin-right: auto;
  }

  @media (width >= 800px) {
    .p-top-recommend-list {
      gap: calc(32 * var(--spacing));
      width: calc(1120 * var(--spacing));
      grid-template-columns: repeat(3, 1fr);
      display: grid;
    }
  }

  .p-top-smaton-profile {
    padding: calc(40 * var(--spacing)) calc(24 * var(--spacing));
    background-color: var(--color-white);
    border: calc(2 * var(--spacing)) solid var(--color-text);
    border-radius: calc(20 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-smaton-profile {
      padding: calc(40 * var(--spacing)) calc(40 * var(--spacing)) calc(48 * var(--spacing));
    }
  }

  .p-top-smaton-profile .item {
    row-gap: calc(6 * var(--spacing));
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    flex-wrap: wrap;
    display: flex;
  }

  .p-top-smaton-profile .item dt {
    font-weight: var(--font-weight-bold);
    color: var(--color-blue);
    flex: none;
  }

  .p-top-smaton-profile .item dd {
    font-weight: var(--font-weight-medium);
    flex: none;
  }

  .p-top-smaton-profile .item + .item {
    padding-top: calc(16 * var(--spacing));
    margin-top: calc(16 * var(--spacing));
    background-image: radial-gradient(circle, var(--color-gainsboro) calc(3 / 7 * 70.71%), transparent calc(3 / 7 * 70.71%));
    background-repeat: repeat-x;
    background-position: left calc(-2 * var(--spacing)) top calc(-5 * var(--spacing));
    background-clip: border-box;
    background-size: calc(7 * var(--spacing)) calc(7 * var(--spacing));
    border-top: calc(3 * var(--spacing)) solid transparent;
  }

  .p-top-smaton {
    width: 100%;
    padding-top: calc(64 * var(--spacing));
    padding-bottom: calc(104 * var(--spacing));
    background-color: var(--color-ice-blue);
    background-image: url("/d-bank/sumakouza/img/profile_bg.png");
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: auto calc(84 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-smaton {
      padding-top: calc(120 * var(--spacing));
      padding-bottom: calc(164 * var(--spacing));
      background-size: auto calc(100 * var(--spacing));
    }

    .p-top-smaton > .inner {
      column-gap: calc(132 * var(--spacing));
      width: calc(960 * var(--spacing));
      justify-content: start;
      align-items: start;
      margin-left: auto;
      margin-right: auto;
      display: flex;
    }
  }

  @media screen {
    .p-top-smaton > .inner .portrait {
      width: calc(396 * var(--spacing));
      flex: none;
    }
  }

  .p-top-smaton > .inner .portrait .heading {
    margin-bottom: calc(24 * var(--spacing));
  }

  @media (width >= 800px) {
    .p-top-smaton > .inner .portrait .heading {
      margin-bottom: calc(40 * var(--spacing));
    }
  }

  .p-top-smaton > .inner .portrait .heading .sub {
    margin-bottom: calc(12 * var(--spacing));
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  @media (width >= 800px) {
    .p-top-smaton > .inner .portrait .heading .sub {
      font-size: var(--text-lg);
    }
  }

  .p-top-smaton > .inner .portrait .heading .main {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .p-top-smaton > .inner .portrait .heading .main img {
    width: auto;
    height: calc(48 * var(--spacing));
    display: block;
  }

  @media (width >= 800px) {
    .p-top-smaton > .inner .portrait .heading .main img {
      height: calc(55 * var(--spacing));
    }
  }

  .p-top-smaton > .inner .portrait .image {
    position: relative;
  }

  @media not all and (width >= 800px) {
    .p-top-smaton > .inner .portrait .image {
      width: calc(226 * var(--spacing));
      margin-right: auto;
      margin-bottom: calc(40 * var(--spacing));
      margin-left: auto;
    }
  }

  .p-top-smaton > .inner .portrait .image .body {
    width: 100%;
    height: auto;
    display: block;
  }

  .p-top-smaton > .inner .portrait .image .balloon {
    width: calc(68 * var(--spacing));
    transform-origin: 100% 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (width >= 800px) {
    .p-top-smaton > .inner .portrait .image .balloon {
      width: calc(120 * var(--spacing));
    }
  }

  .p-top-smaton > .inner .portrait .image[data-rola-inview] {
    transition-timing-function: var(--sumakouza-easing);
    transition-duration: calc(2 * var(--sumakouza-duration));
    transition-property: opacity, translate;
  }

  .p-top-smaton > .inner .portrait .image[data-rola-inview="false"] {
    opacity: 0;
    translate: 0 10%;
  }

  .p-top-smaton > .inner .portrait .image[data-rola-inview="true"] {
    opacity: 1;
    translate: 0;
  }

  @media not all and (width >= 800px) {
    .p-top-smaton > .inner .detail {
      width: calc(360 * var(--spacing));
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (width >= 800px) {
    .p-top-smaton > .inner .detail {
      width: calc(398 * var(--spacing));
    }
  }

  .p-top-smaton > .inner .detail .title {
    margin-bottom: calc(8 * var(--spacing));
    font-family: var(--font-en);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-blue);
    text-align: center;
    text-transform: uppercase;
  }

  @media (width >= 800px) {
    .p-top-smaton > .inner .detail .title {
      margin-bottom: calc(10 * var(--spacing));
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }

    *, :before, :after {
      scroll-behavior: auto;
      transition-duration: .01ms;
      animation-duration: .01ms;
      animation-iteration-count: 1;
    }
  }

  .preload * {
    transition: none;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }

  .skip-to-content {
    position: absolute;
  }

  .skip-to-content:not(:focus) {
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
  }

  .skip-to-content:focus {
    z-index: calc(var(--z-header, 10) + 1);
    color: var(--color-black, black);
    background-color: var(--color-link, LinkText);
    padding: 1rem;
    font-size: .75rem;
    line-height: 1.5;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .ml-auto {
    margin-left: auto;
  }

  .block {
    display: block;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .table {
    display: table;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-1\/5 {
    width: 20%;
  }

  .w-2\/5 {
    width: 40%;
  }

  .w-104 {
    width: calc(var(--spacing) * 104);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .text-sm {
    font-size: var(--text-sm);
  }

  .text-xs {
    font-size: var(--text-xs);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .text-deep-blue {
    color: var(--color-deep-blue);
  }

  .text-white {
    color: var(--color-white);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  @media (width >= 50rem) {
    .md\:hidden {
      display: none;
    }

    .md\:inline {
      display: inline;
    }

    .md\:w-230 {
      width: calc(var(--spacing) * 230);
    }
  }
}

:root {
  --sumakouza-easing: var(--ease-out-quad);
  --sumakouza-duration: .3s;
  --spacing-source: calc(1 / 400 * 100vw);
  --text-xxs-source: calc(10 / 400 * 100vw);
  --text-xs-source: calc(12 / 400 * 100vw);
  --text-sm-source: calc(14 / 400 * 100vw);
  --text-base-source: calc(16/ 400 * 100vw);
  --text-lg-source: calc(18/ 400 * 100vw);
  --text-xl-source: calc(20/ 400 * 100vw);
  --text-2xl-source: calc(25/ 400 * 100vw);
  --text-3xl-source: calc(30/ 400 * 100vw);
  --text-4xl-source: calc(36/ 400 * 100vw);
  --text-5xl-source: calc(48/ 400 * 100vw);
  --text-6xl-source: calc(60/ 400 * 100vw);
  --text-7xl-source: calc(72/ 400 * 100vw);
  --text-8xl-source: calc(96/ 400 * 100vw);
  --text-9xl-source: calc(128/ 400 * 100vw);
}

@media (width >= 800px) {
  :root {
    --spacing-source: min(1 / 1280 * 100vw, 1px);
    --text-xxs-source: min(10 / 1280 * 100vw, 10px);
    --text-xs-source: min(12 / 1280 * 100vw, 12px);
    --text-sm-source: min(14 / 1280 * 100vw, 14px);
    --text-base-source: min(16 / 1280 * 100vw, 16px);
    --text-lg-source: min(18 / 1280 * 100vw, 18px);
    --text-xl-source: min(20 / 1280 * 100vw, 20px);
    --text-2xl-source: min(24 / 1280 * 100vw, 24px);
    --text-3xl-source: min(30 / 1280 * 100vw, 30px);
    --text-4xl-source: min(36 / 1280 * 100vw, 36px);
    --text-5xl-source: min(48 / 1280 * 100vw, 48px);
    --text-6xl-source: min(60 / 1280 * 100vw, 60px);
    --text-7xl-source: min(72 / 1280 * 100vw, 72px);
    --text-8xl-source: min(96 / 1280 * 100vw, 96px);
    --text-9xl-source: min(128 / 1280 * 100vw, 128px);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}