@charset "UTF-8";.c-icon {

  --icon-bg: var(--color-primary);

  --icon-color: var(--color-white);

  --icon-hover-color: var(--color-primary);

  --icon-hover-bg: var(--color-primary);

  --icon-bg-border-width: 0.125rem;

  position: relative;

  display: grid;

  align-content: center;

  justify-content: center;

  align-content: center;

  justify-content: center;

  place-content: center;

  aspect-ratio: 1;

  overflow: clip;

  border-radius: 50%;

  transition: background-color 0.3s ease;

  container-type: inline-size;

}

.c-icon::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  aspect-ratio: 1;

  margin: auto;

  content: "";

  border-color: var(--icon-bg);

  border-style: solid;

  border-width: 50cqi;

  border-radius: 50%;

  transition: border-width 0.4s ease, border-color 0.3s ease;

}

@media (any-hover: hover) {

  .c-icon:is(a:hover .c-icon, button:hover .c-icon) {

    --icon-color: var(--icon-hover-color);

    --icon-bg: var(--icon-hover-bg);

    border: none;

  }

  .c-icon:is(a:hover .c-icon, button:hover .c-icon)::before {

    border-width: var(--icon-bg-border-width);

  }

}

.c-icon .vector {

  position: relative;

  display: grid;

  grid-template-areas: "icon";

  width: var(--icon-width);

  overflow: clip;

  color: var(--icon-color);

}

.c-icon .vector svg {

  grid-area: icon;

  width: var(--icon-width);

}

.c-icon[data-icon=arrow-primary] {

  --icon-width: calc(18 / 48 * 100cqi);

}

.c-icon[data-icon=arrow-primary] .vector svg {

  transition: translate 0.3s ease;

}

.c-icon[data-icon=arrow-primary] .vector svg:first-of-type {

  translate: -100% 0;

}

@media (any-hover: hover) {

  .c-icon[data-icon=arrow-primary]:is(a:hover .c-icon, button:hover .c-icon) .vector svg:first-of-type {

    translate: 0 0;

  }

  .c-icon[data-icon=arrow-primary]:is(a:hover .c-icon, button:hover .c-icon) .vector svg:last-of-type {

    translate: 100% 0;

  }

}

.c-icon[data-icon=arrow-secondary] {

  --icon-width: calc(7 / 20 * 100cqi);

}

.c-icon[data-icon=blank] {

  --icon-width: calc(13 / 40 * 100cqi);

}

.c-icon[data-color=white] {

  --icon-bg: var(--color-white);

  --icon-color: var(--color-primary);

  --icon-hover-color: var(--color-white);

  --icon-hover-bg: var(--color-white);

}

.c-icon[data-color=black] {

  --icon-bg: var(--color-text);

  --icon-color: var(--color-white);

  --icon-hover-color: var(--color-text);

  --icon-hover-bg: var(--color-text);

}

.c-icon[data-color=gray] {

  --icon-bg: var(--color-border-white);

  --icon-color: var(--color-text);

  --icon-hover-color: var(--color-text);

  --icon-hover-bg: var(--color-border-white);

}

.c-icon[data-color=orange] {

  --icon-bg: var(--color-secondary);

  --icon-color: var(--color-white);

  --icon-hover-color: var(--color-secondary);

  --icon-hover-bg: var(--color-secondary);

}

.c-icon[data-color=border-blue] {

  --icon-bg: var(--color-white);

  --icon-color: var(--color-primary);

  --icon-hover-color: var(--color-primary);

  --icon-hover-bg: var(--color-primary);

  border: 0.125rem solid var(--color-primary);

}

.c-icon[data-size=xs] {

  --icon-bg-border-width: 0.0625rem;

}

.c-icon[data-size=xs][data-icon=arrow] {

  --icon-width: 0.6875rem;

}
.l-header {

  position: relative;

  top: 0;

  z-index: var(--z-header);
	
z-index: 9999999;
  transition: translate 0.3s ease-out;

}

.l-header.is-hidden {

  translate: 0 -100%;

}

.l-header .container {

  background-color: var(--color-white);

}

.l-header .inner {

  display: grid;

  grid-template-columns: auto 1fr;

  align-items: center;

  padding: 1.25rem 1.25rem 1.5rem;

}

@media screen and (min-width: 768px) {

  .l-header .inner {

    padding: 0.875rem min(3.125vw, 2.5rem) 0.875rem min(3.4375vw, 2.75rem);

    max-width: 1440px;

    margin: 0 auto;

	}

}

.l-header .logo {

  width: 11.25rem;

}

@media screen and (min-width: 768px) {

  .l-header .logo {

    width: 25rem;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav {

    position: fixed;

    top: var(--header-height);

    left: 0;

    z-index: 1;

    display: grid;

    grid-template-areas: "item";

    width: 100%;

    height: calc(100% - var(--header-height));

    padding: 1rem;

    overflow-x: clip;

    overflow-y: auto;

    overflow-x: clip;

    overflow-y: auto;

    overflow: clip auto;

    overscroll-behavior: contain;

    background-color: var(--color-blue);

  }

}

.l-header .nav.is-transition-enter {

  transition: visibility 0.8s ease, opacity 0.2s ease;

}

.l-header .nav.is-transition-leave {

  transition: opacity 0.3s ease;

}

@media screen and (max-width: 1023px) {

  .l-header .nav.is-hidden {

    opacity: 0;

  }

  .l-header .nav.is-hidden :where(.item) {

    opacity: 0;

    translate: -10px 0;

  }

  .l-header .nav.is-hidden :where(.entry) {

    opacity: 0;

    translate: -10px 0;

  }

  .l-header .nav.is-hidden :where(.lower) {

    opacity: 0;

    translate: -10px 0;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav.is-show {

    opacity: 1;

  }

  .l-header .nav.is-show :where(.item) {

    opacity: 1;

    translate: 0 0;

  }

  .l-header .nav.is-show :where(.entry) {

    opacity: 1;

    translate: 0 0;

  }

  .l-header .nav.is-show :where(.lower) {

    opacity: 1;

    translate: 0 0;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav::before {

    grid-area: item;

    width: 100%;

    min-height: calc(100% + 1px);

    pointer-events: none;

    content: "";

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .nav-container {

    grid-area: item;

    height: 100%;

    padding: 3rem 1.25rem 3.5rem;

    background-color: var(--color-white);

    border-radius: 0.625rem;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .nav-container {

    display: grid;

    grid-template-columns: 1fr max-content;

    align-items: center;

    justify-self: flex-end;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .list {

    display: flex;

    flex-wrap: wrap;

    gap: 13.5rem min(2.875vw, 13.5rem);

    justify-self: flex-end;

  }

}

.l-header .nav .item {

  position: relative;

}

@media screen and (max-width: 1023px) {

  .l-header .nav .item {

    padding-top: 1.25rem;

    padding-bottom: 1.25rem;

    border-bottom: 0.0625rem solid var(--color-bg-gray2);

    transition: opacity 0.4s ease, translate 0.4s ease;

  }

}

.l-header .nav .item:focus-visible .parent-link,

.l-header .nav .item:focus-visible .parent-button {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .l-header .nav .item:hover .parent-link,

  .l-header .nav .item:hover .parent-button {

    color: var(--color-primary);

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .item:first-of-type {

    padding-top: 0;

  }

}

.l-header .nav .item:nth-of-type(2) {

  transition-delay: calc(1 * 0.06s);

}

.l-header .nav .item:nth-of-type(3) {

  transition-delay: calc(2 * 0.06s);

}

.l-header .nav .item:nth-of-type(4) {

  transition-delay: calc(3 * 0.06s);

}

.l-header .nav .item:nth-of-type(5) {

  transition-delay: calc(4 * 0.06s);

}

.l-header .nav .item:nth-of-type(6) {

  transition-delay: calc(5 * 0.06s);

}

.l-header .nav .item:nth-of-type(7) {

  transition-delay: calc(6 * 0.06s);

}

.l-header .nav .item:nth-of-type(8) {

  transition-delay: calc(7 * 0.06s);

}

.l-header .nav .parent {

  display: grid;

}

@media screen and (max-width: 1023px) {

  .l-header .nav .parent.has-link-child {

    grid-template-columns: auto 1fr;

  }

}

.l-header .nav .parent-link,

.l-header .nav .parent-button {

  position: relative;

  z-index: 1;

  display: grid;

  font-weight: 500;

  color: var(--color-text);

  letter-spacing: 0.05em;

  transition: color 0.3s ease;

}

@media screen and (max-width: 1023px) {

  .l-header .nav .parent-link,

  .l-header .nav .parent-button {

    font-size: 1.125rem;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .parent-link,

  .l-header .nav .parent-button {

    font-size: 0.875rem;

  }

}

.l-header .nav .parent-link[aria-current],

.l-header .nav .parent-button[aria-current] {

  color: var(--color-primary);

}

@media screen and (max-width: 1023px) {

  .l-header .nav .parent-link {

    grid-template-columns: 1fr 2rem;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .parent-link:is(.parent.has-link-child .parent-link) {

    grid-template-columns: 1fr;

  }

}

.l-header .nav .parent-link:is(.item[data-open] .parent-link) {

  color: var(--color-primary);

}

@media screen and (min-width: 1024px) {

  .l-header .nav .parent-link[data-link=top] {

    display: none;

  }

}

.l-header .nav .parent-link[data-link=top][aria-current=true] {

  color: var(--color-text);

}

@media screen and (min-width: 1024px) {

  .l-header .nav .parent-link-icon {

    display: none;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .parent-link-button {

    justify-self: flex-end;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .parent-link-button {

    display: none;

  }

}

.l-header .nav .parent-button {

  grid-template-columns: 1fr max-content;

  align-items: center;

  width: 100%;

  text-align: left;

}

@media screen and (min-width: 1024px) {

  .l-header .nav .parent-button {

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    cursor: auto;

  }

}

.l-header .nav .parent-button:is(.item[data-open] .parent-button) {

  color: var(--color-primary);

}

.l-header .nav .toggle-icon {

  position: relative;

}

@media screen and (max-width: 1023px) {

  .l-header .nav .toggle-icon {

    display: grid;

    width: 2rem;

    aspect-ratio: 1;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .toggle-icon {

    width: 0.6875rem;

    height: 0.5rem;

    background-color: currentcolor;

    -webkit-mask-image: url("../img/common/icon_arrow-secondary.svg");

            mask-image: url("../img/common/icon_arrow-secondary.svg");

    -webkit-mask-repeat: no-repeat;

            mask-repeat: no-repeat;

    -webkit-mask-position: center;

            mask-position: center;

    -webkit-mask-size: contain;

            mask-size: contain;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .toggle-icon::before {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    aspect-ratio: 1;

    content: "";

    border-color: var(--color-border-white);

    border-style: solid;

    border-width: 1rem;

    border-radius: 50%;

    transition: border-width 0.4s ease, border-color 0.3s ease;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .toggle-icon > span {

    position: relative;

    display: grid;

    grid-template-areas: "line";

    align-items: center;

    justify-items: center;

    align-items: center;

    justify-items: center;

    place-items: center;

    color: var(--color-text);

    transition: color 0.3s ease;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .toggle-icon > span::before, .l-header .nav .toggle-icon > span::after {

    grid-area: line;

    width: 0.625rem;

    height: 0.125rem;

    content: "";

    background-color: currentcolor;

    border-radius: 100vmax;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .toggle-icon > span::before {

    transition: rotate 0.3s ease;

    rotate: 90deg;

  }

}

.l-header .nav .toggle-icon:is(.item[data-open] .toggle-icon)::before {

  border-color: var(--color-primary);

}

.l-header .nav .toggle-icon:is(.item[data-open] .toggle-icon) > span {

  color: var(--color-white);

}

@media screen and (max-width: 1023px) {

  .l-header .nav .toggle-icon:is(.item[data-open] .toggle-icon) > span::before {

    rotate: 180deg;

  }

}

@media screen and (max-width: 1023px) {

  .l-header .nav .child {

    overflow: clip;

    transition: height 0.3s ease;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child {

    position: absolute;

    top: 0;

    left: -2rem;

    padding-top: 4.6875rem;

    opacity: 0;

    transition: opacity 0.3s ease;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child[data-open] {

    opacity: 1;

  }

}

.l-header .nav .child .child-list {

  display: grid;

}

@media screen and (max-width: 1023px) {

  .l-header .nav .child .child-list {

    row-gap: 0.75rem;

    padding-top: 1rem;

    padding-bottom: 0.5rem;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child .child-list {

    width: -moz-max-content;

    width: max-content;

    padding: 0.25rem 1.25rem;

    background-color: var(--color-white);

    border-radius: 0.5rem;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child .child-item {

    padding: 1rem 0.75rem;

    border-bottom: 0.0625rem solid var(--color-bg-gray2);

  }

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child .child-item:last-of-type {

    border-bottom: none;

  }

}

.l-header .nav .child .child-link {

  display: grid;

  font-size: 1rem;

  font-weight: 500;

  color: var(--color-text);

  letter-spacing: 0.02em;

  transition: color 0.3s ease;

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child .child-link {

    grid-template-columns: 1fr 2rem;

    -moz-column-gap: 2rem;

         column-gap: 2rem;

    align-items: center;

    font-size: 0.875rem;

    letter-spacing: 0;

  }

}

.l-header .nav .child .child-link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .l-header .nav .child .child-link:hover {

    color: var(--color-primary);

  }

}

.l-header .nav .child .child-link[aria-current=page], .l-header .nav .child .child-link[aria-current=true] {

  color: var(--color-primary);

}

.l-header .nav .child .child-icon {

  display: none;

}

@media screen and (min-width: 1024px) {

  .l-header .nav .child .child-icon {

    display: grid;

  }

}

.l-header .entry {

  position: relative;

  display: grid;

  align-content: center;

  justify-content: center;

  align-content: center;

  justify-content: center;

  place-content: center;

  font-family: var(--font-poppins);

  font-weight: 600;

  color: var(--color-white);

  letter-spacing: 0.04em;

  background-color: var(--color-primary);

  border: 0.125rem solid var(--color-primary);

  border-radius: 100vmax;

  transition: color 0.3s ease, opacity 0.3s ease 0.2s, translate 0.4s ease 0.2s;

}

@media screen and (max-width: 1023px) {

  .l-header .entry {

    padding: 0.875rem 1.5rem 1rem;

    margin-top: 2.5rem;

    font-size: 1.125rem;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .entry {

    padding: 0.4375rem 2.625rem 0.5rem;

    margin-left: min(2.5vw, 2rem);

    font-size: 0.9375rem;

  }

}

.l-header .entry:focus-visible {

  color: var(--color-primary);

}

.l-header .entry:focus-visible::before {

  scale: 1;

}

@media (any-hover: hover) {

  .l-header .entry:hover {

    color: var(--color-primary);

  }

  .l-header .entry:hover::before {

    scale: 1;

  }

}

.l-header .entry::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: auto;

  content: "";

  background-color: var(--color-white);

  border-radius: 100vmax;

  transition: scale 0.3s ease;

  scale: 0;

}

.l-header .entry .entry-inner {

  position: relative;

  z-index: 1;

}

.l-header .toggle {

  --toggle-size: 2.5rem;

  --line-color: var(--color-white);

  position: relative;

  justify-self: flex-end;

  width: 2.5rem;

  width: var(--toggle-size);

  aspect-ratio: 1;

  border-radius: 50%;

}

@media screen and (min-width: 768px) {

  .l-header .toggle {

    --toggle-size: 3rem;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .toggle {

    display: none;

  }

}

.l-header .toggle:focus-visible {

  --line-color: var(--color-primary);

}

.l-header .toggle:focus-visible::before {

  border-width: 0.125rem;

}

@media (any-hover: hover) {

  .l-header .toggle:hover {

    --line-color: var(--color-primary);

  }

  .l-header .toggle:hover::before {

    border-width: 0.125rem;

  }

}

.l-header .toggle::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  aspect-ratio: 1;

  margin: auto;

  content: "";

  border-color: var(--color-primary);

  border-style: solid;

  border-width: calc(var(--toggle-size) / 2);

  border-radius: 50%;

  transition: border-width 0.4s ease, border-color 0.3s ease;

}

.l-header .toggle .toggle-inner {

  position: relative;

  display: grid;

  grid-template-areas: "line";

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

}

.l-header .toggle .toggle-inner::before, .l-header .toggle .toggle-inner::after {

  grid-area: line;

  width: 0.75rem;

  height: 0.125rem;

  content: "";

  background-color: var(--line-color);

  border-radius: 100vmax;

  transition: background-color 0.3s ease, rotate 0.3s ease;

}

@media screen and (min-width: 768px) {

  .l-header .toggle .toggle-inner::before, .l-header .toggle .toggle-inner::after {

    width: 0.875rem;

  }

}

.l-header .toggle .toggle-inner::before {

  translate: 0 -0.1875rem;

}

.l-header .toggle .toggle-inner::after {

  translate: 0 0.1875rem;

}

.l-header .toggle[aria-expanded=true] .toggle-inner::before {

  rotate: 45deg;

  translate: 0 0;

}

.l-header .toggle[aria-expanded=true] .toggle-inner::after {

  rotate: -45deg;

  translate: 0 0;

}

@media screen and (max-width: 1023px) {

  .l-header .lower {

    margin-top: 3rem;

    transition: opacity 0.3s ease, translate 0.4s ease;

    transition-delay: 0.3s;

  }

}

@media screen and (min-width: 1024px) {

  .l-header .lower {

    display: none;

  }

}

.l-header .other {

  display: grid;

  grid-row-gap: 0.5rem;

  row-gap: 0.5rem;

  margin-top: 1.5rem;

}

.l-header .other .other-link {

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.7;

  color: var(--color-text);

  letter-spacing: 0.06em;

  transition: color 0.3s ease;

}

.l-header .other .other-link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .l-header .other .other-link:hover {

    color: var(--color-primary);

  }

}

.l-header .other .other-link > .text {

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.03125rem;

}.c-button-basic {

  display: grid;

  grid-template-columns: auto 2.5rem;

  grid-column-gap: 1.25rem;

  -moz-column-gap: 1.25rem;

       column-gap: 1.25rem;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  font-size: 1rem;

  font-weight: 700;

  color: var(--color-text);

  letter-spacing: 0.02em;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-button-basic {

    grid-template-columns: auto 2.75rem;

    -moz-column-gap: 1.25rem;

         column-gap: 1.25rem;

    font-size: 1.125rem;

  }

}

.c-button-basic:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .c-button-basic:hover {

    color: var(--color-primary);

  }

}

.c-button-basic[data-color=white] {

  color: var(--color-white);

}

.c-button-basic[data-color=white]:focus-visible {

  color: var(--color-white);

}

@media (any-hover: hover) {

  .c-button-basic[data-color=white]:hover {

    color: var(--color-white);

  }

}

.c-button-basic[data-color=black]:focus-visible {

  color: var(--color-text);

}

@media (any-hover: hover) {

  .c-button-basic[data-color=black]:hover {

    color: var(--color-text);

  }

}

.c-button-basic[data-color=gray]:focus-visible {

  color: var(--color-text);

}

@media (any-hover: hover) {

  .c-button-basic[data-color=gray]:hover {

    color: var(--color-text);

  }

}

.c-button-basic[data-color=orange]:focus-visible {

  color: var(--color-secondary);

}

@media (any-hover: hover) {

  .c-button-basic[data-color=orange]:hover {

    color: var(--color-secondary);

  }

}.l-footer .inner {

  padding: 3.5rem 1.5rem 1.375rem;

}

@media screen and (min-width: 768px) {

  .l-footer .inner {

    max-width: calc(var(--screen-xl) * 0.0625rem);

    padding: 4.5rem min(6.25vw, 5rem) 1.625rem;

    margin-right: auto;

    margin-left: auto;

  }

}

.l-footer .upper {

  display: grid;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper {

    grid-template-columns: auto 1fr;

  }

}

.l-footer .upper .upper-sub {

  display: contents;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .upper-sub {

    display: block;

  }

}

.l-footer .upper .upper-main {

  margin-top: 2.5rem;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .upper-main {

    justify-self: flex-end;

    margin-top: 0;

  }

}

.l-footer .upper .logo {

  display: block;

  width: 13.6875rem;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .logo {

    width: 13.1875rem;

  }

}

.l-footer .upper .entry {

  position: relative;

  display: grid;

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

  order: 9998;

  width: 100%;

  padding: 1.125rem 1.25rem;

  margin-top: 3rem;

  font-family: var(--font-poppins);

  font-size: 1.125rem;

  font-weight: 600;

  line-height: 1.3;

  color: var(--color-white);

  letter-spacing: 0.04em;

  background-color: var(--color-primary);

  border: 0.125rem solid var(--color-primary);

  border-radius: 100vmax;

  transition: color 0.3s ease;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .entry {

    order: initial;

    width: -moz-fit-content;

    width: fit-content;

    padding: 0.5rem 3rem;

    margin-top: 2.5rem;

    font-size: 0.9375rem;

  }

}

.l-footer .upper .entry:focus-visible {

  color: var(--color-primary);

}

.l-footer .upper .entry:focus-visible::before {

  scale: 1;

}

@media (any-hover: hover) {

  .l-footer .upper .entry:hover {

    color: var(--color-primary);

  }

  .l-footer .upper .entry:hover::before {

    scale: 1;

  }

}

.l-footer .upper .entry::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: auto;

  content: "";

  background-color: var(--color-white);

  border-radius: 100vmax;

  transition: scale 0.3s ease;

  scale: 0;

}

.l-footer .upper .entry .entry-inner {

  position: relative;

  z-index: 1;

}

.l-footer .upper .other {

  display: grid;

  grid-gap: 1rem;

  gap: 1rem;

  order: 9999;

  margin-top: 2rem;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .l-footer .upper .other {

    grid-template-columns: repeat(2, auto);

    gap: 2rem;

    width: -moz-fit-content;

    width: fit-content;

    margin-right: auto;

    margin-left: auto;

    text-align: left;

  }

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .other {

    grid-template-columns: 1fr;

    gap: 0.75rem;

    order: initial;

    margin-top: 2.5rem;

    margin-right: 0;

    margin-left: 0;

  }

}

.l-footer .upper .other .other-link {

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.7;

  color: var(--color-text);

  letter-spacing: 0.06em;

  transition: opacity 0.3s ease;

}

.l-footer .upper .other .other-link:focus-visible {

  opacity: 0.7;

}

@media (any-hover: hover) {

  .l-footer .upper .other .other-link:hover {

    opacity: 0.7;

  }

}

.l-footer .upper .other .other-link > svg {

  display: inline-block;

  width: 0.625rem;

  margin-left: 0.25rem;

  vertical-align: 1%;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .other .other-link > svg {

    margin-left: 0.25rem;

  }

}

.l-footer .upper .other .other-link > span {

  -webkit-text-decoration: underline;

  -webkit-text-decoration: underline;

  text-decoration: underline;

  text-decoration-thickness: 0.5px;

  text-underline-offset: 2px;

}

.l-footer .upper .gnav .gnav-list {

  display: grid;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-list {

    grid-template-areas: "first second fourth" "first third fourth";

    gap: 0 min(6.25vw, 5rem);

  }

}

.l-footer .upper .gnav .gnav-item {

  padding-top: 1.25rem;

  padding-bottom: 1.25rem;

  border-top: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-item {

    padding-top: 0;

    padding-bottom: 0;

    border-top: none;

  }

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-item:first-of-type {

    grid-area: first;

  }

}

.l-footer .upper .gnav .gnav-item:last-of-type {

  border-bottom: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-item:last-of-type {

    border-bottom: none;

  }

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-item:nth-of-type(2) {

    grid-area: second;

  }

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-item:nth-of-type(3) {

    grid-area: third;

  }

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-item:nth-of-type(4) {

    grid-area: fourth;

  }

}

.l-footer .upper .gnav .gnav-parent {

  display: grid;

  grid-template-columns: 1fr 2rem;

  align-items: center;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-parent {

    display: block;

  }

}

@media screen and (max-width: 1023px) {

  .l-footer .upper .gnav .gnav-parent:focus-visible .gnav-parent-button,

  .l-footer .upper .gnav .gnav-parent:focus-visible .gnav-parent-toggle {

    --icon-color: var(--color-primary);

  }

  .l-footer .upper .gnav .gnav-parent:focus-visible .gnav-parent-button::before,

  .l-footer .upper .gnav .gnav-parent:focus-visible .gnav-parent-toggle::before {

    border-color: var(--color-primary);

    border-width: 0.0625rem;

  }

}

@media screen and (max-width: 1023px) and (any-hover: hover) {

  .l-footer .upper .gnav .gnav-parent:hover .gnav-parent-button,

  .l-footer .upper .gnav .gnav-parent:hover .gnav-parent-toggle {

    --icon-color: var(--color-primary);

  }

  .l-footer .upper .gnav .gnav-parent:hover .gnav-parent-button::before,

  .l-footer .upper .gnav .gnav-parent:hover .gnav-parent-toggle::before {

    border-color: var(--color-primary);

    border-width: 0.0625rem;

  }

}

@media screen and (max-width: 1023px) {

  .l-footer .upper .gnav .gnav-parent:has(.gnav-parent-toggle) {

    cursor: pointer;

  }

  .l-footer .upper .gnav .gnav-parent:has(.gnav-parent-toggle) :where(.gnav-parent-link) {

    width: -moz-fit-content;

    width: fit-content;

  }

  .l-footer .upper .gnav .gnav-parent:has(.gnav-parent-toggle[aria-expanded=true]) :where(.gnav-parent-link) {

    color: var(--color-primary);

  }

}

.l-footer .upper .gnav .gnav-parent-link {

  font-size: 1.125rem;

  font-weight: 500;

  color: var(--color-text);

  letter-spacing: 0.02em;

  transition: color 0.3s ease;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-parent-link {

    font-size: 1.0625rem;

  }

}

.l-footer .upper .gnav .gnav-parent-link[href]:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .l-footer .upper .gnav .gnav-parent-link[href]:hover {

    color: var(--color-primary);

  }

}

.l-footer .upper .gnav .gnav-parent-link[aria-current=page] {

  color: var(--color-primary);

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-parent-button {

    display: none;

  }

}

.l-footer .upper .gnav .gnav-parent-toggle {

  --icon-color: var(--color-text);

  position: relative;

  width: 100%;

  aspect-ratio: 1;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-parent-toggle {

    display: none;

  }

}

.l-footer .upper .gnav .gnav-parent-toggle::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  aspect-ratio: 1;

  margin: auto;

  content: "";

  border-color: var(--color-border-white);

  border-style: solid;

  border-width: 1rem;

  border-radius: 50%;

  transition: border-width 0.4s ease, border-color 0.3s ease;

}

.l-footer .upper .gnav .gnav-parent-toggle > span {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-areas: "line";

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

}

.l-footer .upper .gnav .gnav-parent-toggle > span::before, .l-footer .upper .gnav .gnav-parent-toggle > span::after {

  grid-area: line;

  width: 0.625rem;

  height: 0.125rem;

  content: "";

  background-color: var(--icon-color);

  border-radius: 100vmax;

  transition: background-color 0.3s ease;

}

.l-footer .upper .gnav .gnav-parent-toggle > span::before {

  transition: rotate 0.3s ease;

  rotate: 90deg;

}

.l-footer .upper .gnav .gnav-parent-toggle[aria-expanded=true] {

  --icon-color: var(--color-white);

}

.l-footer .upper .gnav .gnav-parent-toggle[aria-expanded=true]::before {

  border-color: var(--color-primary);

  border-width: 1rem;

}

.l-footer .upper .gnav .gnav-parent-toggle[aria-expanded=true] > span::before {

  rotate: 180deg;

}

.l-footer .upper .gnav .gnav-child {

  overflow: clip;

  transition: height 0.3s ease;

}

.l-footer .upper .gnav .gnav-child-list {

  display: grid;

  grid-row-gap: 0.75rem;

  row-gap: 0.75rem;

  padding-top: 1rem;

  padding-bottom: 1rem;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-child-list {

    padding-bottom: 0;

  }

}

.l-footer .upper .gnav .gnav-child-link {

  font-size: 1rem;

  font-weight: 500;

  color: var(--color-text);

  letter-spacing: 0.02em;

  transition: color 0.3s ease;

}

@media screen and (min-width: 1024px) {

  .l-footer .upper .gnav .gnav-child-link {

    font-size: 0.875rem;

    font-weight: 400;

  }

}

.l-footer .upper .gnav .gnav-child-link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .l-footer .upper .gnav .gnav-child-link:hover {

    color: var(--color-primary);

  }

}

.l-footer .upper .gnav .gnav-child-link[aria-current=page], .l-footer .upper .gnav .gnav-child-link[aria-current=true] {

  color: var(--color-primary);

}

.l-footer .lower {

  display: grid;

  grid-template-columns: 1fr auto;

  grid-column-gap: 3.5rem;

  -moz-column-gap: 3.5rem;

       column-gap: 3.5rem;

  align-items: center;

  padding-top: 1.25rem;

  margin-top: 4rem;

  border-top: 0.0625rem solid var(--color-border-gray);

}

@media screen and (min-width: 1024px) {

  .l-footer .lower {

    padding-top: 1.625rem;

    margin-top: 7.5rem;

  }

}

.l-footer .lower .copyright {

  font-family: var(--font-poppins);

  font-size: 0.625rem;

  color: var(--color-text-gray);

  letter-spacing: 0.06em;

}

.l-footer .lower .pagetop {

  grid-template-columns: auto 1.125rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  font-family: var(--font-poppins);

  font-size: 0.625rem;

  font-weight: 600;

  letter-spacing: 0.04em;

}

@media screen and (min-width: 768px) {

  .l-footer .lower .pagetop {

    grid-template-columns: auto 1.25rem;

    font-size: 0.8125rem;

  }

}

.l-footer .lower .pagetop .c-icon {

  rotate: -90deg;

}.c-sec-heading {

  font-weight: 500;

}

.c-sec-heading > .inner {

  display: grid;

  width: -moz-fit-content;

  width: fit-content;

  height: -moz-fit-content;

  height: fit-content;

  color: var(--color-text);

}

.c-sec-heading > .inner[href] {

  grid-template-columns: 1fr max-content;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

}

@media screen and (min-width: 768px) {

  .c-sec-heading > .inner[href] {

    -moz-column-gap: 0.75rem;

         column-gap: 0.75rem;

  }

}

.c-sec-heading > .inner[href] .ja {

  grid-row-start: 2;

  grid-column-start: 1;

  font-size: 1.75rem;

}

@media screen and (min-width: 768px) {

  .c-sec-heading > .inner[href] .ja {

    font-size: 2.625rem;

  }

}

.c-sec-heading .icon {

  position: relative;

  top: 0.0625rem;

  grid-row-start: 2;

  grid-column-start: 2;

  align-self: center;

  width: 2rem;

}

@media screen and (min-width: 768px) {

  .c-sec-heading .icon {

    top: 0.25rem;

    width: 2.5rem;

  }

}

.c-sec-heading[data-align=center] {

  text-align: center;

}

.c-sec-heading[data-align=center] > .inner {

  margin-right: auto;

  margin-left: auto;

}

.c-sec-heading[data-color=white] .en[class],

.c-sec-heading[data-color=white] .ja[class] {

  color: var(--color-white);

}

.c-sec-heading[data-layer=top] > .inner {

  row-gap: 0.125rem;

}

.c-sec-heading[data-layer=top] .en {

  font-family: var(--font-poppins);

  font-size: 0.75rem;

  line-height: 1.2;

  color: var(--color-primary);

  letter-spacing: 0.04em;

}

@media screen and (min-width: 768px) {

  .c-sec-heading[data-layer=top] .en {

    margin-left: 0.25rem;

    font-size: 1rem;

  }

}

.c-sec-heading[data-layer=top] :where(.ja) {

  font-size: 1.875rem;

  letter-spacing: 0.03em;

}

@media screen and (min-width: 768px) {

  .c-sec-heading[data-layer=top] :where(.ja) {

    font-size: 2.75rem;

  }

}

.c-sec-heading[data-layer=low][data-level="2"] > .inner {

  --marker-h: 1.75rem;

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 1rem;

  -moz-column-gap: 1rem;

       column-gap: 1rem;

  font-size: 1.5rem;

  line-height: 1.3;

  color: var(--color-text);

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .c-sec-heading[data-layer=low][data-level="2"] > .inner {

    --marker-h: 2rem;

    font-size: 2rem;

    line-height: 1.6;

  }

}

.c-sec-heading[data-layer=low][data-level="2"] > .inner::before {

  display: inline-block;

  width: 0.375rem;

  height: var(--marker-h);

  margin-top: calc((1lh - var(--marker-h)) / 2);

  margin-bottom: calc((1lh - var(--marker-h)) / 2);

  content: "";

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

.c-sec-heading[data-layer=low][data-level="3"] > .inner {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.625rem;

  -moz-column-gap: 0.625rem;

       column-gap: 0.625rem;

  font-size: 1.25rem;

  font-weight: 700;

  line-height: 1.3;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .c-sec-heading[data-layer=low][data-level="3"] > .inner {

    -moz-column-gap: 0.875rem;

         column-gap: 0.875rem;

    font-size: 1.5rem;

    line-height: 1.65;

  }

}

.c-sec-heading[data-layer=low][data-level="3"] > .inner::before {

  --marker-size: 0.625rem;

  display: inline-block;

  width: 0.625rem;

  width: var(--marker-size);

  aspect-ratio: 1;

  margin-top: calc((1lh - 0.625rem) / 2);

  margin-bottom: calc((1lh - 0.625rem) / 2);

  margin-top: calc((1lh - var(--marker-size)) / 2);

  margin-bottom: calc((1lh - var(--marker-size)) / 2);

  content: "";

  background-color: currentcolor;

  border-radius: 50%;

}.c-index-job[class] {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] {

    margin-top: 10rem;

  }

}

.c-index-job[class] > .c-sec-inner {

  --inner-size: 343;

}

@media screen and (max-width: 767px) {

  .c-index-job[class] > .c-sec-inner {

    padding-right: 1rem;

    padding-left: 1rem;

  }

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner {

    --inner-size: 1200;

  }

}

.c-index-job[class] > .c-sec-inner .c-sec-heading .ja {

  font-size: 2rem;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner .c-sec-heading .ja {

    font-size: 3rem;

  }

}

.c-index-job[class] > .c-sec-inner .col {

  position: relative;

  display: grid;

  grid-gap: 2.5rem;

  gap: 2.5rem;

  padding: 2.5rem calc(26 / var(--inner-size) * 100cqi) calc(136 / var(--inner-size) * 100cqi);

  overflow: clip;

  color: var(--color-white);

  background-color: var(--color-primary);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner .col {

    grid-template-columns: calc(404 / var(--inner-size) * 100cqi) 1fr;

    gap: calc(80 / var(--inner-size) * 100cqi);

    padding: 4.5rem calc(80 / var(--inner-size) * 100cqi);

    border-radius: 1.25rem;

  }

}

.c-index-job[class] > .c-sec-inner .desc {

  margin-top: 1rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner .desc {

    margin-top: 1.25rem;

    font-size: 1.125rem;

  }

}

.c-index-job[class] > .c-sec-inner .nav .list {

  display: grid;

  grid-row-gap: 1.25rem;

  row-gap: 1.25rem;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner .nav .list {

    row-gap: 1.5rem;

  }

}

.c-index-job[class] > .c-sec-inner .nav .link {

  display: grid;

  grid-template-columns: 1fr 2rem;

  grid-column-gap: calc(16 / var(--inner-size) * 100cqi);

  -moz-column-gap: calc(16 / var(--inner-size) * 100cqi);

       column-gap: calc(16 / var(--inner-size) * 100cqi);

  align-items: center;

  padding: 1rem calc(16 / var(--inner-size) * 100cqi) 1rem calc(20 / var(--inner-size) * 100cqi);

  font-weight: 700;

  line-height: 1.75;

  color: var(--color-primary);

  letter-spacing: 0.06em;

  background-color: var(--color-white);

  border-radius: 0.25rem;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner .nav .link {

    grid-template-columns: 1fr 2.5rem;

    padding: 1.25rem calc(32 / var(--inner-size) * 100cqi);

    font-size: 1.25rem;

    border-radius: 0.5rem;

  }

}

.c-index-job[class] > .c-sec-inner .illust {

  position: absolute;

  right: 0;

  bottom: calc(-10 / var(--inner-size) * 100cqi);

  left: 0;

  display: grid;

  grid-template-columns: repeat(4, calc(70 / var(--inner-size) * 100cqi));

  justify-content: center;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .c-index-job[class] > .c-sec-inner .illust {

    right: auto;

    right: initial;

    bottom: calc(-16 / var(--inner-size) * 100cqi);

    left: calc(73 / var(--inner-size) * 100cqi);

    grid-template-columns: repeat(4, calc(103 / var(--inner-size) * 100cqi));

    -moz-column-gap: 0.125rem;

         column-gap: 0.125rem;

    margin-right: 0;

    margin-left: 0;

  }

}

.c-index-job[class] > .c-sec-inner .illust img {

  width: 100%;

  height: auto;

}.p-notfound {

  padding-top: 3rem;

}

@media screen and (min-width: 768px) {

  .p-notfound {

    padding-top: 6.25rem;

  }

}

.p-notfound > .body .title {

  display: grid;

  grid-row-gap: 1.25rem;

  row-gap: 1.25rem;

  height: -moz-fit-content;

  height: fit-content;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-notfound > .body .title {

    row-gap: 1.5rem;

  }

}

.p-notfound > .body .title .en {

  font-family: var(--font-inter);

  font-size: 3.375rem;

  font-weight: 500;

  line-height: 1.1;

  color: var(--color-primary);

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-notfound > .body .title .en {

    font-size: 5rem;

    line-height: 1;

  }

}

.p-notfound > .body .title .ja {

  font-size: 1.25rem;

  line-height: 1.3;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-notfound > .body .title .ja {

    font-size: 1.5rem;

  }

}

.p-notfound > .body .desc {

  margin-top: 2rem;

  font-weight: 500;

  line-height: 1.75;

  text-align: center;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-notfound > .body .desc {

    margin-top: 3rem;

  }

}

.p-notfound > .body .link {

  display: grid;

  grid-template-columns: 3rem 1fr;

  grid-column-gap: 1.25rem;

  -moz-column-gap: 1.25rem;

       column-gap: 1.25rem;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  margin-top: 3.5rem;

  margin-right: auto;

  margin-left: auto;

  font-weight: 700;

  color: var(--color-text);

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-notfound > .body .link {

    margin-top: 4rem;

    font-size: 1.125rem;

  }

}

.p-notfound > .body .link .icon {

  rotate: 180deg;

}

.p-notfound .c-index-job {

  margin-top: 6rem;

}

@media screen and (min-width: 768px) {

  .p-notfound .c-index-job {

    margin-top: 10rem;

  }

}.c-index-heading {

  position: relative;

}

@media screen and (min-width: 768px) {

  .c-index-heading {

    padding-top: 5.375rem;

  }

}

.c-index-heading .navigation .list {

  --column-gap: 2.125rem;

  display: flex;

  flex-wrap: wrap;

  gap: 1rem 2.125rem;

  gap: 1rem var(--column-gap);

}

@media screen and (min-width: 768px) {

  .c-index-heading .navigation .list {

    --column-gap: 4.125rem;

  }

}

.c-index-heading .navigation .item {

  position: relative;

  display: grid;

}

.c-index-heading .navigation .item:first-of-type {

  padding-left: 0;

}

.c-index-heading .navigation .item:last-of-type {

  padding-right: 0;

}

.c-index-heading .navigation .item:not(:last-of-type)::after {

  --r: 0.0625rem;

  --gap: 0.25rem;

  position: absolute;

  top: 0;

  right: calc(var(--column-gap) / 2 * -1);

  bottom: 0;

  width: 0.125rem;

  height: 1.25rem;

  margin-top: auto;

  margin-bottom: auto;

  content: "";

  background-image: radial-gradient(circle, var(--color-bg-gray5) 0.0625rem, transparent 0.0625rem);

  background-image: radial-gradient(circle, var(--color-bg-gray5) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: calc(0.0625rem * 2) calc(0.0625rem * 2 + 0.25rem);

  background-size: calc(var(--r) * 2) calc(var(--r) * 2 + var(--gap));

}

@media screen and (min-width: 768px) {

  .c-index-heading .navigation .item:not(:last-of-type)::after {

    height: 100%;

  }

}

.c-index-heading .navigation .link {

  display: grid;

  grid-template-columns: 1fr 1.25rem;

  grid-column-gap: 0.5rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  align-items: center;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.2;

  color: var(--color-text);

  letter-spacing: -0.02em;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-index-heading .navigation .link {

    grid-template-columns: 1fr 1.5rem;

    font-size: 1rem;

    letter-spacing: 0.04em;

  }

}

.c-index-heading .navigation .link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .c-index-heading .navigation .link:hover {

    color: var(--color-primary);

  }

}

.c-index-heading .desc {

  margin-left: 0.0625rem;

  font-size: 1rem;

  font-weight: 500;

  line-height: 1.65;

}

@media screen and (min-width: 768px) {

  .c-index-heading .desc {

    margin-left: 0.3125rem;

  }

}

.c-index-heading .desc + .navigation {

  margin-top: 3rem;

}

@media screen and (min-width: 768px) {

  .c-index-heading .desc + .navigation {

    margin-top: 4rem;

  }

}

.c-index-heading .title {

  display: grid;

  grid-row-gap: 0.375rem;

  row-gap: 0.375rem;

  font-weight: 500;

}

@media screen and (min-width: 768px) {

  .c-index-heading .title {

    row-gap: 0;

  }

}

.c-index-heading .title .en {

  margin-left: 0.0625rem;

  font-family: var(--font-poppins);

  font-size: 1rem;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .c-index-heading .title .en {

    margin-left: 0.3125rem;

  }

}

.c-index-heading .title .ja {

  font-size: 2rem;

  line-height: 1.3;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .c-index-heading .title .ja {

    font-size: 3rem;

    line-height: 1.5;

  }

}

.c-index-heading .title + .desc {

  margin-top: 2rem;

}

.c-index-heading .title + .navigation {

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .c-index-heading .title + .navigation {

    margin-top: 4rem;

  }

}.c-index-pagelist .title {

  display: grid;

  grid-row-gap: 0.125rem;

  row-gap: 0.125rem;

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .title {

    row-gap: 0;

  }

}

.c-index-pagelist .title .en {

  font-family: var(--font-poppins);

  font-size: 1rem;

  font-weight: 500;

  line-height: 1.1;

  color: var(--color-primary);

  letter-spacing: 0.04em;

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .title .en {

    font-size: 0.875rem;

  }

}

.c-index-pagelist .title .ja {

  font-size: 1.75rem;

  font-weight: 500;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .title .ja {

    font-size: 2.5rem;

    letter-spacing: 0.02em;

  }

}

.c-index-pagelist .list {

  display: grid;

  margin-top: 2.375rem;

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .list {

    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));

    gap: calc(48 / var(--inner-size) * 100cqi);

    margin-top: 3.5rem;

  }

}

.c-index-pagelist .list .item {

  display: grid;

  min-height: 5rem;

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .list .item {

    min-height: 0;

  }

}

.c-index-pagelist .list .item:first-of-type {

  border-top: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .list .item:first-of-type {

    border-top: none;

  }

}

.c-index-pagelist .list .link {

  position: relative;

  display: grid;

  grid-template-columns: 1fr 2rem;

  align-items: center;

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

  padding-left: 0.125rem;

  font-weight: 700;

  color: var(--color-text);

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .list .link {

    padding-top: 0;

    padding-bottom: 1.25rem;

    padding-left: 0;

  }

}

.c-index-pagelist .list .link:focus-visible {

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .c-index-pagelist .list .link:focus-visible::after {

    transform-origin: bottom left;

    scale: 1 1;

  }

}

@media (any-hover: hover) {

  .c-index-pagelist .list .link:hover {

    color: var(--color-primary);

  }

}

@media screen and (any-hover: hover) and (min-width: 768px) {

  .c-index-pagelist .list .link:hover::after {

    transform-origin: bottom left;

    scale: 1 1;

  }

}

.c-index-pagelist .list .link[aria-current=page] {

  color: var(--color-text-gray2);

  pointer-events: none;

}

.c-index-pagelist .list .link[aria-current=page] .c-icon {

  display: none;

}

.c-index-pagelist .list .link::before, .c-index-pagelist .list .link::after {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 0.0625rem;

  content: "";

}

.c-index-pagelist .list .link::before {

  background-color: var(--color-bg-gray2);

}

.c-index-pagelist .list .link::after {

  background-color: var(--color-primary);

  transition: scale 0.4s ease;

  transform-origin: bottom right;

  scale: 0 1;

}.c-breadcrumb {

  padding-top: 5rem;

}

@media screen and (min-width: 768px) {

  .c-breadcrumb {

    order: -9999;

    padding-top: 0.75rem;

  }

}

.c-breadcrumb .inner {

  padding-right: 1.5rem;

  padding-left: 1.5rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .c-breadcrumb .inner {

    max-width: 80rem;

    padding-right: 2.5rem;

    padding-left: 2.5rem;

  }

}

.c-breadcrumb .list {

  width: -moz-fit-content;

  width: fit-content;

  margin-left: auto;

}

.c-breadcrumb .item {

  display: inline;

}

.c-breadcrumb .item:not(:first-of-type)::before {

  display: inline-block;

  width: 0.625rem;

  height: 0.0625rem;

  margin-right: 0.0625rem;

  margin-left: 0.0625rem;

  vertical-align: 17%;

  content: "";

  background-color: var(--color-bg-gray3);

}

@media screen and (min-width: 768px) {

  .c-breadcrumb .item:not(:first-of-type)::before {

    vertical-align: 20%;

  }

}

.c-breadcrumb .link {

  font-size: 0.8125rem;

  font-weight: 500;

  color: var(--color-text);

  letter-spacing: 0.04em;

  transition: color 0.3s ease;

}

.c-breadcrumb .link[aria-current=page] {

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .c-breadcrumb .link {

    font-size: 0.875rem;

  }

}

.c-breadcrumb .link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .c-breadcrumb .link:hover {

    color: var(--color-primary);

  }

}

.p-about-data[class] {

  padding-top: 0;

}

.p-about-data .c-index-pagelist {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .c-index-pagelist {

    margin-top: 7rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .c-breadcrumb {

    padding-top: 1.25rem;

    background-color: var(--color-beige);

  }

}

.p-about-data .c-index-heading {

  padding-top: 4rem;

  background-color: var(--color-beige);

}

@media screen and (min-width: 768px) {

  .p-about-data .c-index-heading {

    padding-top: 4.875rem;

    text-align: center;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .c-index-heading .navigation :where(.list) {

    justify-content: center;

  }

}

.p-about-data .c-index-heading :where(.human) {

  display: none;

}

@media screen and (min-width: 768px) {

  .p-about-data .c-index-heading :where(.human) {

    position: absolute;

    display: block;

    width: 6.25rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-about-data .c-index-heading :where(.human) {

    width: 7.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .c-index-heading :where(.human):first-of-type {

    top: -3.5rem;

    left: calc(40 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .c-index-heading :where(.human):last-of-type {

    top: 1.75rem;

    right: calc(40 / var(--inner-size) * 100cqi);

  }

}

.p-about-data .p-about-data-sec {

  padding-top: 3.5rem;

  padding-bottom: 4rem;

  background-color: var(--color-beige);

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec {

    padding-top: 7.5rem;

    padding-bottom: 8.5rem;

  }

}

.p-about-data .p-about-data-sec .heading-popup {

  position: relative;

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.5rem 1.25rem 0.625rem 1.5rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 0.875rem;

  font-weight: 700;

  line-height: 1.3;

  color: var(--color-white);

  text-align: center;

  letter-spacing: 0.04em;

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .heading-popup {

    padding: 0.625rem calc(24 / var(--inner-size) * 100cqi) 0.875rem;

    font-size: 1.125rem;

    line-height: 1;

    text-align: left;

  }

}

.p-about-data .p-about-data-sec .heading-popup::after {

  --r: 0.0625rem;

  --h: 0.625rem;

  position: absolute;

  right: 0;

  bottom: calc((0.625rem - 0.0625rem) * -1);

  bottom: calc((var(--h) - 0.0625rem) * -1);

  left: 0;

  width: 0.75rem;

  height: 0.625rem;

  height: var(--h);

  margin-right: auto;

  margin-left: auto;

  clip-path: polygon(50% 100%, 100% 0, 0 0);

  content: "";

  background-color: var(--color-primary);

  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) calc(3 * 0.0625rem / 2), #000 0), radial-gradient(0.0625rem at 50% calc(100% - 2 * 0.0625rem), #000 98%, rgba(0, 0, 0, 0) 101%);

          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) calc(3 * 0.0625rem / 2), #000 0), radial-gradient(0.0625rem at 50% calc(100% - 2 * 0.0625rem), #000 98%, rgba(0, 0, 0, 0) 101%);

  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) calc(3 * var(--r) / 2), #000 0), radial-gradient(var(--r) at 50% calc(100% - 2 * var(--r)), #000 98%, rgba(0, 0, 0, 0) 101%);

          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) calc(3 * var(--r) / 2), #000 0), radial-gradient(var(--r) at 50% calc(100% - 2 * var(--r)), #000 98%, rgba(0, 0, 0, 0) 101%);

  -webkit-mask-repeat: no-repeat;

          mask-repeat: no-repeat;

  -webkit-mask-position: 0 0;

          mask-position: 0 0;

  -webkit-mask-size: auto;

          mask-size: auto;

}

.p-about-data .p-about-data-sec .heading-title {

  margin-top: 1rem;

  font-size: 1.5rem;

  font-weight: 500;

  line-height: 1.6;

  text-align: center;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .heading-title {

    margin-top: 1.125rem;

    font-size: 2.5rem;

  }

}

.p-about-data .p-about-data-sec .list {

  display: grid;

  grid-gap: 1.25rem;

  gap: 1.25rem;

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .list {

    gap: 2.5rem calc(40 / var(--inner-size) * 100cqi);

    margin-top: 3.5rem;

  }

}

.p-about-data .p-about-data-sec .item {

  display: grid;

  padding: 1.5rem 1.25rem 1.75rem;

  text-align: center;

  background-color: var(--color-white);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .item {

    padding: 2.5rem calc(24 / var(--inner-size) * 100cqi) 1.5rem;

  }

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-sec .item:where(.p-about-data .p-about-data-sec .item:has(.note)) {

    padding-bottom: 1.25rem;

  }

}

.p-about-data .p-about-data-sec .title {

  order: -9999;

  font-size: 1.125rem;

  font-weight: 500;

  line-height: 1.3;

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-sec .title {

    grid-column: span 2;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .title {

    order: initial;

    font-size: 1.25rem;

  }

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-sec .data {

    grid-column-start: 2;

  }

}

.p-about-data .p-about-data-sec .num {

  font-family: var(--font-inter);

  font-size: 4rem;

  font-weight: 600;

  line-height: 1;

  color: var(--color-primary);

  letter-spacing: 0.04em;

  white-space: nowrap;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .num {

    font-size: 5rem;

  }

}

.p-about-data .p-about-data-sec .unit {

  margin-left: -0.25rem;

  font-size: 1.25rem;

  font-weight: 500;

  line-height: 1;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .unit {

    font-size: 1.5rem;

  }

}

.p-about-data .p-about-data-sec .unit.-en {

  font-family: var(--font-inter);

  font-size: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .unit.-en {

    font-size: 1.75rem;

  }

}

.p-about-data .p-about-data-sec .note {

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--color-text-gray2);

  text-align: left;

  letter-spacing: 0.01em;

}

.p-about-data .p-about-data-sec .note > li {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.25rem;

  -moz-column-gap: 0.25rem;

       column-gap: 0.25rem;

}

.p-about-data .p-about-data-sec .note > li::before {

  content: "※";

}

.p-about-data .p-about-data-sec .sublist {

  display: grid;

}

.p-about-data .p-about-data-sec .sublist .sublist-label {

  width: -moz-fit-content;

  width: fit-content;

  margin-right: auto;

  margin-left: auto;

  font-weight: 700;

  line-height: 1;

  color: var(--color-white);

  background-color: var(--color-primary);

  border-radius: 0.125rem;

}

.p-about-data .p-about-data-sec .illust {

  margin-right: auto;

  margin-left: auto;

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-sec .illust {

    grid-column-start: 1;

    width: 4.125rem;

  }

}

.p-about-data .p-about-data-sec .col {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-gap: 0.75rem;

  gap: 0.75rem;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .col {

    gap: 0;

  }

}

.p-about-data .p-about-data-sec .human {

  display: none;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-sec .human {

    position: absolute;

    display: block;

    width: 6.25rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-about-data .p-about-data-sec .human {

    width: 7.5rem;

  }

}

.p-about-data .p-about-data-overview {

  position: relative;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .human {

    top: -6.4375rem;

    left: calc(76 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .list {

    grid-template-columns: repeat(3, 1fr);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .item {

    grid-template-rows: auto auto auto 1fr;

  }

}

.p-about-data .p-about-data-overview .item .title {

  align-self: center;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .item .title {

    margin-top: 2rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .item .data {

    margin-top: 0.75rem;

  }

}

.p-about-data .p-about-data-overview .item .note {

  align-self: flex-end;

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .item .note {

    margin-top: 1rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-overview .item .col {

    display: contents;

  }

}

.p-about-data .p-about-data-work {

  position: relative;

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work {

    margin-top: 8.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .human {

    top: -2.75rem;

    right: calc(46 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .list {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type {

    grid-column: span 2;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .col {

    gap: calc(56 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .title {

    margin-right: 0.625rem;

    font-size: 1.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .data {

    margin-top: 0.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .num {

    font-size: 5.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .unit {

    font-size: 2.625rem;

  }

}

.p-about-data .p-about-data-work .item:first-of-type .block {

  display: contents;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .block {

    display: grid;

    grid-template-columns: 1fr auto;

    grid-gap: calc(36 / var(--inner-size) * 100cqi);

    gap: calc(36 / var(--inner-size) * 100cqi);

  }

}

.p-about-data .p-about-data-work .item:first-of-type .sublist {

  row-gap: 0.5rem;

  align-self: flex-end;

  margin-top: 0.125rem;

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-work .item:first-of-type .sublist {

    grid-column: span 2;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .sublist {

    margin-top: 0;

  }

}

.p-about-data .p-about-data-work .item:first-of-type .sublist .sublist-item {

  display: grid;

  grid-template-columns: auto 1fr;

  grid-gap: 0.5rem;

  gap: 0.5rem;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .sublist .sublist-item {

    gap: calc(12 / var(--inner-size) * 100cqi);

    width: 100%;

  }

}

.p-about-data .p-about-data-work .item:first-of-type .sublist .sublist-label {

  padding: 0.25rem 0.5rem 0.375rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .sublist .sublist-label {

    padding: 0.25rem 0.75rem 0.4375rem;

    font-size: 1.3125rem;

  }

}

.p-about-data .p-about-data-work .item:first-of-type .sublist .num {

  font-size: 2rem;

  color: var(--color-text-gray2);

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .sublist .num {

    font-size: 2.75rem;

  }

}

.p-about-data .p-about-data-work .item:first-of-type .sublist .unit {

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:first-of-type .sublist .unit {

    font-size: 1.25rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:not(:first-of-type) {

    grid-template-rows: subgrid;

    grid-row: span 2;

    gap: 0;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:not(:first-of-type) .col {

    gap: calc(40 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:not(:first-of-type) .data {

    margin-top: 0.5rem;

  }

}

.p-about-data .p-about-data-work .item:not(:first-of-type) .note {

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-work .item:not(:first-of-type) .note {

    margin-top: 1rem;

  }

}

.p-about-data .p-about-data-people {

  position: relative;

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people {

    margin-top: 8.5rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .human {

    top: -2.75rem;

    left: calc(46 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .list {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type {

    grid-column: span 2;

    padding-top: 3.5rem;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .col {

  gap: 0.75rem 1rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .col {

    gap: calc(56 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .title {

    font-size: 1.5rem;

  }

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-people .item:first-of-type .illust {

    width: 4.75rem;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .note {

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .note {

    margin-top: 1rem;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .sublist {

  row-gap: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .sublist {

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin-top: 1.25rem;

  }

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-people .item:first-of-type .sublist .sublist-item {

    display: grid;

    grid-template-columns: max-content 1fr;

    grid-column-gap: 0.625rem;

    -moz-column-gap: 0.625rem;

         column-gap: 0.625rem;

    align-items: center;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .sublist .sublist-label {

  padding: 0.25rem 0.5rem 0.375rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .sublist .sublist-label {

    padding: 0.5rem 1rem 0.625rem;

    font-size: 1.25rem;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .sublist .sublist-data {

  justify-self: flex-start;

  white-space: nowrap;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .sublist .sublist-data {

    justify-self: center;

    margin-top: 0.5rem;

    margin-left: 1.75rem;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .sublist .num {

  font-size: 2rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .sublist .num {

    font-size: 5.4375rem;

  }

}

.p-about-data .p-about-data-people .item:first-of-type .sublist .unit {

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:first-of-type .sublist .unit {

    font-size: 2rem;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) {

    grid-template-rows: subgrid;

    grid-row: span 2;

    gap: 0;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .col {

    gap: calc(40 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .data {

    margin-top: 0.625rem;

  }

}

.p-about-data .p-about-data-people .item:not(:first-of-type) .note {

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .note {

    margin-top: 1rem;

  }

}

.p-about-data .p-about-data-people .item:not(:first-of-type) .sublist {

  gap: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .sublist {

    grid-template-columns: repeat(2, 1fr);

    gap: calc(20 / var(--inner-size) * 100cqi);

    margin-top: 1rem;

  }

}

@media screen and (max-width: 767px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-item {

    display: grid;

    grid-template-columns: max-content 1fr;

    grid-column-gap: 0.625rem;

    -moz-column-gap: 0.625rem;

         column-gap: 0.625rem;

    align-items: center;

  }

}

.p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-label {

  padding: 0.25rem 0.5rem 0.375rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-label {

    padding: 0.25rem 0.5rem 0.4375rem;

    font-size: 1rem;

    translate: -0.5rem 0;

  }

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-data {

    margin-top: 0.25rem;

  }

}

.p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-data .num {

  font-size: 2rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-data .num {

    font-size: 3.875rem;

  }

}

.p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-data .unit {

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-about-data .p-about-data-people .item:not(:first-of-type) .sublist .sublist-data .unit {

    font-size: 1.25rem;

  }

}.p-about-philosophy .c-index-pagelist {

  margin-top: 5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy .c-index-pagelist {

    margin-top: 10rem;

  }

}



.p-about-philosophy-history {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history {

    margin-top: 6rem;

  }

}

.p-about-philosophy-history .list {

  display: grid;

  padding-right: 0.75rem;

  padding-left: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .list {

    padding-right: 0;

    padding-left: 0;

  }

}

.p-about-philosophy-history .item {

  display: grid;

  grid-template-areas: "icon year" "icon info";

  grid-template-columns: subgrid;

  grid-column: span 3;

  grid-column-gap: 1rem;

  -moz-column-gap: 1rem;

       column-gap: 1rem;

}

@media screen and (max-width: 767px) {

  .p-about-philosophy-history .item {

    grid-template-rows: auto 1fr;

  }

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .item {

    grid-template-areas: "year icon info";

    -moz-column-gap: 3.5rem;

         column-gap: 3.5rem;

  }

}

.p-about-philosophy-history .item::before, .p-about-philosophy-history .item::after {

  grid-area: icon;

  justify-self: center;

  content: "";

}

.p-about-philosophy-history .item::before {

  position: relative;

  z-index: 2;

  width: 0.5rem;

  aspect-ratio: 1;

  margin-top: 0.5rem;

  background-color: var(--color-primary);

  border-radius: 50%;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .item::before {

    width: 0.75rem;

    margin-top: 0.625rem;

  }

}

.p-about-philosophy-history .item::after {

  width: 0.375rem;

  height: 100%;

  background-color: var(--color-light-blue);

}

.p-about-philosophy-history .item .dot {

  --r: 0.1875rem;

  --gap: 0.375rem;

  grid-area: icon;

  align-self: flex-end;

  justify-self: center;

  align-self: flex-end;

  justify-self: center;

  place-self: flex-end center;

  width: calc(0.1875rem * 2);

  width: calc(var(--r) * 2);

  height: 2.125rem;

  margin-top: 5.25rem;

  background-image: radial-gradient(circle, var(--color-light-blue) 0.1875rem, transparent 0.1875rem);

  background-image: radial-gradient(circle, var(--color-light-blue) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: calc(0.1875rem * 2) calc(0.1875rem * 2 + 0.375rem);

  background-size: calc(var(--r) * 2) calc(var(--r) * 2 + var(--gap));

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .item .dot {

    --r: 0.1875rem;

    --gap: 0.25rem;

    height: 1.75rem;

    margin-top: 0;

  }

}

.p-about-philosophy-history .item .info {

  grid-area: info;

  padding-bottom: 1.25rem;

  margin-top: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .item .info {

    padding-bottom: 3.5rem;

    margin-top: 0;

  }

}

.p-about-philosophy-history .item:first-of-type::after {

  margin-top: 0.625rem;

}

.p-about-philosophy-history .item:last-of-type::after {

  height: calc(100% - 2.5rem);

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .item:last-of-type::after {

    height: calc(100% - 2.25rem);

  }

}

.p-about-philosophy-history .item:not(:last-of-type) .info {

  padding-bottom: 2rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .item:not(:last-of-type) .info {

    padding-bottom: 2.5rem;

  }

}

.p-about-philosophy-history .year {

  grid-area: year;

  font-family: var(--font-inter);

  font-size: 1.75rem;

  font-weight: 600;

  line-height: 1;

  color: var(--color-primary);

  letter-spacing: 0.08em;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .year {

    font-size: 2rem;

    letter-spacing: 0;

  }

}

.p-about-philosophy-history .num {

  display: flex;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .num {

    justify-content: space-between;

  }

}

.p-about-philosophy-history .desc {

  line-height: 1.75;

  letter-spacing: -0.02em;

}

.p-about-philosophy-history .desc + .desc {

  margin-top: 0.75rem;

}

.p-about-philosophy-history .thumb {

  width: 100%;

  max-width: 12.5rem;

  margin-top: 1.25rem;

  border-radius: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .thumb {

    max-width: 15rem;

  }

}

.p-about-philosophy-history .detail-link {

  width: -moz-fit-content;

  width: fit-content;

  margin-top: 1rem;

  font-weight: 500;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-history .detail-link {

    margin-top: 0.25rem;

    margin-left: auto;

  }

}

.p-about-philosophy-history .detail-link .c-link::after {

  margin-left: 0.125rem;

}.p-about-philosophy-corporate {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate {

    margin-top: 6rem;

  }

}

.p-about-philosophy-corporate .block {

  padding: 2.5rem 1.5rem 3rem;

  text-align: center;

  background-color: var(--color-light-blue2);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .block {

    padding: 5.5rem calc(80 / var(--inner-size) * 100cqi);

    border-radius: 1rem;

  }

}

.p-about-philosophy-corporate .title {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.25rem 0.875rem 0.375rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1rem;

  color: var(--color-white);

  letter-spacing: 0.04em;

  background-color: var(--color-primary);

  border-radius: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .title {

    padding: 0.0625rem 0.75rem 0.25rem;

    font-size: 1.125rem;

  }

}

.p-about-philosophy-corporate .lead {

  margin-top: 1rem;

  font-size: 1.375rem;

  font-weight: 500;

  line-height: 1.7;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .lead {

    margin-top: 2rem;

    font-size: 2.5rem;

    line-height: 1.8;

  }

}

.p-about-philosophy-corporate .desc {

  margin-top: 2rem;

  font-size: 0.875rem;

  line-height: 1.65;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .desc {

    margin-top: 3rem;

    font-size: 1rem;

    line-height: 2;

  }

}

.p-about-philosophy-corporate .desc + .desc {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .desc + .desc {

    margin-top: 2.5rem;

  }

}

.p-about-philosophy-corporate .detail {

  max-width: 39rem;

  padding-top: 1.5rem;

  margin-top: 2.5rem;

  margin-right: auto;

  margin-left: auto;

  border-top: 0.0625rem solid var(--color-bg-gray3);

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .detail {

    padding-top: 3rem;

    margin-top: 5.5rem;

  }

}

.p-about-philosophy-corporate .detail .detail-lead {

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .detail .detail-lead {

    font-size: 1rem;

  }

}

.p-about-philosophy-corporate .detail .detail-link {

  display: grid;

  grid-template-columns: 1fr 0.75rem;

  grid-column-gap: 0.5rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  margin-top: 1rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.125rem;

  font-weight: 500;

  color: var(--color-text);

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-corporate .detail .detail-link {

    margin-top: 0.75rem;

    font-size: 1.25rem;

  }

}

.p-about-philosophy-corporate .detail .detail-link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-about-philosophy-corporate .detail .detail-link:hover {

    color: var(--color-primary);

  }

}

.p-about-philosophy-corporate .detail .detail-link > span {

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.03125rem;

}

.p-about-philosophy-corporate .detail .detail-link > svg {

  width: 100%;

}.p-about-philosophy-vision {

  margin-top: 4.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision {

    margin-top: 7.5rem;

  }

}

.p-about-philosophy-vision .section {

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision .section {

    margin-top: 4rem;

  }

}

.p-about-philosophy-vision .section + .section {

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision .section + .section {

    margin-top: 5.25rem;

  }

}

.p-about-philosophy-vision .title {

  font-size: 1.5rem;

  line-height: 1.3;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision .title {

    font-size: 1.75rem;

    line-height: 1.65;

  }

}

.p-about-philosophy-vision .title + * {

  margin-top: 1rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision .title + * {

    margin-top: 1.75rem;

  }

}

.p-about-philosophy-vision .subtitle {

  width: -moz-fit-content;

  width: fit-content;

  font-size: 1.125rem;

  font-weight: 500;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision .subtitle {

    font-size: 1.25rem;

  }

}

.p-about-philosophy-vision .subtitle + * {

  margin-top: 1rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy-vision .subtitle + * {

    margin-top: 1.5rem;

  }

}

.p-about-philosophy-vision .subtitle a {

  color: var(--color-text);

  transition: color 0.3s ease;

}

.p-about-philosophy-vision .subtitle a:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-about-philosophy-vision .subtitle a:hover {

    color: var(--color-primary);

  }

}

.p-about-philosophy-vision .subtitle a > span {

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.03125rem;

}

.p-about-philosophy-vision .subtitle a > svg {

  display: inline-block;

  width: 0.75rem;

  margin-left: -0.375rem;

}.p-about-philosophy .c-index-pagelist {

  margin-top: 5rem;

}

@media screen and (min-width: 768px) {

  .p-about-philosophy .c-index-pagelist {

    margin-top: 10rem;

  }

}.p-about-surugabank-feature {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature {

    margin-top: 6rem;

  }

}

.p-about-surugabank-feature .feature {

  display: grid;

  grid-row-gap: 3.5rem;

  row-gap: 3.5rem;

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .feature {

    row-gap: 7rem;

    margin-top: 4rem;

  }

}

.p-about-surugabank-feature .feature-item {

  counter-increment: num;

}

.p-about-surugabank-feature .feature-col {

  display: grid;

  grid-gap: 2rem;

  gap: 2rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .feature-col {

    grid-template-columns: 1fr 22.5rem;

    gap: calc(80 / var(--inner-size) * 100cqi);

  }

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .feature-thumb {

    align-self: flex-end;

  }

}

.p-about-surugabank-feature .feature-thumb img {

  width: 100%;

  border-radius: 0.5rem;

}

.p-about-surugabank-feature .feature-title {

  display: grid;

  grid-row-gap: 0.625rem;

  row-gap: 0.625rem;

  font-size: 1.375rem;

  color: var(--color-primary);

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .feature-title {

    font-size: 1.75rem;

  }

}

.p-about-surugabank-feature .feature-title::before {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.375rem 1rem;

  font-family: var(--font-poppins);

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1;

  color: var(--color-white);

  letter-spacing: 0.04em;

  content: "FEATURE" counter(num);

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .feature-title::before {

    font-size: 1rem;

    letter-spacing: 0;

  }

}

.p-about-surugabank-feature .feature-title + * {

  margin-top: 1rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .feature-title + * {

    margin-top: 2rem;

  }

}

.p-about-surugabank-feature .feature-title:is(html.is-ios .feature-title)::before {

  padding: 0.0625rem 1rem 0.3125rem;

}

.p-about-surugabank-feature .feature-desc {

  line-height: 1.75;

  letter-spacing: -0.02em;

}

.p-about-surugabank-feature .example {

  padding: 2rem 1.25rem 1.25rem;

  margin-top: 3rem;

  background-color: var(--color-beige);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .example {

    padding: calc(56 / var(--inner-size) * 100cqi);

    margin-top: 4.5rem;

    border-radius: 1rem;

  }

}

.p-about-surugabank-feature .example .example-title {

  font-size: 1.25rem;

  color: var(--color-primary);

  text-align: center;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .example .example-title {

    font-size: 1.75rem;

  }

}

.p-about-surugabank-feature .example .example-list {

  display: grid;

  grid-row-gap: 0.875rem;

  row-gap: 0.875rem;

  padding: 1.25rem 1.5rem 1.25rem 1.25rem;

  margin-top: 1.5rem;

  background-color: var(--color-white);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .example .example-list {

    padding: calc(56 / var(--inner-size) * 100cqi);

    margin-top: 2.5rem;

    border-radius: 0.75rem;

  }

}

.p-about-surugabank-feature .example .example-item {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.625rem;

  -moz-column-gap: 0.625rem;

       column-gap: 0.625rem;

  line-height: 1.75;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .example .example-item {

    -moz-column-gap: 0.875rem;

         column-gap: 0.875rem;

  }

}

.p-about-surugabank-feature .example .example-item::before {

  --marker-size: 0.375rem;

  display: inline-block;

  width: 0.375rem;

  width: var(--marker-size);

  aspect-ratio: 1;

  margin-top: calc((1lh - 0.375rem) / 2);

  margin-bottom: calc((1lh - 0.375rem) / 2);

  margin-top: calc((1lh - var(--marker-size)) / 2);

  margin-bottom: calc((1lh - var(--marker-size)) / 2);

  content: "";

  background-color: var(--color-primary);

  border-radius: 50%;

}

.p-about-surugabank-feature .example .example-item .em {

  font-weight: 700;

  color: var(--color-primary);

}

.p-about-surugabank-feature .plan {

  padding: 1.5rem 2rem 2.5rem 1.5rem;

  margin-top: 3rem;

  background-color: var(--color-bg-gray);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan {

    padding: 3rem calc(56 / var(--inner-size) * 100cqi) 3.5rem;

    margin-top: 4.5rem;

    border-radius: 1rem;

  }

}

.p-about-surugabank-feature .plan .plan-title {

  width: -moz-fit-content;

  width: fit-content;

  font-size: 1.125rem;

  line-height: 1.95;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-title {

    font-size: 1.25rem;

    line-height: 1.5;

  }

}

.p-about-surugabank-feature .plan .plan-title > span {

  padding-bottom: 0.1875rem;

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-title > span {

    padding-bottom: 0.5rem;

  }

}

.p-about-surugabank-feature .plan .plan-desc {

  margin-top: 1.25rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-desc {

    margin-top: 1.75rem;

    font-size: 1rem;

  }

}

.p-about-surugabank-feature .plan .plan-example {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-example {

    margin-top: 2rem;

  }

}

.p-about-surugabank-feature .plan .plan-example-label {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.0625rem 1rem 0.25rem;

  font-size: 0.8125rem;

  font-weight: 700;

  line-height: 1.5;

  color: var(--color-white);

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-example-label {

    padding: 0.25rem 1rem 0.375rem;

    font-size: 0.875rem;

    line-height: 1;

  }

}

.p-about-surugabank-feature .plan .plan-example-list {

  display: grid;

  grid-row-gap: 1.5rem;

  row-gap: 1.5rem;

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-example-list {

    row-gap: 0.75rem;

  }

}

.p-about-surugabank-feature .plan .plan-example-item {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.5rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  line-height: 1.75;

}

.p-about-surugabank-feature .plan .plan-example-item::before {

  --marker-size: 0.375rem;

  display: inline-block;

  width: 0.375rem;

  width: var(--marker-size);

  aspect-ratio: 1;

  margin-top: calc((1lh - 0.375rem) / 2);

  margin-bottom: calc((1lh - 0.375rem) / 2);

  margin-top: calc((1lh - var(--marker-size)) / 2);

  margin-bottom: calc((1lh - var(--marker-size)) / 2);

  content: "";

  background-color: var(--color-primary);

  border-radius: 50%;

}

.p-about-surugabank-feature .plan .plan-example-desc {

  letter-spacing: 0.01em;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-example-desc {

    font-size: 1rem;

  }

}

.p-about-surugabank-feature .plan .plan-example-desc .em {

  display: block;

  margin-bottom: 0.125rem;

  font-weight: 700;

  line-height: 1.5;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .plan .plan-example-desc .em {

    margin-bottom: 0;

    line-height: 1.75;

  }

}

.p-about-surugabank-feature .potential {

  padding: 2rem 1.25rem 1.25rem;

  margin-top: 2rem;

  color: var(--color-white);

  background-color: var(--color-primary);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .potential {

    padding: calc(40 / var(--inner-size) * 100cqi);

    margin-top: 3.5rem;

    border-radius: 1rem;

  }

}

.p-about-surugabank-feature .potential .potential-title {

  font-size: 1.25rem;

  line-height: 1.4;

  text-align: center;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .potential .potential-title {

    font-size: 1.375rem;

    line-height: 1.5;

  }

}

.p-about-surugabank-feature .potential .potential-thumb {

  margin-top: 1.5rem;

}

.p-about-surugabank-feature .potential .potential-thumb img {

  width: 100%;

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank-feature .potential .potential-thumb img {

    border-radius: 0.75rem;

  }

}.p-about-surugabank .c-index-pagelist {

  margin-top: 5rem;

}

@media screen and (min-width: 768px) {

  .p-about-surugabank .c-index-pagelist {

    margin-top: 9.375rem;

  }

}.p-about .p-about-index {

  padding-top: 3rem;

  padding-bottom: 3.5rem;

  margin-top: 3rem;

  background-color: var(--color-light-blue);

}

@media screen and (min-width: 768px) {

  .p-about .p-about-index {

    padding-top: 5rem;

    padding-bottom: 6rem;

    margin-top: 4.5rem;

  }

}

.p-about .p-about-index .list {

  display: grid;

  grid-gap: 1.5rem;

  gap: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-about .p-about-index .list {

    grid-template-columns: repeat(2, 1fr);

    grid-auto-rows: 1fr;

    gap: calc(48 / var(--inner-size) * 100cqi);

  }

}

.p-about .p-about-index .item {

  display: grid;

  padding: 1.5rem;

  background-color: var(--color-white);

  border-radius: 0.625rem;

}

@media screen and (min-width: 768px) {

  .p-about .p-about-index .item {

    grid-template-rows: auto auto 1fr;

    padding: calc(40 / var(--inner-size) * 100cqi);

  }

}

.p-about .p-about-index .title {

  display: grid;

  grid-template-columns: 1.75rem 1fr;

  grid-column-gap: 0.375rem;

  -moz-column-gap: 0.375rem;

       column-gap: 0.375rem;

  align-items: center;

  font-weight: 500;

}

@media screen and (min-width: 768px) {

  .p-about .p-about-index .title {

    grid-template-columns: 2.25rem 1fr;

    -moz-column-gap: calc(12 / var(--inner-size) * 100cqi);

         column-gap: calc(12 / var(--inner-size) * 100cqi);

    font-size: 1.75rem;

  }

}

.p-about .p-about-index .title .illust {

  width: 100%;

}

.p-about .p-about-index .desc {

  margin-top: 0.75rem;

  font-size: 0.875rem;

  line-height: 1.75;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .p-about .p-about-index .desc {

    margin-top: 1.125rem;

    font-size: 1rem;

  }

}

.p-about .p-about-index .c-button-basic {

  margin-top: 1.25rem;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-about .p-about-index .c-button-basic {

    align-self: flex-end;

    margin-top: 2.5rem;

  }

}.c-button-square {

  --text-color: var(--color-white);

  --bg-color: var(--color-primary);

  --icon-size: 2rem;

  display: grid;

  grid-template-columns: 1fr 2rem;

  grid-template-columns: 1fr var(--icon-size);

  align-items: center;

  font-weight: 700;

  line-height: 1.75;

  color: var(--color-white);

  color: var(--text-color);

  letter-spacing: 0.06em;

  background-color: var(--color-primary);

  background-color: var(--bg-color);

  border: 0.125rem solid var(--color-primary);

  border: 0.125rem solid var(--bg-color);

  border-radius: 0.25rem;

  transition: background-color 0.3s ease, color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-button-square {

    --icon-size: 2.5rem;

    border-radius: 0.5rem;

  }

}

.c-button-square:focus-visible {

  color: var(--bg-color);

  background-color: var(--text-color);

}

.c-button-square:focus-visible .c-icon::before {

  border-color: var(--bg-color);

}

@media (any-hover: hover) {

  .c-button-square:hover {

    color: var(--bg-color);

    background-color: var(--text-color);

  }

  .c-button-square:hover .c-icon::before {

    border-color: var(--bg-color);

  }

}

.c-button-square .text {

  justify-self: center;

  padding-bottom: 0.25rem;

  margin-left: var(--icon-size);

}

.c-button-square .c-icon {

  --icon-color: var(--bg-color);

}

.c-button-square .c-icon::before {

  border-color: var(--text-color);

}

.c-button-square[data-color=black] {

  --bg-color: var(--color-text);

}

.c-button-square[data-color=white] {

  --bg-color: var(--color-white);

  --text-color: var(--color-primary);

  border: 0.125rem solid var(--color-primary);

}

.c-button-square[data-color=white]:focus-visible {

  color: var(--text-color);

  background-color: var(--bg-color);

}

.c-button-square[data-color=white]:focus-visible .c-icon {

  --icon-color: var(--text-color);

}

.c-button-square[data-color=white]:focus-visible .c-icon::before {

  border-color: var(--text-color);

}

@media (any-hover: hover) {

  .c-button-square[data-color=white]:hover {

    color: var(--text-color);

    background-color: var(--bg-color);

  }

  .c-button-square[data-color=white]:hover .c-icon {

    --icon-color: var(--text-color);

  }

  .c-button-square[data-color=white]:hover .c-icon::before {

    border-color: var(--text-color);

  }

}

.c-button-square[data-color=orange] {

  --bg-color: var(--color-secondary);

}.p-entry .p-entry-index {

  padding-top: 3rem;

  padding-bottom: 3.5rem;

  margin-top: 3.5rem;

  border-image-source: linear-gradient(var(--color-beige) 0, var(--color-beige) 0);

  border-image-slice: fill 0;

  border-image-outset: 0 100vw;

}



@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {

.p-entry .p-entry-index {

  border-image-source: linear-gradient(var(--color-beige) 0 0);

}

}

@media screen and (min-width: 768px) {

  .p-entry .p-entry-index {

    padding-top: 5rem;

    padding-bottom: 6rem;

    margin-top: 4.5rem;

  }

}

.p-entry .p-entry-index .list {

  display: grid;

  grid-gap: 1.5rem;

  gap: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-entry .p-entry-index .list {

    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));

    gap: 2.5rem;

  }

}

.p-entry .p-entry-index .item {

  display: grid;

  grid-gap: 0;

  gap: 0;

  padding: 1.5rem 1.5rem 2rem;

  background-color: var(--color-white);

  border-radius: 0.625rem;

}

@media screen and (min-width: 768px) {

  .p-entry .p-entry-index .item {

    grid-template-rows: subgrid;

    grid-row: span 3;

    padding: 2.5rem 3rem 3rem;

  }

}

.p-entry .p-entry-index .title {

  font-size: 1.375rem;

  line-height: 1.75;

  color: var(--color-primary);

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-entry .p-entry-index .title {

    font-size: 2rem;

  }

}

.p-entry .p-entry-index .desc {

  margin-top: 0.5rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-entry .p-entry-index .desc {

    margin-top: 1rem;

    letter-spacing: -0.01em;

  }

}

.p-entry .p-entry-index .c-button-square {

  padding: 0.875rem;

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-entry .p-entry-index .c-button-square {

    max-width: 19.125rem;

    padding: 0.75rem;

    margin-top: 2.5rem;

  }

}.c-interview-card {

  position: relative;

}

.c-interview-card .thumb {

  position: relative;

  aspect-ratio: 488/314;

  overflow: clip;

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .c-interview-card .thumb {

    border-radius: 0.75rem;

  }

}

.c-interview-card .thumb .image {

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;

  transition: scale 0.3s ease;

}

.c-interview-card .category {

  position: absolute;

  top: 0.75rem;

  right: 0.75rem;

  z-index: 1;

  padding: 0.0625rem 0.9375rem 0.1875rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  color: var(--color-white);

  letter-spacing: -0.01em;

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .c-interview-card .category {

    top: 1rem;

    right: 1rem;

  }

}

.c-interview-card .icon {

  position: absolute;

  bottom: 0.75rem;

  left: 0.75rem;

  width: 4rem;

}

@media screen and (min-width: 768px) {

  .c-interview-card .icon {

    bottom: 1rem;

    left: 1rem;

    width: 5.5rem;

  }

}

.c-interview-card .icon img {

  width: 100%;

  height: auto;

}

.c-interview-card .info {

  padding: 0.75rem 0 0;

}

@media screen and (min-width: 768px) {

  .c-interview-card .info {

    padding: 1.25rem 0.25rem 0;

  }

}

.c-interview-card .info .title {

  position: relative;

  padding: 0 0.25rem 0.625rem;

  font-size: 1.125rem;

  font-weight: 500;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .c-interview-card .info .title {

    padding: 0 0.25rem 0.75rem;

    font-size: 1.375rem;

  }

}

.c-interview-card .info .title::after {

  --r: 0.0625rem;

  --gap: 0.25rem;

  position: absolute;

  bottom: 0;

  left: 0;

  width: calc(100% - 0.25rem);

  width: calc(100% - var(--gap));

  height: 0.125rem;

  content: "";

  background-image: radial-gradient(circle, var(--color-border-gray4) 0.0625rem, transparent 0.0625rem);

  background-image: radial-gradient(circle, var(--color-border-gray4) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: calc(0.25rem + 0.0625rem * 2) calc(0.0625rem * 2);

  background-size: calc(var(--gap) + var(--r) * 2) calc(var(--r) * 2);

}

.c-interview-card .info .detail {

  position: relative;

  display: grid;

  grid-gap: 0.125rem 0;

  gap: 0.125rem 0;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  padding-right: 0.25rem;

  padding-left: 0.25rem;

  margin-top: 0.625rem;

  font-weight: 500;

}

@media screen and (min-width: 768px) {

  .c-interview-card .info .detail {

    grid-template-columns: repeat(3, auto);

    gap: 0 0.625rem;

    margin-top: 0.75rem;

  }

  .c-interview-card .info .detail::before {

    grid-area: 1/2/2/3;

    width: 0.0625rem;

    height: calc(100% - 0.5rem);

    content: "";

    background-color: var(--color-border-gray4);

  }

}

.c-interview-card .info .detail .place,

.c-interview-card .info .detail .career {

  font-size: 0.875rem;

  line-height: 1.65;

}

@media screen and (min-width: 768px) {

  .c-interview-card .info .detail .place,

  .c-interview-card .info .detail .career {

    line-height: 1.75;

  }

}

.c-interview-card .link {

  color: var(--color-text);

}

.c-interview-card .link:focus-visible .thumb .image {

  scale: 1.05;

}

@media (any-hover: hover) {

  .c-interview-card .link:hover .thumb .image {

    scale: 1.05;

  }

}

@media screen and (min-width: 768px) {

  .c-interview-card[data-size=sm] .works {

    padding: 1rem 0.25rem 0;

  }

}

@media screen and (min-width: 768px) {

  .c-interview-card[data-size=sm] .works .title {

    font-size: 1.25rem;

  }

}.c-interview-slider {

  overflow: clip;

}

.c-interview-slider .splide {

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .c-interview-slider .splide {

    margin-top: 3.5rem;

  }

}

.c-interview-slider .splide .splide__track {

  overflow: visible !important;

}

.c-interview-slider .splide .splide__slide {

  width: 100%;

}

@media screen and (min-width: 768px) {

  .c-interview-slider .splide .splide__slide {

    width: 31rem;

  }

}

.c-interview-slider .splide .control {

  display: grid;

  grid-template-columns: auto 1fr;

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .c-interview-slider .splide .control {

    margin-top: 3rem;

  }

}

.c-interview-slider .splide .control .splide__arrows {

  display: grid;

  grid-template-columns: repeat(2, 2.5rem);

  grid-column-gap: 0.75rem;

  -moz-column-gap: 0.75rem;

       column-gap: 0.75rem;

}

@media screen and (min-width: 768px) {

  .c-interview-slider .splide .control .splide__arrows {

    grid-template-columns: repeat(2, 2.75rem);

    -moz-column-gap: 1rem;

         column-gap: 1rem;

  }

}

.c-interview-slider .splide .control .splide__arrows .splide__arrow--prev {

  rotate: 90deg;

}

.c-interview-slider .splide .control .splide__arrows .splide__arrow--next {

  rotate: -90deg;

}

.c-interview-slider .splide .control .c-button-basic {

  justify-self: flex-end;

}

@media screen and (min-width: 768px) {

  .c-interview-slider[data-size=sm] .c-sec-heading {

    row-gap: 0.5rem;

  }

}

@media screen and (min-width: 768px) {

  .c-interview-slider[data-size=sm] .c-sec-heading .en {

    font-size: 0.875rem;

  }

}

.c-interview-slider[data-size=sm] .c-sec-heading .ja {

  font-size: 1.5rem;

}

@media screen and (min-width: 768px) {

  .c-interview-slider[data-size=sm] .c-sec-heading .ja {

    font-size: 2rem;

  }

}

.c-interview-slider[data-size=sm] .splide {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .c-interview-slider[data-size=sm] .splide {

    margin-top: 3.5rem;

  }

}

@media screen and (min-width: 768px) {

  .c-interview-slider[data-size=sm] .splide .splide__slide {

    width: 28.5rem;

  }

}.p-job-description-comeback .p-job-description-comeback-about {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .p-job-description-comeback-about {

    margin-top: 5rem;

  }

}

.p-job-description-comeback .p-job-description-comeback-about .info {

  padding: 1.5rem 1.25rem 2rem;

  margin-top: 2rem;

  background-color: var(--color-beige);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .p-job-description-comeback-about .info {

    padding: 3rem calc(64 / var(--inner-size) * 100cqi) 4rem;

    margin-top: 3rem;

  }

}

.p-job-description-comeback .p-job-description-comeback-about .lead {

  font-size: 1.125rem;

  line-height: 1.75;

  color: var(--color-primary);

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .p-job-description-comeback-about .lead {

    font-size: 1.5rem;

  }

}

.p-job-description-comeback .p-job-description-comeback-about .lead > span {

  background-image: linear-gradient(var(--color-white) 0, var(--color-white) 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.375rem;

}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {

.p-job-description-comeback .p-job-description-comeback-about .lead > span {

  background-image: linear-gradient(var(--color-white) 0 0);

}

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .p-job-description-comeback-about .lead > span {

    background-size: 100% 0.75rem;

  }

}

.p-job-description-comeback .p-job-description-comeback-about .desc {

  margin-top: 1rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .p-job-description-comeback-about .desc {

    margin-top: 1.25rem;

    font-size: 1rem;

    letter-spacing: 0.02em;

  }

}

.p-job-description-comeback .p-job-description-comeback-detail {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .p-job-description-comeback-detail {

    margin-top: 7rem;

  }

}

.p-job-description-comeback .c-button-square {

  padding: 0.875rem 1rem;

  margin-top: 2.5rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .c-button-square {

    max-width: 24rem;

    padding: 1.125rem;

    margin-top: 4.5rem;

    font-size: 1.25rem;

  }

}

.p-job-description-comeback .c-interview-slider {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .c-interview-slider {

    margin-top: 6rem;

  }

}

.p-job-description-comeback .c-interview-slider .c-sec-heading {

  padding-top: 3rem;

  border-top: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 768px) {

  .p-job-description-comeback .c-interview-slider .c-sec-heading {

    padding-top: 5rem;

  }

}.p-job-description-midterm .p-job-description-midterm-occupation {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-midterm .p-job-description-midterm-occupation {

    margin-top: 5rem;

  }

}

.p-job-description-midterm .p-job-description-midterm-detail {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-midterm .p-job-description-midterm-detail {

    margin-top: 7rem;

  }

}

.p-job-description-midterm .c-index-pagelist {

  margin-top: 5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-midterm .c-index-pagelist {

    margin-top: 7.75rem;

  }

}

.p-job-description-midterm .c-button-square {

  padding: 0.875rem 1rem;

  margin-top: 2.5rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-midterm .c-button-square {

    max-width: 24rem;

    padding: 1.125rem;

    margin-top: 4.5rem;

    font-size: 1.25rem;

  }

}

.p-job-description-midterm .c-interview-slider {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-midterm .c-interview-slider {

    margin-top: 6rem;

  }

}

.p-job-description-midterm .c-interview-slider .c-sec-heading {

  padding-top: 3rem;

  border-top: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 768px) {

  .p-job-description-midterm .c-interview-slider .c-sec-heading {

    padding-top: 5rem;

  }

}.p-job-description-newgraduate .p-job-description-newgraduate-detail {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-newgraduate .p-job-description-newgraduate-detail {

    margin-top: 5rem;

  }

}

.p-job-description-newgraduate .c-index-pagelist {

  margin-top: 5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-newgraduate .c-index-pagelist {

    margin-top: 7.75rem;

  }

}

.p-job-description-newgraduate .c-button-square {

  padding: 0.875rem 1rem;

  margin-top: 2.5rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-newgraduate .c-button-square {

    max-width: 24rem;

    padding: 1.125rem;

    margin-top: 4.5rem;

    font-size: 1.25rem;

  }

}

.p-job-description-newgraduate .c-interview-slider {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-job-description-newgraduate .c-interview-slider {

    margin-top: 6rem;

  }

}

.p-job-description-newgraduate .c-interview-slider .c-sec-heading {

  padding-top: 3rem;

  border-top: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 768px) {

  .p-job-description-newgraduate .c-interview-slider .c-sec-heading {

    padding-top: 5rem;

  }

}.c-pagination {

  display: grid;

  grid-template-areas: "prev num next";

  grid-template-columns: repeat(3, auto);

  grid-column-gap: 2.125rem;

  -moz-column-gap: 2.125rem;

       column-gap: 2.125rem;

  align-items: center;

  justify-content: center;

  width: -moz-fit-content;

  width: fit-content;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .c-pagination {

    -moz-column-gap: 2.875rem;

         column-gap: 2.875rem;

  }

}

.c-pagination .prev .icon,

.c-pagination .next .icon {

  width: 2rem;

}

.c-pagination .prev:focus-visible[href] .icon,

.c-pagination .next:focus-visible[href] .icon {

  --icon-bg: var(--color-primary);

  --icon-hover-color: var(--color-primary);

}

@media (any-hover: hover) {

  .c-pagination .prev:hover[href] .icon,

  .c-pagination .next:hover[href] .icon {

    --icon-bg: var(--color-primary);

    --icon-hover-color: var(--color-primary);

  }

}

:where(.c-pagination .prev:not([href]),

.c-pagination .next:not([href])) {

  pointer-events: none;

}

.c-pagination .prev {

  grid-area: prev;

  rotate: 90deg;

}

.c-pagination .next {

  grid-area: next;

  rotate: -90deg;

}

.c-pagination .num {

  display: flex;

  grid-area: num;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  align-items: center;

}

@media screen and (min-width: 768px) {

  .c-pagination .num {

    -moz-column-gap: 1rem;

         column-gap: 1rem;

  }

}

.c-pagination .link {

  display: grid;

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

  min-width: 1.75rem;

  aspect-ratio: 1;

  font-family: var(--font-inter);

  font-weight: 700;

  line-height: 1;

  color: var(--color-text);

  letter-spacing: 0.04em;

  border-radius: 50%;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-pagination .link {

    font-size: 1rem;

  }

}

.c-pagination .link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .c-pagination .link:hover {

    color: var(--color-primary);

  }

}

.c-pagination .link[aria-current=page] {

  color: var(--color-white);

  background-color: var(--color-primary);

}

.c-pagination .dot {

  --r: 0.0625rem;

  --gap: 0.125rem;

  width: 0.75rem;

  height: 0.125rem;

  margin-right: 0.3125rem;

  margin-left: 0.3125rem;

  background-image: radial-gradient(circle, var(--color-text) 0.0625rem, transparent 0.0625rem);

  background-image: radial-gradient(circle, var(--color-text) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: calc(0.0625rem * 2 + 0.125rem) calc(0.0625rem * 2);

  background-size: calc(var(--r) * 2 + var(--gap)) calc(var(--r) * 2);

}

@media screen and (min-width: 768px) {

  .c-pagination .dot {

    margin-right: 0.375rem;

    margin-left: 0.375rem;

  }

}.p-news {

  margin-top: 3rem;

}

@media screen and (min-width: 768px) {

  .p-news {

    margin-top: 4rem;

  }

}

.p-news .c-pagination {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-news .c-pagination {

    margin-top: 5rem;

  }

}

.p-news .article {

  border-top: 0.0625rem solid var(--color-border-gray2);

}

.p-news .article:last-of-type {

  border-bottom: 0.0625rem solid var(--color-border-gray2);

}

.p-news .article .link {

  display: grid;

  grid-template-columns: 1fr 2rem;

  grid-column-gap: 1rem;

  -moz-column-gap: 1rem;

       column-gap: 1rem;

  align-items: center;

  padding-top: 1.75rem;

  padding-bottom: 1.75rem;

  color: var(--color-text);

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-news .article .link {

    grid-template-columns: 1fr 2.5rem;

    -moz-column-gap: calc(64 / var(--inner-size) * 100cqi);

         column-gap: calc(64 / var(--inner-size) * 100cqi);

    padding-top: 2rem;

    padding-bottom: 2rem;

  }

}

.p-news .article .link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-news .article .link:hover {

    color: var(--color-primary);

  }

}

.p-news .article .date {

  font-family: var(--font-inter);

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--color-primary);

  letter-spacing: 0.02em;

}

.p-news .article .title {

  margin-top: 0.75rem;

  font-size: 1rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-news .article .title {

    margin-top: 1rem;

    letter-spacing: 0.02em;

  }

}.p-news-detail {

  display: grid;

}

.p-news-detail > .article {

  margin-top: 3rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article {

    margin-top: 5.375rem;

  }

}

.p-news-detail > .article .heading {

  padding-bottom: 1.5rem;

  border-bottom: 0.0625rem solid var(--color-bg-gray2);

}

.p-news-detail > .article .info {

  display: grid;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .info {

    grid-template-columns: auto 1fr;

    gap: calc(20 / var(--inner-size) * 100cqi);

  }

}

.p-news-detail > .article .date {

  font-family: var(--font-inter);

  font-size: 0.875rem;

  font-weight: 400;

  color: var(--color-disabled);

  letter-spacing: 0.02em;

}

.p-news-detail > .article .title {

  margin-top: 1.5rem;

  font-size: 1.75rem;

  font-weight: 500;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .title {

    font-size: 2.25rem;

    letter-spacing: -0.01em;

  }

}

.p-news-detail > .article .body {

  padding-top: 3.5rem;

  padding-bottom: 4rem;

  border-bottom: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body {

    padding-top: 5rem;

    padding-bottom: 6.5rem;

  }

}

.p-news-detail > .article .body .body-inner {

  max-width: 50rem;

}

.p-news-detail > .article .body .body-inner > :where(*):first-child {

  margin-top: 0;

}

.p-news-detail > .article .body p {

  margin-top: 1rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body p {

    margin-top: 1.5rem;

  }

}

.p-news-detail > .article .body a {

  font-weight: 500;

  color: var(--color-primary);

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.03125rem;

}

.p-news-detail > .article .body a[target=_blank] {

  --icon-size: 0.75rem;

  --icon-gap: 0.5rem;

  margin-right: calc((0.75rem + 0.5rem) * 1);

  margin-right: calc((var(--icon-size) + var(--icon-gap)) * 1);

}

.p-news-detail > .article .body a[target=_blank]::after {

  display: inline-block;

  width: var(--icon-size);

  aspect-ratio: 1;

  margin-right: calc((var(--icon-size) + var(--icon-gap)) * -1);

  margin-left: var(--icon-gap);

  vertical-align: -5%;

  content: "";

  background-color: currentcolor;

  -webkit-mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");

          mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");

  -webkit-mask-repeat: no-repeat;

          mask-repeat: no-repeat;

  -webkit-mask-position: center;

          mask-position: center;

  -webkit-mask-size: contain;

          mask-size: contain;

}

.p-news-detail > .article .body img {

  margin-top: 3.5rem;

  margin-bottom: 3rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body img {

    margin-top: 5rem;

    margin-bottom: 4.5rem;

  }

}

.p-news-detail > .article .body figure {

  margin-top: 3.5rem;

  margin-bottom: 3rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body figure {

    margin-top: 5rem;

    margin-bottom: 4.5rem;

  }

}

.p-news-detail > .article .body figure img {

  margin-top: 0;

  margin-bottom: 0;

}

.p-news-detail > .article .body figure figcaption {

  width: -moz-fit-content;

  width: fit-content;

  margin-top: 0.75rem;

  font-size: 0.875rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body figure figcaption {

    margin-left: auto;

  }

}

.p-news-detail > .article .body ol,

.p-news-detail > .article .body ul {

  display: grid;

  grid-row-gap: 0.375rem;

  row-gap: 0.375rem;

  margin-top: 1.5rem;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body ol,

  .p-news-detail > .article .body ul {

    margin-top: 2rem;

  }

}

.p-news-detail > .article .body ol li,

.p-news-detail > .article .body ul li {

  --gap: 0.5rem;

}

.p-news-detail > .article .body ol li::before,

.p-news-detail > .article .body ul li::before {

  display: inline-block;

  margin-right: var(--gap);

}

.p-news-detail > .article .body ol li > :where(*),

.p-news-detail > .article .body ul li > :where(*) {

  margin-top: 0;

}

.p-news-detail > .article .body ol li > ol,

.p-news-detail > .article .body ul li > ol {

  margin-top: 0.375rem;

  counter-reset: num;

}

.p-news-detail > .article .body ol li > ol :where(li),

.p-news-detail > .article .body ul li > ol :where(li) {

  margin-left: calc(1em + var(--gap));

}

.p-news-detail > .article .body ol li > ul,

.p-news-detail > .article .body ul li > ul {

  margin-top: 0.375rem;

}

.p-news-detail > .article .body ol li > ul :where(li),

.p-news-detail > .article .body ul li > ul :where(li) {

  margin-left: calc(0.25rem + var(--gap));

}

.p-news-detail > .article .body ol li > ul :where(li)::before,

.p-news-detail > .article .body ul li > ul :where(li)::before {

  background-color: transparent;

  border: 0.0625rem solid currentcolor;

}

.p-news-detail > .article .body ol li {

  counter-increment: num;

}

.p-news-detail > .article .body ol li::before {

  display: inline-block;

  content: counter(num) ". ";

}

.p-news-detail > .article .body ul li {

  --marker-size: 0.25rem;

}

.p-news-detail > .article .body ul li::before {

  width: var(--marker-size);

  aspect-ratio: 1;

  vertical-align: 18%;

  content: "";

  background-color: currentcolor;

  border-radius: 50%;

}

.p-news-detail > .article .body h2,

.p-news-detail > .article .body h3,

.p-news-detail > .article .body h4,

.p-news-detail > .article .body h5,

.p-news-detail > .article .body h6 {

  font-weight: 500;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h2,

  .p-news-detail > .article .body h3,

  .p-news-detail > .article .body h4,

  .p-news-detail > .article .body h5,

  .p-news-detail > .article .body h6 {

    line-height: 1.65;

  }

}

.p-news-detail > .article .body h2 {

  margin-top: 3.5rem;

  font-size: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h2 {

    margin-top: 5rem;

    font-size: 2rem;

  }

}

.p-news-detail > .article .body h2 + * {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h2 + * {

    margin-top: 2.5rem;

  }

}

.p-news-detail > .article .body h3 {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.625rem;

  -moz-column-gap: 0.625rem;

       column-gap: 0.625rem;

  margin-top: 2rem;

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h3 {

    -moz-column-gap: 0.75rem;

         column-gap: 0.75rem;

    margin-top: 2.5rem;

    font-size: 1.5rem;

  }

}

.p-news-detail > .article .body h3::before {

  --marker-size: 0.625rem;

  position: relative;

  top: 0.125rem;

  display: inline-block;

  width: 0.625rem;

  width: var(--marker-size);

  aspect-ratio: 1;

  margin-top: calc((1lh - 0.625rem) / 2);

  margin-top: calc((1lh - var(--marker-size)) / 2);

  margin-bottom: calc((1lh - 0.625rem) / 2);

  margin-bottom: calc((1lh - var(--marker-size)) / 2);

  content: "";

  background-color: currentcolor;

  border-radius: 50%;

}

.p-news-detail > .article .body h3 + * {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h3 + * {

    margin-top: 2rem;

  }

}

.p-news-detail > .article .body h4,

.p-news-detail > .article .body h5 {

  margin-top: 2.25rem;

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h4,

  .p-news-detail > .article .body h5 {

    margin-top: 2.5rem;

  }

}

.p-news-detail > .article .body h4 + *,

.p-news-detail > .article .body h5 + * {

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .body h4 + *,

  .p-news-detail > .article .body h5 + * {

    margin-top: 1rem;

  }

}

.p-news-detail > .article .body h6 {

  margin-top: 2rem;

  font-size: 1rem;

}

.p-news-detail > .article .body h6 + * {

  margin-top: 0.625rem;

}

.p-news-detail > .article .linktop {

  margin-top: 2.5rem;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-news-detail > .article .linktop {

    margin-top: 3.5rem;

  }

}.p-interview-detail {

  display: grid;

}

.p-interview-detail > .article {

  margin-top: 3rem;

  overflow: clip;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article {

    margin-top: 3.375rem;

  }

}

.p-interview-detail > .article .head .title {

  display: grid;

  grid-row-gap: 0.375rem;

  row-gap: 0.375rem;

  justify-content: center;

  font-weight: 500;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .title {

    row-gap: 1.5rem;

  }

}

.p-interview-detail > .article .head .title .en {

  font-family: var(--font-poppins);

  font-size: 1rem;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .title .en {

    font-size: 1.25rem;

  }

}

.p-interview-detail > .article .head .title .ja {

  font-size: 1.75rem;

  letter-spacing: -0.04em;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .title .ja {

    font-size: 2.75rem;

  }

}

.p-interview-detail > .article .head .detail {

  display: grid;

  align-items: center;

  justify-content: center;

  margin-top: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .detail {

    grid-template-columns: 5.75rem auto;

    -moz-column-gap: 2rem;

         column-gap: 2rem;

    margin-top: 1.5rem;

  }

}

.p-interview-detail > .article .head .detail .icon {

  width: 4.5rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .detail .icon {

    width: 5.5rem;

  }

}

.p-interview-detail > .article .head .detail .info {

  margin-top: 1rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  text-align: center;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .detail .info {

    margin-top: 0;

    font-size: 1rem;

    text-align: left;

  }

}

.p-interview-detail > .article .head .detail .info .lower {

  margin-top: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .detail .info .lower {

    margin-top: 0.5rem;

  }

}

.p-interview-detail > .article .head .mv {

  height: calc(210 / var(--inner-size) * 100cqi);

  margin-top: 2.5rem;

  overflow: clip;

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .mv {

    height: 30rem;

    padding-right: calc(40 / var(--inner-size) * 100cqi);

    padding-left: calc(40 / var(--inner-size) * 100cqi);

    margin-top: 5rem;

    margin-right: calc(50% - 50vw);

    margin-left: calc(50% - 50vw);

    border-radius: 0.75rem;

  }

}

.p-interview-detail > .article .head .mv picture,

.p-interview-detail > .article .head .mv img {

  width: 100%;

  height: 100%;

  margin-right: auto;

  margin-left: auto;

  -o-object-fit: cover;

     object-fit: cover;

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .head .mv picture,

  .p-interview-detail > .article .head .mv img {

    max-width: 75rem;

    border-radius: 0.75rem;

  }

}

.p-interview-detail > .article .overview {

  display: grid;

  grid-row-gap: 2rem;

  row-gap: 2rem;

  padding: 2rem 1.5rem 2.5rem;

  margin-top: 3rem;

  background-color: var(--color-light-blue2);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .overview {

    row-gap: 2.5rem;

    padding: 3rem calc(56 / var(--inner-size) * 100cqi) 4rem;

    margin-top: 5.5rem;

    border-radius: 0.75rem;

  }

}

.p-interview-detail > .article .overview .overview-title {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.625rem;

  -moz-column-gap: 0.625rem;

       column-gap: 0.625rem;

  width: -moz-fit-content;

  width: fit-content;

  padding: 0 0.25rem 0.625rem;

  font-size: 1.125rem;

  color: var(--color-primary);

  letter-spacing: -0.02em;

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .overview .overview-title {

    -moz-column-gap: 0.875rem;

         column-gap: 0.875rem;

    padding-bottom: 0.375rem;

    font-size: 1.5rem;

  }

}

.p-interview-detail > .article .overview .overview-title + * {

  margin-top: 0.875rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .overview .overview-title + * {

    margin-top: 1.5rem;

  }

}

.p-interview-detail > .article .overview .overview-title > svg {

  --marker-size: 1.25rem;

  display: inline-block;

  width: 1.25rem;

  width: var(--marker-size);

  margin-top: calc((1lh - 1.25rem) / 2);

  margin-bottom: calc((1lh - 1.25rem) / 2);

  margin-top: calc((1lh - var(--marker-size)) / 2);

  margin-bottom: calc((1lh - var(--marker-size)) / 2);

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .overview .overview-title > svg {

    --marker-size: 1.5rem;

  }

}

.p-interview-detail > .article .overview .overview-desc {

  font-size: 0.875rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .overview .overview-desc {

    font-size: 1rem;

  }

}

.p-interview-detail > .article .body {

  margin-top: 4rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .body {

    max-width: 52.5rem;

    margin-top: 6rem;

  }

}

.p-interview-detail > .article .faq {

  counter-increment: num;

}

.p-interview-detail > .article .faq + .faq {

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .faq + .faq {

    margin-top: 4rem;

  }

}

.p-interview-detail > .article .faq .faq-title {

  display: grid;

  grid-gap: 0.5rem;

  gap: 0.5rem;

  line-height: 1.65;

  color: var(--color-primary);

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .faq .faq-title {

    grid-template-columns: max-content 1fr;

    gap: 1rem;

    font-size: 1.75rem;

    text-align: left;

  }

}

.p-interview-detail > .article .faq .faq-title::before {

  position: relative;

  width: -moz-fit-content;

  width: fit-content;

  height: -moz-fit-content;

  height: fit-content;

  padding: 0.0625rem 1.25rem 0.125rem;

  margin-right: auto;

  margin-left: auto;

  font-family: var(--font-inter);

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.5;

  color: var(--color-white);

  letter-spacing: 0.02em;

  content: "Q" counter(num);

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .faq .faq-title::before {

    top: 0.5rem;

    display: inline-block;

    padding: 0.0625rem 1.25rem;

    font-size: 1.25rem;

  }

}

.p-interview-detail > .article .faq .faq-title + * {

  margin-top: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .faq .faq-title + * {

    margin-top: 1rem;

  }

}

.p-interview-detail > .article .faq .faq-title .sm {

  font-size: 1rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .faq .faq-title .sm {

    font-size: 1.375rem;

  }

}

.p-interview-detail > .article .faq .faq-desc {

  font-size: 0.875rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-interview-detail > .article .faq .faq-desc {

    font-size: 1rem;

  }

}

.p-interview-detail .c-interview-slider {

  margin-top: 4.5rem;

}

@media screen and (min-width: 768px) {

  .p-interview-detail .c-interview-slider {

    margin-top: 9rem;

  }

}.p-interview-question .c-index-pagelist {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-interview-question .c-index-pagelist {

    margin-top: 8.5rem;

  }

}

.p-interview-question .p-interview-question-reason {

  margin-top: 3rem;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason {

    margin-top: 6rem;

  }

}

.p-interview-question .p-interview-question-reason .title {

  width: -moz-fit-content;

  width: fit-content;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.25rem;

  line-height: 1.65;

  color: var(--color-primary);

  text-align: center;

  letter-spacing: 0.02em;

  background-image: linear-gradient(var(--color-light-blue2) 0, var(--color-light-blue2) 0);

  background-repeat: no-repeat;

  background-position: bottom left;

  background-size: 100% 0.75rem;

}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {

.p-interview-question .p-interview-question-reason .title {

  background-image: linear-gradient(var(--color-light-blue2) 0 0);

}

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .title {

    font-size: 2rem;

    text-align: left;

    background-size: 100% 1rem;

  }

}

.p-interview-question .p-interview-question-reason .body {

  display: grid;

  grid-row-gap: 1.25rem;

  row-gap: 1.25rem;

  padding: 2rem 0 3.5rem;

  margin-top: 2rem;

  border-radius: 1.25rem;

}

@media screen and (max-width: 767px) {

  .p-interview-question .p-interview-question-reason .body {

    border-image-source: linear-gradient(var(--color-beige) 0, var(--color-beige) 0);

    border-image-slice: fill 0;

    border-image-outset: 0 100vw;

  }



@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {

.p-interview-question .p-interview-question-reason .body {

    border-image-source: linear-gradient(var(--color-beige) 0 0);

  }

}

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .body {

    row-gap: 2.5rem;

    padding: 3rem calc(48 / var(--inner-size) * 100cqi) 3.5rem;

    margin-top: 4rem;

    background-color: var(--color-beige);

  }

}

.p-interview-question .p-interview-question-reason .item {

  padding: 1.5rem 1rem 2rem;

  background-color: var(--color-white);

  border-radius: 0.625rem;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .item {

    padding: 2.5rem calc(40 / var(--inner-size) * 100cqi);

    border-radius: 0.75rem;

  }

}

.p-interview-question .p-interview-question-reason .heading {

  display: grid;

  grid-gap: 0.75rem;

  gap: 0.75rem;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .heading {

    grid-template-columns: max-content 1fr;

    gap: calc(20 / var(--inner-size) * 100cqi);

    align-items: center;

    text-align: left;

  }

}

.p-interview-question .p-interview-question-reason .icon {

  width: 4.5rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .icon {

    width: 4.75rem;

  }

}

.p-interview-question .p-interview-question-reason .job {

  font-size: 1.125rem;

  color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .job {

    font-size: 1.5rem;

  }

}

.p-interview-question .p-interview-question-reason .detail {

  margin-top: 0.125rem;

  font-size: 0.875rem;

  font-weight: 500;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .detail {

    font-size: 1rem;

  }

}

.p-interview-question .p-interview-question-reason .desc {

  margin-top: 1.25rem;

  line-height: 1.65;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .desc {

    font-size: 1rem;

    line-height: 1.75;

  }

}

.p-interview-question .p-interview-question-reason .skill {

  margin-top: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .skill {

    margin-top: 1.5rem;

  }

}

.p-interview-question .p-interview-question-reason .skill .skill-label {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.125rem 0.75rem 0.25rem;

  font-size: 0.875rem;

  font-weight: 700;

  line-height: 1.5;

  color: var(--color-white);

  letter-spacing: -0.02em;

  background-color: var(--color-primary);

  border-radius: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .skill .skill-label {

    padding: 0.375rem 1rem 0.5rem;

    line-height: 1;

    letter-spacing: 0;

    border-radius: 100vmax;

  }

}

.p-interview-question .p-interview-question-reason .skill .skill-detail {

  margin-top: 0.5rem;

  line-height: 1.65;

}

@media screen and (min-width: 768px) {

  .p-interview-question .p-interview-question-reason .skill .skill-detail {

    line-height: 1.75;

  }

}.p-workstyle-welfare {

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare {

    margin-top: 6rem;

  }

}

.p-workstyle-welfare .section {

  position: relative;

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section {

    margin-top: 3.5rem;

  }

}

.p-workstyle-welfare .section:not(:first-of-type) {

  padding-top: 1.75rem;

  margin-top: 1.75rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section:not(:first-of-type) {

    padding-top: 2rem;

    margin-top: 2.5rem;

  }

}

.p-workstyle-welfare .section:not(:first-of-type)::before {

  --r: 0.0625rem;

  position: absolute;

  top: 0;

  left: 0;

  width: calc(100% - 0.0625rem);

  height: 0.125rem;

  content: "";

  background-image: radial-gradient(circle, var(--color-bg-gray2) 0.0625rem, transparent 0.0625rem);

  background-image: radial-gradient(circle, var(--color-bg-gray2) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: 0.375rem calc(0.0625rem * 2);

  background-size: 0.375rem calc(var(--r) * 2);

}

.p-workstyle-welfare .section-desc {

  max-width: 46.875rem;

  margin-top: 0.75rem;

  line-height: 1.75;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-desc {

    margin-top: 1.25rem;

    letter-spacing: -0.02em;

  }

}

.p-workstyle-welfare .section-desc sup {

  position: relative;

  top: 0.125rem;

  padding-left: 0.0625rem;

  font-size: 0.75rem;

}

.p-workstyle-welfare .section-list {

  display: grid;

  grid-row-gap: 1rem;

  row-gap: 1rem;

  margin-top: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-list {

    row-gap: 0.375rem;

  }

}

.p-workstyle-welfare .section-item {

  display: grid;

  grid-gap: 0.125rem;

  gap: 0.125rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-item {

    grid-template-columns: max-content 1fr;

    gap: 0.375rem;

  }

}

.p-workstyle-welfare .section-item-title {

  display: grid;

  grid-template-columns: 1fr max-content;

  grid-column-gap: 0.375rem;

  -moz-column-gap: 0.375rem;

       column-gap: 0.375rem;

  align-items: center;

  width: -moz-fit-content;

  width: fit-content;

  height: -moz-fit-content;

  height: fit-content;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-item-title {

    font-size: 1rem;

  }

}

.p-workstyle-welfare .section-item-title::after {

  --r: 0.09375rem;

  --gap: 0.1875rem;

  width: 1rem;

  height: 0.125rem;

  content: "";

  background-image: radial-gradient(circle, currentcolor 0.09375rem, transparent 0.09375rem);

  background-image: radial-gradient(circle, currentcolor var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: calc(0.09375rem * 2 + 0.1875rem) calc(0.09375rem * 2);

  background-size: calc(var(--r) * 2 + var(--gap)) calc(var(--r) * 2);

}

.p-workstyle-welfare .section-certification {

  position: relative;

  padding-top: 2.5rem;

  margin-top: 1.75rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-certification {

    padding-top: 4.5rem;

    margin-top: 2.5rem;

  }

}

.p-workstyle-welfare .section-certification::before {

  --r: 0.0625rem;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 0.125rem;

  content: "";

  background-image: radial-gradient(circle, var(--color-bg-gray2) 0.0625rem, transparent 0.0625rem);

  background-image: radial-gradient(circle, var(--color-bg-gray2) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: 0.375rem calc(0.0625rem * 2);

  background-size: 0.375rem calc(var(--r) * 2);

}

.p-workstyle-welfare .section-certification-list {

  display: grid;

  grid-gap: 0.875rem;

  gap: 0.875rem;

  padding: 1.25rem;

  background-color: var(--color-light-blue);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-certification-list {

    grid-template-columns: repeat(2, 1fr);

    gap: calc(24 / var(--inner-size) * 100cqi);

    padding: 2rem calc(32 / var(--inner-size) * 100cqi);

  }

}

.p-workstyle-welfare .section-certification-item {

  display: grid;

  grid-template-columns: auto 1fr;

  grid-column-gap: 1.25rem;

  -moz-column-gap: 1.25rem;

       column-gap: 1.25rem;

  align-items: center;

  padding: 1rem 1.25rem 1rem 1.5rem;

  background-color: var(--color-white);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-certification-item {

    -moz-column-gap: calc(32 / var(--inner-size) * 100cqi);

         column-gap: calc(32 / var(--inner-size) * 100cqi);

    padding: 1.25rem calc(40 / var(--inner-size) * 100cqi);

  }

}

.p-workstyle-welfare .section-certification-thumb {

  padding-top: 0.1875rem;

  padding-right: 1.25rem;

  padding-bottom: 0.1875rem;

  border-right: 0.0625rem solid var(--color-bg-gray2);

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-certification-thumb {

    padding-top: 0;

    padding-right: 2.5rem;

    padding-bottom: 0;

  }

}

.p-workstyle-welfare .section-certification-thumb img {

  width: 3.875rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-certification-thumb img {

    width: 4.375rem;

  }

}

.p-workstyle-welfare .section-certification-desc {

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.7;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-certification-desc {

    font-size: 1rem;

  }

}

.p-workstyle-welfare .section-table {

  margin-top: 1.25rem;

  margin-bottom: 1.75rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-table {

    margin-top: 2rem;

    margin-bottom: 3rem;

  }

}

.p-workstyle-welfare .section-table table {

  width: 39.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-welfare .section-table table {

    width: 39.0625rem;

  }

}

.p-workstyle-welfare .section-table table th,

.p-workstyle-welfare .section-table table td {

  width: 25%;

}.p-workstyle-career {

  margin-top: 4.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career {

    margin-top: 7.75rem;

  }

}

.p-workstyle-career .anchor {

  display: grid;

  grid-template-areas: "item1" "arrow" "item2" "plus" "item3";

  margin-top: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor {

    grid-template-areas: "item1 arrow item2 plus item3" "item1 arrow item2 plus item3" "item1 arrow item2 plus item3";

    grid-template-columns: 1fr max-content 1fr max-content 1fr;

    margin-top: 4.5rem;

  }

}

.p-workstyle-career .anchor::before {

  --r: 0.125rem;

  --g: calc(1.73205 * var(--r)) left var(--r), #000 98%, rgba(0,0,0,0) 101%;

  grid-area: arrow;

  align-self: center;

  justify-self: center;

  align-self: center;

  justify-self: center;

  place-self: center;

  width: 1rem;

  height: 1.1875rem;

  margin: 1rem 0 2rem;

  clip-path: polygon(100% 50%, 0 100%, 0 0);

  content: "";

  background-color: var(--color-primary);

  -webkit-mask-image: conic-gradient(from 60deg at calc(3 * 0.125rem / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0), radial-gradient(0.125rem at calc(100% - 2 * 0.125rem) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(0.125rem at top 0.21651rem left 0.125rem, #000 98%, rgba(0,0,0,0) 101%), radial-gradient(0.125rem at bottom 0.21651rem left 0.125rem, #000 98%, rgba(0,0,0,0) 101%);

          mask-image: conic-gradient(from 60deg at calc(3 * 0.125rem / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0), radial-gradient(0.125rem at calc(100% - 2 * 0.125rem) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(0.125rem at top 0.21651rem left 0.125rem, #000 98%, rgba(0,0,0,0) 101%), radial-gradient(0.125rem at bottom 0.21651rem left 0.125rem, #000 98%, rgba(0,0,0,0) 101%);

  -webkit-mask-image: conic-gradient(from 60deg at calc(3 * 0.125rem / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0), radial-gradient(0.125rem at calc(100% - 2 * 0.125rem) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(0.125rem at top calc(1.73205 * 0.125rem) left 0.125rem, #000 98%, rgba(0,0,0,0) 101%), radial-gradient(0.125rem at bottom calc(1.73205 * 0.125rem) left 0.125rem, #000 98%, rgba(0,0,0,0) 101%);

  -webkit-mask-image: conic-gradient(from 60deg at calc(3 * var(--r) / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0), radial-gradient(var(--r) at calc(100% - 2 * var(--r)) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(var(--r) at top var(--g)), radial-gradient(var(--r) at bottom var(--g));

          mask-image: conic-gradient(from 60deg at calc(3 * 0.125rem / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0), radial-gradient(0.125rem at calc(100% - 2 * 0.125rem) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(0.125rem at top calc(1.73205 * 0.125rem) left 0.125rem, #000 98%, rgba(0,0,0,0) 101%), radial-gradient(0.125rem at bottom calc(1.73205 * 0.125rem) left 0.125rem, #000 98%, rgba(0,0,0,0) 101%);

          mask-image: conic-gradient(from 60deg at calc(3 * var(--r) / 2 - 100%), #000 60deg, rgba(0, 0, 0, 0) 0), radial-gradient(var(--r) at calc(100% - 2 * var(--r)) 50%, #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(var(--r) at top var(--g)), radial-gradient(var(--r) at bottom var(--g));

  -webkit-mask-repeat: no-repeat;

          mask-repeat: no-repeat;

  -webkit-mask-position: 0 0;

          mask-position: 0 0;

  -webkit-mask-size: calc(100% - 3 * 0.125rem / 2) 100%, auto, auto, auto;

          mask-size: calc(100% - 3 * 0.125rem / 2) 100%, auto, auto, auto;

  -webkit-mask-size: calc(100% - 3 * var(--r) / 2) 100%, auto, auto, auto;

          mask-size: calc(100% - 3 * var(--r) / 2) 100%, auto, auto, auto;

  rotate: 90deg;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor::before {

    margin: 0 1rem 0 1.125rem;

    rotate: 0deg;

  }

}

.p-workstyle-career .anchor .anchor-plus {

  display: grid;

  grid-area: plus;

  grid-template-areas: "line";

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

  align-self: center;

  justify-self: center;

  align-self: center;

  justify-self: center;

  place-self: center;

  width: 1.375rem;

  aspect-ratio: 1;

  margin: 1rem 0 2rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor .anchor-plus {

    margin: 0 0.8125rem 0 0.9375rem;

  }

}

.p-workstyle-career .anchor .anchor-plus::before, .p-workstyle-career .anchor .anchor-plus::after {

  grid-area: line;

  width: 100%;

  height: 0.25rem;

  content: "";

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

.p-workstyle-career .anchor .anchor-plus::after {

  rotate: 90deg;

}

.p-workstyle-career .anchor .anchor-item {

  display: grid;

  padding: 0 1.25rem 1.25rem;

  color: var(--color-text);

  border: 0.125rem solid var(--color-primary);

  border-radius: 0.5rem;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor .anchor-item {

    grid-template-rows: subgrid;

    grid-row: span 3;

    padding: 0 calc(20 / var(--inner-size) * 100cqi) 1.25rem;

  }

}

.p-workstyle-career .anchor .anchor-item:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-workstyle-career .anchor .anchor-item:hover {

    color: var(--color-primary);

  }

}

.p-workstyle-career .anchor .anchor-item:first-of-type {

  grid-area: item1;

}

.p-workstyle-career .anchor .anchor-item:nth-of-type(2) {

  grid-area: item2;

}

.p-workstyle-career .anchor .anchor-item:last-of-type {

  grid-area: item3;

}

.p-workstyle-career .anchor .anchor-career {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.25rem 3rem 0.3125rem;

  margin-top: -1rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.125rem;

  font-weight: 700;

  color: var(--color-white);

  letter-spacing: 0.04em;

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor .anchor-career {

    padding: 0.25rem calc(48 / var(--inner-size) * 100cqi) 0.4375rem;

    margin-top: -1.25rem;

  }

}

.p-workstyle-career .anchor .anchor-title {

  align-self: center;

  margin-top: 1rem;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor .anchor-title {

    margin-top: 1.25rem;

    font-size: 1.125rem;

  }

}

.p-workstyle-career .anchor .anchor-icon {

  width: 1.75rem;

  margin-top: 0.75rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .anchor .anchor-icon {

    margin-top: 1.25rem;

  }

}

.p-workstyle-career .career {

  display: grid;

  grid-row-gap: 3.5rem;

  row-gap: 3.5rem;

  padding-top: 3.5rem;

  padding-bottom: 4rem;

  margin-top: 4rem;

  border-image-source: linear-gradient(var(--color-light-blue) 0, var(--color-light-blue) 0);

  border-image-slice: fill 0;

  border-image-outset: 0 100vw;

}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {

.p-workstyle-career .career {

  border-image-source: linear-gradient(var(--color-light-blue) 0 0);

}

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .career {

    row-gap: 7rem;

    padding-top: 6.5rem;

    padding-bottom: 7.5rem;

    margin-top: 6.5rem;

  }

}

.p-workstyle-career .section-heading-career {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.125rem 1.25rem 0.25rem;

  margin-right: auto;

  margin-left: auto;

  font-weight: 700;

  color: var(--color-white);

  letter-spacing: 0.04em;

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .section-heading-career {

    padding: 0.125rem calc(32 / var(--inner-size) * 100cqi) 0.3125rem;

  }

}

.p-workstyle-career .section-heading-title {

  width: -moz-fit-content;

  width: fit-content;

  margin-top: 0.75rem;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.375rem;

  line-height: 1.4;

  text-align: center;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .section-heading-title {

    margin-top: 0.625rem;

    font-size: 2rem;

    line-height: 1.5;

    text-align: left;

  }

}

.p-workstyle-career .section-content {

  padding: 2rem 1.75rem 2.5rem;

  margin-top: 2rem;

  background-color: var(--color-white);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .section-content {

    padding: 3.5rem calc(56 / var(--inner-size) * 100cqi);

    margin-top: 3.5rem;

    border-radius: 0.625rem;

  }

}

.p-workstyle-career .subsection {

  position: relative;

}

.p-workstyle-career .subsection:not(:first-of-type) {

  padding-top: 1.5rem;

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection:not(:first-of-type) {

    padding-top: 2rem;

    margin-top: 2.5rem;

  }

}

.p-workstyle-career .subsection:not(:first-of-type)::before {

  --r: 0.0625rem;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 0.125rem;

  content: "";

  background-image: radial-gradient(circle, var(--color-bg-gray2) 0.0625rem, transparent 0.0625rem);

  background-image: radial-gradient(circle, var(--color-bg-gray2) var(--r), transparent var(--r));

  background-position: 0 0;

  background-size: 0.375rem calc(0.0625rem * 2);

  background-size: 0.375rem calc(var(--r) * 2);

}

.p-workstyle-career .subsection-desc {

  max-width: 46.25rem;

  margin-top: 0.75rem;

  line-height: 1.65;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-desc {

    margin-top: 1.25rem;

    font-size: 1rem;

    line-height: 1.75;

    letter-spacing: -0.02em;

  }

}

.p-workstyle-career .subsection-example {

  padding: 1rem 1rem 1.5rem;

  margin-top: 1.25rem;

  background-color: var(--color-bg-gray);

  border-radius: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-example {

    padding: 1.5rem calc(24 / var(--inner-size) * 100cqi) 2rem;

    margin-top: 1.5rem;

    border-radius: 0.375rem;

  }

}

.p-workstyle-career .subsection-example-label {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.1875rem 0.75rem 0.25rem;

  font-size: 0.8125rem;

  font-weight: 700;

  color: var(--color-white);

  letter-spacing: -0.03em;

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-example-label {

    padding: 0.125rem calc(18 / var(--inner-size) * 100cqi) 0.3125rem;

    font-size: 0.875rem;

    letter-spacing: 0;

  }

}

.p-workstyle-career .subsection-example-desc {

  margin-top: 0.625rem;

  font-size: 0.875rem;

  font-weight: 500;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-example-desc {

    margin-top: 0.75rem;

  }

}

.p-workstyle-career .subsection-list {

  display: grid;

  grid-row-gap: 0.125rem;

  row-gap: 0.125rem;

  margin-top: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-list {

    row-gap: 0.25rem;

  }

}

.p-workstyle-career .subsection-list[data-leader] {

  row-gap: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-list[data-leader] {

    row-gap: 1.5rem;

  }

}

.p-workstyle-career .subsection-list-label {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.625rem;

  -moz-column-gap: 0.625rem;

       column-gap: 0.625rem;

  line-height: 1.75;

  letter-spacing: -0.02em;

}

.p-workstyle-career .subsection-list-label::before {

  --marker-size: 0.375rem;

  display: inline-block;

  width: 0.375rem;

  width: var(--marker-size);

  height: 0.375rem;

  height: var(--marker-size);

  margin-top: calc((1lh - 0.375rem) / 2);

  margin-bottom: calc((1lh - 0.375rem) / 2);

  margin-top: calc((1lh - var(--marker-size)) / 2);

  margin-bottom: calc((1lh - var(--marker-size)) / 2);

  content: "";

  background-color: var(--color-primary);

  border-radius: 50%;

}

.p-workstyle-career .subsection-list-desc {

  margin-top: 0.125rem;

  line-height: 1.65;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-list-desc {

    margin-top: 0.25rem;

    line-height: 1.75;

    letter-spacing: -0.02em;

  }

}

.p-workstyle-career .subsection-thumb {

  margin-top: 1.5rem;

  overflow-x: auto;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-thumb {

    margin-top: 2.5rem;

  }

}

.p-workstyle-career .subsection-thumb .img-schedule {

  width: 26.8125rem;

  max-width: none;

  max-width: initial;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-thumb .img-schedule {

    width: 100%;

  }

}

.p-workstyle-career .subsection-thumb figcaption {

  width: -moz-fit-content;

  width: fit-content;

  margin-top: 0.375rem;

  margin-left: auto;

  font-size: 0.75rem;

  font-weight: 500;

  letter-spacing: -0.02em;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-thumb figcaption {

    margin-top: 0.5rem;

    font-size: 0.875rem;

  }

}

.p-workstyle-career .subsection-table {

  margin-top: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-table {

    margin-top: 2rem;

  }

}

.p-workstyle-career .subsection-table table {

  width: 32.5625rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-table table {

    width: 32.5625rem;

  }

}

.p-workstyle-career .subsection-table table th,

.p-workstyle-career .subsection-table table td {

  text-align: left;

}

.p-workstyle-career .subsection-certification {

  max-width: 32.5rem;

  padding: 1rem 1.5rem 1.5rem 1rem;

  margin-top: 1.25rem;

  background-color: var(--color-bg-gray);

  border-radius: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-certification {

    padding: 1.625rem 2.5rem 2rem 2.25rem;

    margin-top: 2rem;

    border-radius: 0.75rem;

  }

}

.p-workstyle-career .subsection-certification-label {

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.1875rem 0.75rem 0.25rem;

  font-size: 0.8125rem;

  font-weight: 700;

  color: var(--color-white);

  letter-spacing: -0.03em;

  background-color: var(--color-primary);

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-workstyle-career .subsection-certification-label {

    padding: 0.1875rem 1.125rem 0.25rem;

    font-size: 0.875rem;

    letter-spacing: 0;

  }

}.p-workstyle .c-index-pagelist {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-workstyle .c-index-pagelist {

    margin-top: 8.5rem;

  }

}.p-top-mv {

  width: 100%;

  padding-right: 1rem;

  padding-left: 1rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-top-mv {

    width: calc(1200 / var(--screen-xl) * 100%);

    padding-right: 0;

    padding-left: 0;

  }

}

.p-top-mv .bg {

  width: 100%;

  height: auto;

  max-width: 1440px;

  margin: 0 auto;

}

.p-top-latest {

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .p-top-latest {

    margin-top: 3.5rem;

  }

}

.p-top-latest .col {

  display: grid;

  padding: 1rem 1.25rem 1.5rem;

  background-color: var(--color-bg-gray);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-latest .col {

    grid-template-columns: auto 1fr;

    gap: calc(24 / var(--inner-size) * 100cqi);

    padding: 1.5rem calc(32 / var(--inner-size) * 100cqi) 1.875rem;

  }

}

.p-top-latest .heading {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.5rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  align-items: center;

  height: -moz-fit-content;

  height: fit-content;

  font-size: 1rem;

  font-weight: 500;

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-top-latest .heading {

    margin-top: 0.1875rem;

    font-size: 0.875rem;

  }

}

.p-top-latest .heading::before {

  width: 0.3125rem;

  aspect-ratio: 1;

  content: "";

  background-color: var(--color-primary);

  border-radius: 50%;

}

.p-top-latest .block {

  padding-top: 1rem;

  margin-top: 1rem;

  border-top: 0.0625rem solid color-mix(in srgb, var(--color-border-gray3) 50%, transparent 50%);

}

@media screen and (min-width: 768px) {

  .p-top-latest .block {

    padding-top: 0;

    margin-top: 0;

    border-top: none;

  }

}

.p-top-latest .date {

  position: relative;

  height: -moz-fit-content;

  height: fit-content;

  font-family: var(--font-inter);

  font-size: 0.875rem;

  font-weight: 400;

  color: var(--color-text-gray);

}

@media screen and (min-width: 768px) {

  .p-top-latest .date {

    padding-right: calc(16 / var(--inner-size) * 100cqi);

    margin-top: 0.1875rem;

    font-weight: 500;

    letter-spacing: 0.02em;

  }

  .p-top-latest .date::after {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 0.0625rem;

    height: 0.875rem;

    margin-top: auto;

    margin-bottom: auto;

    content: "";

    background-color: var(--color-border-gray2);

  }

}

.p-top-latest .title {

  margin-top: 0.3125rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: -0.01em;

}

@media screen and (min-width: 768px) {

  .p-top-latest .title {

    margin-top: 0;

    letter-spacing: 0.02em;

  }

}

.p-top-latest .title > span {

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom left;

  background-size: 100% 0.0625rem;

}

.p-top-latest .link {

  display: grid;

  color: var(--color-text);

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-top-latest .link {

    grid-template-columns: auto 1fr;

    gap: calc(16 / var(--inner-size) * 100cqi);

  }

}

.p-top-latest .link:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-top-latest .link:hover {

    color: var(--color-primary);

  }

}

.p-top-latest .link[target=_blank] .title {

  --icon-gap: 0.25rem;

  --icon-size: 0.625rem;

}

.p-top-latest .link[target=_blank] .title::after {

  display: inline-block;

  width: var(--icon-size);

  aspect-ratio: 1;

  margin-left: var(--icon-gap);

  content: "";

  background-color: currentcolor;

  -webkit-mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");

          mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");

  -webkit-mask-repeat: no-repeat;

          mask-repeat: no-repeat;

  -webkit-mask-position: center;

          mask-position: center;

  -webkit-mask-size: contain;

          mask-size: contain;

}.p-top-message {

  margin-top: 4.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-message {

    margin-top: 7rem;

  }

}

@media screen and (max-width: 767px) {

  .p-top-message .c-sec-heading {

    row-gap: 0.25rem;

  }

  .p-top-message .c-sec-heading .en {

    font-size: 0.875rem;

  }

}

.p-top-message .c-sec-heading .ja {

  font-size: 0.9375rem;

}

@media screen and (min-width: 768px) {

  .p-top-message .c-sec-heading .ja {

    font-size: 1.75rem;

  }

}

.p-top-message .col {

  display: grid;

  grid-gap: 1.875rem;

  gap: 1.875rem;

}

@media screen and (min-width: 768px) {

  .p-top-message .col {

    grid-template-columns: auto 1fr;

    gap: calc(80 / var(--inner-size) * 100%);

  }

}

@media screen and (min-width: 768px) {

  .p-top-message .block {

    justify-self: flex-end;

    margin-top: 0.875rem;

  }

}

.p-top-message .copy {

  font-size: 1.75rem;

  font-weight: 500;

  line-height: 1.6;

  letter-spacing: 0.04em;

}

@media screen and (min-width: 768px) {

  .p-top-message .copy {

    font-size: 2.375rem;

    letter-spacing: -0.04em;

  }

}

.p-top-message .desc {

  margin-top: 2.25rem;

  font-weight: 500;

  line-height: 2;

  letter-spacing: 0.06em;

}

@media screen and (min-width: 768px) {

  .p-top-message .desc {

    margin-top: 3.5rem;

    font-size: 1.125rem;

  }

}

.p-top-message .desc + .desc {

  margin-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-message .desc + .desc {

    margin-top: 2rem;

  }

}

.p-top-message .link {

  grid-template-columns: 1fr 3rem;

  margin-top: 2.5rem;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-top-message .link {

    margin-top: 4rem;

    margin-left: 0;

  }

}

.p-top-message .image {

  height: 17.5rem;

  margin-top: 4.5rem;

  overflow: clip;

}

@media screen and (min-width: 768px) {

  .p-top-message .image {

    height: 560px;

    margin-top: 7.5rem;

  }

}

.p-top-message .image picture,

.p-top-message .image img {

  width: 100%;

  height: calc(100% + 40px);

  -o-object-fit: cover;

     object-fit: cover;

}

@media screen and (min-width: 768px) {

  .p-top-message .image picture,

  .p-top-message .image img {

    height: calc(100% + 80px);

  }

}.p-top-personality {

  padding-top: 4rem;

  padding-bottom: 4rem;

  background-color: var(--color-beige);

}

@media screen and (min-width: 768px) {

  .p-top-personality {

    padding-top: 7rem;

    padding-bottom: 6rem;

  }

}

.p-top-personality .c-sec-heading .ja {

  font-size: 2rem;

}

@media screen and (min-width: 768px) {

  .p-top-personality .c-sec-heading .ja {

    font-size: 3rem;

  }

}

.p-top-personality .list {

  display: grid;

  grid-gap: 1rem;

  gap: 1rem;

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list {

    grid-template-columns: repeat(3, 1fr);

    gap: calc(32 / var(--inner-size) * 100cqi);

    margin-top: 3.5rem;

  }

}

.p-top-personality .list .item {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-gap: 0.875rem 1.25rem;

  gap: 0.875rem 1.25rem;

  align-items: center;

  padding: 1.625rem 1.5rem 1.75rem;

  background-color: var(--color-white);

  border-radius: 0.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list .item {

    grid-template-rows: subgrid;

    grid-template-columns: 1fr;

    grid-row: span 3;

    gap: 0;

    align-items: flex-start;

    justify-items: center;

    align-items: flex-start;

    justify-items: center;

    place-items: flex-start center;

    align-items: flex-start;

    padding: calc(40 / var(--inner-size) * 100cqi) calc(32 / var(--inner-size) * 100cqi);

    border-radius: 1rem;

  }

}

.p-top-personality .list .title {

  display: flex;

  grid-column: span 2;

  -moz-column-gap: 1rem;

       column-gap: 1rem;

  align-self: flex-end;

  width: -moz-fit-content;

  width: fit-content;

  margin-right: auto;

  margin-left: auto;

  font-size: 1.125rem;

  font-weight: 700;

  line-height: 1.3;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list .title {

    grid-column: span 1;

    -moz-column-gap: calc(16 / var(--inner-size) * 100cqi);

         column-gap: calc(16 / var(--inner-size) * 100cqi);

    align-items: flex-end;

    font-size: 1.375rem;

  }

}

.p-top-personality .list .title::before, .p-top-personality .list .title::after {

  width: 0.125rem;

  height: 1.5rem;

  content: "";

  background-color: currentcolor;

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list .title::before, .p-top-personality .list .title::after {

    height: 1.875rem;

  }

}

.p-top-personality .list .title::before {

  rotate: -30deg;

}

.p-top-personality .list .title::after {

  rotate: 30deg;

}

.p-top-personality .list .title > span {

  position: relative;

  bottom: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list .title > span {

    bottom: 0.375rem;

  }

}

.p-top-personality .list .icon {

  width: 5.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list .icon {

    width: calc(160 / var(--inner-size) * 100cqi);

    margin-top: 1.5rem;

  }

}

.p-top-personality .list .icon img {

  width: 100%;

}

.p-top-personality .list .desc {

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.6;

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-top-personality .list .desc {

    margin-top: 1.5rem;

    font-size: 0.9375rem;

    line-height: 1.75;

    letter-spacing: 0;

  }

}.p-top-interview {

  margin-top: 4rem;

  overflow: clip;

}

@media screen and (min-width: 768px) {

  .p-top-interview {

    margin-top: 7rem;

  }

}

.p-top-interview .heading {

  display: grid;

}

@media screen and (min-width: 1024px) {

  .p-top-interview .heading {

    grid-template-columns: auto 1fr;

  }

}

.p-top-interview .c-sec-heading .ja {

  font-size: 2rem;

}

@media screen and (min-width: 768px) {

  .p-top-interview .c-sec-heading .ja {

    font-size: 2.75rem;

  }

}

.p-top-interview .c-desc {

  margin-top: 1.25rem;

}

@media screen and (min-width: 1024px) {

  .p-top-interview .c-desc {

    align-self: flex-end;

    justify-self: flex-end;

    align-self: flex-end;

    justify-self: flex-end;

    place-self: flex-end;

    margin-top: 0;

  }

}

.p-top-interview .splide {

  margin-top: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-interview .splide {

    margin-top: 3.5rem;

  }

}

.p-top-interview .splide .splide-nav {

  display: grid;

  grid-template-columns: 1fr auto;

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .p-top-interview .splide .splide-nav {

    -moz-column-gap: 1.5rem;

         column-gap: 1.5rem;

    margin-top: 3rem;

  }

}

.p-top-interview .splide .splide__arrows {

  display: grid;

  grid-template-columns: repeat(2, 2.5rem);

  grid-column-gap: 0.75rem;

  -moz-column-gap: 0.75rem;

       column-gap: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-top-interview .splide .splide__arrows {

    grid-template-columns: repeat(2, 2.75rem);

    -moz-column-gap: 1rem;

         column-gap: 1rem;

  }

}

.p-top-interview .splide .splide__arrow.splide__arrow--prev {

  rotate: 90deg;

}

.p-top-interview .splide .splide__arrow.splide__arrow--next {

  rotate: -90deg;

}

@media screen and (min-width: 768px) {

  .p-top-interview .splide .splide__track {

    overflow: visible !important;

  }

}

.p-top-interview .splide .splide__slide {

  width: 100%;

}

@media screen and (min-width: 768px) {

  .p-top-interview .splide .splide__slide {

    width: 31rem;

  }

}

.p-top-interview .splide .splide__slide a {

  color: var(--color-text);

}.p-top-workstyle {

  padding-top: 3.5rem;

  margin-top: 4.5rem;

  background-color: var(--color-blue);

  border-radius: 2.5rem 2.5rem 0 0;

}

@media screen and (min-width: 1024px) {

  .p-top-workstyle {

    padding-top: 7.5rem;

    margin-top: 7.5rem;

    border-radius: 3.5rem 3.5rem 0 0;

  }

}

@media screen and (min-width: 768px) {

  .p-top-workstyle .c-sec-inner {

    --inner-size: 1160;

  }

}

.p-top-workstyle .col {

  display: grid;

  grid-gap: 2.25rem;

  gap: 2.25rem;

  padding: 2.5rem 1.75rem 1.75rem;

  background-color: var(--color-white);

  border-radius: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-top-workstyle .col {

    padding: calc(72 / var(--inner-size) * 100cqi) calc(80 / var(--inner-size) * 100cqi);

    border-radius: 1.5rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-workstyle .col {

    grid-template-columns: 1fr calc(408 / var(--inner-size) * 100cqi);

    gap: calc(64 / var(--inner-size) * 100cqi);

  }

}

.p-top-workstyle .c-desc {

  margin-top: 1rem;

}

@media screen and (min-width: 1024px) {

  .p-top-workstyle .c-desc {

    margin-top: 2.5rem;

  }

}

.p-top-workstyle .thumb {

  align-self: flex-end;

}

.p-top-workstyle .thumb img {

  width: 100%;

  border-radius: 0.375rem;

}

@media screen and (min-width: 1024px) {

  .p-top-workstyle .thumb img {

    border-radius: 0.5rem;

  }

}

.p-top-workstyle .nav {

  margin-top: 2rem;

}

@media screen and (min-width: 1024px) {

  .p-top-workstyle .nav {

    margin-top: 4.5rem;

  }

}

.p-top-workstyle .nav .item {

  display: grid;

  border-top: 0.0625rem solid var(--color-bg-gray2);

}

.p-top-workstyle .nav .item:last-of-type {

  border-bottom: 0.0625rem solid var(--color-bg-gray2);

}

.p-top-workstyle .nav .link {

  display: grid;

  grid-template-columns: 1.75rem 1fr 2rem;

  grid-column-gap: 0.5rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  align-items: center;

  padding: 1.375rem 0.25rem;

  font-size: 1.125rem;

  font-weight: 500;

  color: var(--color-text);

  transition: translate 0.4s ease, color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-top-workstyle .nav .link {

    grid-template-columns: 2.25rem 1fr 2.5rem;

    -moz-column-gap: calc(20 / var(--inner-size) * 100cqi);

         column-gap: calc(20 / var(--inner-size) * 100cqi);

    padding: calc(32 / var(--inner-size) * 100cqi) calc(24 / var(--inner-size) * 100cqi);

    font-size: 1.5rem;

  }

}

.p-top-workstyle .nav .link:focus-visible {

  color: var(--color-primary);

  translate: 0.625rem 0;

}

@media (any-hover: hover) {

  .p-top-workstyle .nav .link:hover {

    color: var(--color-primary);

    translate: 0.625rem 0;

  }

}

.p-top-workstyle .nav .link .icon {

  width: 100%;

}.p-top-about {

  padding-top: 2rem;

  padding-bottom: 3.5rem;

  background-color: var(--color-blue);

}

@media screen and (min-width: 768px) {

  .p-top-about {

    padding-top: 3.5rem;

    padding-bottom: 6rem;

  }

}

@media screen and (min-width: 768px) {

  .p-top-about .c-sec-inner {

    --inner-size: 1160;

  }

}

.p-top-about .box {

  padding: 2.5rem 1.75rem 1.75rem;

  background-color: var(--color-white);

  border-radius: 1.25rem;

}

@media screen and (min-width: 768px) {

  .p-top-about .box {

    padding: 4.5rem calc(80 / var(--inner-size) * 100cqi);

    border-radius: 1.5rem;

  }

}

.p-top-about .col {

  display: grid;

  grid-template-areas: "desc" "nav" "thumb";

  margin-top: 1rem;

}

@media screen and (min-width: 768px) {

  .p-top-about .col {

    margin-top: 2rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-about .col {

    grid-template-areas: "desc nav" "thumb nav";

    grid-template-columns: calc(413 / var(--inner-size) * 100cqi) 1fr;

    -moz-column-gap: calc(64 / var(--inner-size) * 100cqi);

         column-gap: calc(64 / var(--inner-size) * 100cqi);

  }

}

.p-top-about .thumb {

  grid-area: thumb;

  margin-top: 2.25rem;

}

@media screen and (min-width: 1024px) {

  .p-top-about .thumb {

    margin-top: 4.375rem;

  }

}

.p-top-about .thumb img {

  width: 100%;

  height: auto;

  border-radius: 0.5rem;

}

.p-top-about .nav {

  grid-area: nav;

  margin-top: 2rem;

}

@media screen and (min-width: 1024px) {

  .p-top-about .nav {

    margin-top: 1.625rem;

  }

}

.p-top-about .nav .list {

  display: grid;

  height: 100%;

}

.p-top-about .nav .item {

  display: grid;

  border-top: 0.0625rem solid var(--color-border-gray2);

}

.p-top-about .nav .item:last-of-type {

  border-bottom: 0.0625rem solid var(--color-border-gray2);

}

.p-top-about .nav .link {

  display: grid;

  grid-template-columns: 1.75rem 1fr 2rem;

  grid-column-gap: 0.5rem;

  -moz-column-gap: 0.5rem;

       column-gap: 0.5rem;

  align-items: center;

  padding: 1.375rem 0.25rem;

  font-size: 1.125rem;

  font-weight: 500;

  line-height: 1.3;

  color: var(--color-text);

  letter-spacing: 0.02em;

  transition: color 0.3s ease, translate 0.4s ease;

}

@media screen and (min-width: 768px) {

  .p-top-about .nav .link {

    grid-template-columns: 2.25rem 1fr 2.5rem;

    -moz-column-gap: calc(20 / var(--inner-size) * 100cqi);

         column-gap: calc(20 / var(--inner-size) * 100cqi);

    padding: calc(32 / var(--inner-size) * 100cqi) 1.5rem;

    font-size: 1.5rem;

    line-height: 1.5;

  }

}

.p-top-about .nav .link:focus-visible {

  color: var(--color-primary);

  translate: 0.625rem 0;

}

@media (any-hover: hover) {

  .p-top-about .nav .link:hover {

    color: var(--color-primary);

    translate: 0.625rem 0;

  }

}

.p-top-about .nav .link .illust {

  width: 100%;

}

.p-top-data {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-top-data {

    margin-top: 7rem;

  }

}

@media screen and (max-width: 767px) {

  .p-top-data .c-sec-inner {

    --inner-size: 375;

    padding-right: 0;

    padding-left: 0;

  }

}

@media screen and (min-width: 768px) {

  .p-top-data .c-sec-inner {

    --inner-size: 1160;

  }

}

@media screen and (max-width: 767px) {

  .p-top-data .c-sec-heading .ja {

    font-size: 1.75rem;

  }

}

.p-top-data .block {

  padding: 3rem 1.5rem 4rem;

  background-color: var(--color-beige);

}

@media screen and (min-width: 768px) {

  .p-top-data .block {

    padding: 5.75rem calc(60 / var(--inner-size) * 100cqi) 6rem;

    border-radius: 1.5rem;

  }

}

.p-top-data .head {

  display: grid;

  margin-right: auto;

  margin-left: auto;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-top-data .head {

    grid-template-columns: calc(120 / var(--inner-size) * 100cqi) 1fr calc(120 / var(--inner-size) * 100cqi);

    -moz-column-gap: calc(40 / var(--inner-size) * 100cqi);

         column-gap: calc(40 / var(--inner-size) * 100cqi);

    max-width: 56.0625rem;

  }

}

.p-top-data .head .head-icon {

  display: none;

}

@media screen and (min-width: 768px) {

  .p-top-data .head .head-icon {

    display: block;

  }

}

.p-top-data .desc {

  margin-top: 1rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-top-data .desc {

    margin-top: 2.5rem;

    font-size: 1rem;

  }

}

.p-top-data .list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 0.75rem;

  gap: 0.75rem;

  margin-top: 2rem;

}

@media screen and (min-width: 1024px) {

  .p-top-data .list {

    grid-template-rows: 10.75rem 2.75rem auto;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem calc(24 / var(--inner-size) * 100cqi);

    margin-top: 3.5rem;

  }

}

.p-top-data .item {

  display: grid;

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

  padding: 1.25rem 0.625rem;

  background-color: var(--color-white);

  border-radius: 0.5rem;

}

@media screen and (min-width: 1024px) {

  .p-top-data .item {

    padding: 1.75rem calc(12 / var(--inner-size) * 100cqi) 2rem;

  }

}

.p-top-data .item .title {

  font-size: 0.9375rem;

  font-weight: 500;

  line-height: 1.3;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-top-data .item .title {

    font-size: 1.125rem;

  }

}

.p-top-data .item .title + * {

  margin-top: 0.375rem;

}

@media screen and (min-width: 1024px) {

  .p-top-data .item .title + * {

    margin-top: 0.625rem;

  }

}

.p-top-data .item .param {

  text-align: center;

  white-space: nowrap;

}

.p-top-data .item .param .num {

  font-family: var(--font-inter);

  font-size: 2.5rem;

  font-weight: 600;

  line-height: 1;

  color: var(--color-primary);

  letter-spacing: 0.04em;

}

@media screen and (min-width: 768px) {

  .p-top-data .item .param .num {

    font-size: 3.625rem;

  }

}

.p-top-data .item .param .unit {

  margin-left: -0.25rem;

  font-family: var(--inter);

  font-size: 1.125rem;

  font-weight: 500;

  line-height: 1;

}

@media screen and (min-width: 768px) {

  .p-top-data .item .param .unit {

    font-size: 1.375rem;

  }

}

.p-top-data .item .param .unit.-ja {

  font-family: var(--font-zkg);

  font-size: 0.875rem;

}

@media screen and (min-width: 768px) {

  .p-top-data .item .param .unit.-ja {

    font-size: 1.125rem;

  }

}

.p-top-data .item .sublist {

  display: grid;

}

@media screen and (min-width: 768px) {

  .p-top-data .item .sublist {

    row-gap: 0.625rem;

    margin-top: 1.25rem;

  }

}

.p-top-data .item .sublist .subitem {

  display: grid;

  grid-template-columns: subgrid;

  grid-column: span 2;

  align-items: center;

}

@media screen and (min-width: 768px) {

  .p-top-data .item .sublist .subitem {

    -moz-column-gap: calc(8 / var(--inner-size) * 100cqi);

         column-gap: calc(8 / var(--inner-size) * 100cqi);

  }

}

.p-top-data .item .sublist .sublabel {

  justify-self: flex-end;

  width: -moz-fit-content;

  width: fit-content;

  padding: 0.25rem 0.5rem 0.375rem;

  font-size: 1rem;

  font-weight: 700;

  line-height: 1;

  color: var(--color-white);

  text-align: center;

  background-color: var(--color-primary);

  border-radius: 0.125rem;

}

.p-top-data .item .note {

  width: 100%;

  margin-top: 0.5rem;

  font-size: 0.75rem;

  color: var(--color-text-gray2);

}

@media screen and (min-width: 1024px) {

  .p-top-data .item .note {

    margin-top: 0.75rem;

    font-size: 0.875rem;

  }

}

.p-top-data .item .note > li {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 0.125rem;

  -moz-column-gap: 0.125rem;

       column-gap: 0.125rem;

  font-weight: 500;

}

@media screen and (min-width: 1024px) {

  .p-top-data .item .note > li {

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

  }

}

.p-top-data .item .note > li::before {

  content: "※";

}

.p-top-data .item:first-of-type {

  grid-column: span 2;

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:first-of-type {

    padding-top: 2rem;

    padding-bottom: 2rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:first-of-type {

    grid-row: span 2;

  }

}

.p-top-data .item:first-of-type .col {

  display: grid;

  grid-template-columns: 4.625rem 1fr;

  grid-column-gap: calc(10 / var(--inner-size) * 100cqi);

  -moz-column-gap: calc(10 / var(--inner-size) * 100cqi);

       column-gap: calc(10 / var(--inner-size) * 100cqi);

  align-items: center;

  margin-top: 0.75rem;

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:first-of-type .col {

    grid-template-columns: calc(100 / var(--inner-size) * 100cqi) 1fr;

    -moz-column-gap: calc(20 / var(--inner-size) * 100cqi);

         column-gap: calc(20 / var(--inner-size) * 100cqi);

  }

}

.p-top-data .item:first-of-type .col > svg {

  width: 100%;

}

.p-top-data .item:first-of-type .title {

  font-size: 1.125rem;

}

@media screen and (min-width: 768px) {

  .p-top-data .item:first-of-type .title {

    font-size: 1.5rem;

  }

}

.p-top-data .item:first-of-type .param .num {

  font-size: 4.25rem;

}

@media screen and (min-width: 768px) {

  .p-top-data .item:first-of-type .param .num {

    font-size: 5.5rem;

  }

}

.p-top-data .item:first-of-type .param .unit {

  font-size: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-data .item:first-of-type .param .unit {

    font-size: 2rem;

  }

}

.p-top-data .item:nth-of-type(2) {

  grid-column: span 2;

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(2) {

    grid-row-start: 3;

    padding-top: 2rem;

    padding-bottom: 2rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(2) {

    grid-row: span 2;

    grid-column: span 1;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(2) .title {

    font-size: 1.125rem;

  }

}

.p-top-data .item:nth-of-type(2) .col {

  display: grid;

  grid-template-columns: repeat(2, auto);

  grid-gap: 1rem;

  gap: 1rem;

  align-items: center;

  margin-top: 0.75rem;

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(2) .col {

    grid-template-columns: 1fr;

    gap: 0;

    align-items: flex-start;

  }

}

@media screen and (max-width: 767px) {

  .p-top-data .item:nth-of-type(2) .col > .param .num {

    font-size: 3.5rem;

  }

}

@media screen and (max-width: 767px) {

  .p-top-data .item:nth-of-type(2) .col > .param .unit {

    font-size: 1.25rem;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(2) .sublist {

    row-gap: 0.375rem;

    margin-top: 0;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(2) .sublist {

    margin-top: 1rem;

  }

}

.p-top-data .item:nth-of-type(2) .sublist .sublabel {

  font-size: 0.875rem;

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(2) .sublist .subitem {

    gap: 0.5rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(2) .sublist .param {

    -moz-column-gap: 0.125rem;

         column-gap: 0.125rem;

  }

}

.p-top-data .item:nth-of-type(2) .sublist .param .num {

  font-size: 1.5rem;

  color: var(--color-text-gray2);

}

@media screen and (min-width: 768px) {

  .p-top-data .item:nth-of-type(2) .sublist .param .num {

    font-size: 1.8125rem;

  }

}

.p-top-data .item:nth-of-type(2) .sublist .param .unit {

  font-size: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-top-data .item:nth-of-type(2) .sublist .param .unit {

    font-size: 0.8125rem;

  }

}

.p-top-data .item:nth-of-type(2) .sublist :where(.subitem):nth-of-type(2) .param .num {

  letter-spacing: 0.05em;

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(3) {

    padding-bottom: 0.625rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(3) {

    padding-top: 2.25rem;

    padding-bottom: 0.75rem;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(4) {

    grid-row-start: 2;

    grid-column-start: 1;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(4) {

    grid-row-start: 3;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(5) {

    grid-row-start: 2;

    grid-column-start: 2;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(5) {

    grid-row-start: 3;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:nth-of-type(6) {

    padding-bottom: 0.625rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:nth-of-type(6) {

    grid-row-start: 3;

    padding-top: 2rem;

    padding-bottom: 0.75rem;

  }

}

.p-top-data .item:last-of-type {

  grid-column: span 2;

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:last-of-type {

    padding-bottom: 0.625rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:last-of-type {

    grid-row: span 2;

    grid-column: span 1;

    padding-top: 2.25rem;

    padding-bottom: 0.75rem;

  }

}

@media screen and (max-width: 767px) {

  .p-top-data .item:last-of-type .title {

    font-size: 1.125rem;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:last-of-type .sublist {

    row-gap: 0.5rem;

    margin-top: 0.75rem;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-data .item:last-of-type .sublist {

    row-gap: 0.25rem;

    margin-top: 0.75rem;

  }

}

@media screen and (max-width: 1023px) {

  .p-top-data .item:last-of-type .sublist .subitem {

    -moz-column-gap: 0.625rem;

         column-gap: 0.625rem;

  }

}

.p-top-data .item:last-of-type .sublist .subitem .param {

  justify-self: flex-start;

}

.p-top-data .item:last-of-type .sublist .subitem .param .num {

  font-size: 2.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-data .item:last-of-type .sublist .subitem .param .unit {

    font-size: 1.125rem;

  }

}

.p-top-data .link {

  margin-top: 2.5rem;

  margin-right: auto;

  margin-left: auto;

}

@media screen and (min-width: 1024px) {

  .p-top-data .link {

    margin-top: 4rem;

  }

}.p-top-faq {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq {

    margin-top: 7.5rem;

  }

}

.p-top-faq .list {

  margin-top: 2.75rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .list {

    margin-top: 4rem;

  }

}

.p-top-faq .accordion {

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

  border-top: 0.0625rem solid var(--color-border-gray2);

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion {

    padding-top: 2rem;

    padding-bottom: 2rem;

  }

}

.p-top-faq .accordion:last-of-type {

  border-bottom: 0.0625rem solid var(--color-border-gray2);

}

.p-top-faq .accordion .heading {

  display: grid;

  grid-template-columns: 1fr auto;

  grid-column-gap: 1rem;

  -moz-column-gap: 1rem;

       column-gap: 1rem;

  align-items: center;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .heading {

    -moz-column-gap: calc(24 / var(--inner-size) * 100cqi);

         column-gap: calc(24 / var(--inner-size) * 100cqi);

    padding-right: 1.5rem;

    padding-left: 1.5rem;

  }

}

.p-top-faq .accordion .heading:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-top-faq .accordion .heading:hover {

    color: var(--color-primary);

  }

}

.p-top-faq .accordion .heading .title {

  display: grid;

  grid-template-columns: auto 1fr;

  grid-column-gap: 0.875rem;

  -moz-column-gap: 0.875rem;

       column-gap: 0.875rem;

  font-size: 1rem;

  font-weight: 500;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .heading .title {

    -moz-column-gap: calc(20 / var(--inner-size) * 100cqi);

         column-gap: calc(20 / var(--inner-size) * 100cqi);

    font-size: 1.125rem;

  }

}

.p-top-faq .accordion .heading .title::before {

  display: grid;

  align-content: center;

  justify-content: center;

  align-content: center;

  justify-content: center;

  place-content: center;

  width: 1.75rem;

  aspect-ratio: 1;

  font-family: var(--font-poppins);

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1;

  color: var(--color-white);

  letter-spacing: 0.04em;

  content: "Q";

  background-color: var(--color-primary);

  border-radius: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .heading .title::before {

    width: 2.5rem;

    font-size: 1.125rem;

  }

}

.p-top-faq .accordion .heading .title .title-text {

  position: relative;

  top: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .heading .title .title-text {

    top: 0.375rem;

  }

}

.p-top-faq .accordion .heading .icon {

  position: relative;

  display: grid;

  grid-template-areas: "line";

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

  width: 2rem;

  aspect-ratio: 1;

  overflow: clip;

  color: var(--color-text);

  border-radius: 50%;

  container-type: inline-size;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .heading .icon {

    width: 2.25rem;

  }

}

.p-top-faq .accordion .heading .icon::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: auto;

  content: "";

  border: 50cqi solid var(--color-border-white);

  border-radius: 50%;

  transition: border-width 0.4s ease;

}

.p-top-faq .accordion .heading .icon .line {

  position: relative;

  z-index: 2;

  grid-area: line;

  width: 0.625rem;

  height: 0.09375rem;

  background-color: currentcolor;

  border-radius: 100vmax;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .heading .icon .line {

    width: 0.75rem;

    height: 0.125rem;

  }

}

.p-top-faq .accordion .heading .icon .line:last-of-type {

  transition: rotate 0.3s ease;

  rotate: -90deg;

}

.p-top-faq .accordion .panel {

  overflow: clip;

  transition: height 0.3s ease-out;

}

.p-top-faq .accordion .panel .panel-inner {

  padding-top: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .panel .panel-inner {

    padding-top: 2.25rem;

  }

}

.p-top-faq .accordion .panel .panel-content {

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-column-gap: 1rem;

  -moz-column-gap: 1rem;

       column-gap: 1rem;

  padding: 1.5rem 1rem;

  font-size: 0.875rem;

  line-height: 1.75;

  letter-spacing: -0.01em;

  background-color: var(--color-light-orange);

  border-radius: 0.25rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .panel .panel-content {

    -moz-column-gap: 1.25rem;

         column-gap: 1.25rem;

    padding: 2.5rem 1.5rem;

    font-size: 1rem;

    letter-spacing: 0.02em;

  }

}

.p-top-faq .accordion .panel .panel-content::before {

  display: grid;

  align-content: center;

  justify-content: center;

  align-content: center;

  justify-content: center;

  place-content: center;

  width: 1.75rem;

  aspect-ratio: 1;

  font-family: var(--font-poppins);

  font-weight: 500;

  line-height: 1;

  color: var(--color-primary);

  letter-spacing: 0.04em;

  content: "A";

  background-color: var(--color-white);

  border: 0.125rem solid currentcolor;

  border-radius: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .panel .panel-content::before {

    width: 2.5rem;

    font-size: 1.125rem;

  }

}

.p-top-faq .accordion .panel .panel-text {

  position: relative;

  top: 0.125rem;

}

@media screen and (min-width: 768px) {

  .p-top-faq .accordion .panel .panel-text {

    top: 0.3125rem;

  }

}

.p-top-faq .accordion.is-open .heading .icon .line:last-of-type {

  rotate: 0deg;

}.p-top-news {

  margin-top: 4rem;

  background-color: var(--color-bg-gray);

}

@media screen and (min-width: 768px) {

  .p-top-news {

    margin-top: 7.5rem;

  }

}

.p-top-news .c-sec-inner {

  padding-top: 3.5rem;

  padding-bottom: 3.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-news .c-sec-inner {

    padding-top: 6rem;

    padding-bottom: 5rem;

  }

}

.p-top-news .c-sec-heading {

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-top-news .c-sec-heading {

    text-align: left;

  }

}

.p-top-news .col {

  display: grid;

  grid-gap: 2rem;

  gap: 2rem;

}

@media screen and (min-width: 768px) {

  .p-top-news .col {

    grid-template-columns: auto 1fr;

    gap: calc(104 / var(--inner-size) * 100cqi);

  }

}

.p-top-news .block {

  padding: 2.5rem 0.75rem 2.5rem 1.5rem;

  background-color: var(--color-white);

  border-radius: 0.75rem;

}

@media screen and (min-width: 768px) {

  .p-top-news .block {

    padding: 3.5rem calc(32 / var(--inner-size) * 100cqi) 4rem calc(56 / var(--inner-size) * 100cqi);

    border-radius: 0.5rem;

  }

}

.p-top-news .block-inner {

  padding-right: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-news .block-inner {

    padding-right: calc(58 / var(--inner-size) * 100cqi);

  }

}

.p-top-news .article + .article {

  margin-top: 2rem;

}

@media screen and (min-width: 768px) {

  .p-top-news .article + .article {

    margin-top: 2.25rem;

  }

}

.p-top-news .date {

  font-family: var(--font-inter);

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--color-primary);

  letter-spacing: 0.02em;

}

.p-top-news .title {

  margin-top: 0.25rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: -0.01em;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .p-top-news .title {

    margin-top: 0.5rem;

    font-size: 1rem;

    letter-spacing: 0.02em;

  }

}

.p-top-news .title > span {

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.03125rem;

}

.p-top-news .link {

  display: grid;

  color: var(--color-text);

}

.p-top-news .link:focus-visible .title {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .p-top-news .link:hover .title {

    color: var(--color-primary);

  }

}

.p-top-news .link[target=_blank] .title {

  --icon-gap: 0.25rem;

  --icon-size: 0.625rem;

}

.p-top-news .link[target=_blank] .title::after {

  display: inline-block;

  width: var(--icon-size);

  aspect-ratio: 1;

  margin-left: var(--icon-gap);

  content: "";

  background-color: currentcolor;

  -webkit-mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");

          mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");

  -webkit-mask-repeat: no-repeat;

          mask-repeat: no-repeat;

  -webkit-mask-position: center;

          mask-position: center;

  -webkit-mask-size: contain;

          mask-size: contain;

}

.p-top-news .news-link {

  margin-top: 2rem;

  margin-left: auto;

}

@media screen and (min-width: 768px) {

  .p-top-news .news-link {

    margin-top: 2.5rem;

  }

}.p-top-group {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-top-group {

    margin-top: 6rem;

  }

}

.p-top-group .c-sec-heading .ja {

  font-size: 1.5rem;

}

@media screen and (min-width: 768px) {

  .p-top-group .c-sec-heading .ja {

    font-size: 2rem;

  }

}

.p-top-group .nav {

  margin-top: 2rem;

  border-top: 0.0625rem solid var(--color-border-gray);

  border-bottom: 0.0625rem solid var(--color-border-gray);

}

@media screen and (min-width: 768px) {

  .p-top-group .nav {

    justify-content: center;

    padding-right: calc(12 / var(--inner-size) * 100cqi);

    padding-left: calc(12 / var(--inner-size) * 100cqi);

    margin-top: 3rem;

  }

}

.p-top-group .nav .list {

  display: grid;

}

@media screen and (min-width: 768px) {

  .p-top-group .nav .list {

    grid-template-columns: repeat(2, auto);

  }

}

.p-top-group .nav .item {

  position: relative;

  display: grid;

  padding: 1.25rem 0.75rem 1.25rem 1rem;

}

@media screen and (min-width: 768px) {

  .p-top-group .nav .item {

    padding: 0;

    --padding-inline: calc(40 / var(--inner-size) * 100cqi);

  }

}

.p-top-group .nav .item:not(:last-of-type) {

  border-bottom: 0.0625rem solid var(--color-border-gray);

}

@media screen and (min-width: 768px) {

  .p-top-group .nav .item:not(:last-of-type) {

    border-bottom: 0;

    border-bottom: initial;

  }

}

@media screen and (min-width: 768px) {

  .p-top-group .nav .item:not(:nth-of-type(3n + 1)) {

    padding-left: var(--padding-inline);

  }

}

@media screen and (min-width: 768px) {

  .p-top-group .nav .item:not(:nth-of-type(3n + 3)) {

    padding-right: var(--padding-inline);

  }

  .p-top-group .nav .item:not(:nth-of-type(3n + 2))::after {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 0.0625rem;

    height: calc(100% - 56 / var(--inner-size) * 100cqi);

    margin-top: auto;

    margin-bottom: auto;

    content: "";

    background-color: var(--color-border-gray);

  }

}

.p-top-group .nav .link {

  display: grid;

  grid-template-columns: 1fr 2rem;

  grid-column-gap: calc(24 / var(--inner-size) * 100cqi);

  -moz-column-gap: calc(24 / var(--inner-size) * 100cqi);

       column-gap: calc(24 / var(--inner-size) * 100cqi);

  align-items: center;

  font-size: 1rem;

  font-weight: 500;

  line-height: 1.5;

  color: var(--color-text);

  letter-spacing: 0.02em;

}

@media screen and (min-width: 768px) {

  .p-top-group .nav .link {

    grid-template-columns: 1fr 2.5rem;

    -moz-column-gap: calc(20 / var(--inner-size) * 100cqi);

         column-gap: calc(20 / var(--inner-size) * 100cqi);

    padding-top: 2rem;

    padding-bottom: 2rem;

    font-size: 0.9375rem;

    line-height: 1.75;

  }

}.p-top-next {

  margin-top: 5rem;

  background-color: var(--color-primary);

}

@media screen and (min-width: 768px) {

  .p-top-next {

    margin-top: 8.5rem;

  }

}

.p-top-next .head {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 2.5rem;

  grid-column-gap: calc(16 / var(--inner-size) * 100cqi);

  -moz-column-gap: calc(16 / var(--inner-size) * 100cqi);

       column-gap: calc(16 / var(--inner-size) * 100cqi);

  align-items: center;

  justify-content: center;

  padding: 3rem 1rem 3rem 1.5rem;

  color: var(--color-white);

}

@media screen and (min-width: 768px) {

  .p-top-next .head {

    grid-template-columns: auto 3rem;

    -moz-column-gap: calc(40 / var(--inner-size) * 100cqi);

         column-gap: calc(40 / var(--inner-size) * 100cqi);

    padding: 4.5rem 0;

  }

}

.p-top-next .head .title {

  display: grid;

  grid-row-gap: 0.25rem;

  row-gap: 0.25rem;

  font-weight: 500;

}

.p-top-next .head .title .en {

  font-family: var(--font-poppins);

  font-size: 2.25rem;

  line-height: 1.1;

  letter-spacing: 0.12em;

}

@media screen and (min-width: 768px) {

  .p-top-next .head .title .en {

    font-size: 3.5rem;

  }

}

.p-top-next .head .title .ja {

  font-size: 0.875rem;

  letter-spacing: 0.06em;

}

@media screen and (min-width: 768px) {

  .p-top-next .head .title .ja {

    font-size: 1rem;

  }

}.c-follow-entry {

  position: fixed;

  right: 0;

  bottom: 0;

  z-index: calc(var(--z-header) - 2);

  display: grid;

  grid-template-columns: max-content 1fr;

  grid-gap: 0.75rem;

  gap: 0.75rem;

  align-items: center;

  padding: 0.875rem 1.75rem 0.875rem 1rem;

  background-color: var(--color-white);

  border-top: 0.0625rem solid var(--color-text);

  border-left: 0.0625rem solid var(--color-text);

  border-radius: 0.25rem 0 0;

  transition: opacity 0.2s ease, translate 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-follow-entry {

    right: 1.25rem;

    gap: 0.875rem;

    padding: 0.9375rem 2.5rem 1.4625rem 1.5rem;

    border-top: 0.0625rem solid var(--color-text);

    border-right: 0.0625rem solid var(--color-text);

    border-left: 0.0625rem solid var(--color-text);

    border-radius: 0.5rem 0.5rem 0 0;

  }

}

.c-follow-entry[data-intersect=false] {

  pointer-events: none;

  opacity: 0;

  translate: 0 15%;

}

.c-follow-entry[data-intersect=true] {

  pointer-events: auto;

  opacity: 1;

  translate: 0 0;

}

.c-follow-entry.is-hidden {

  opacity: 0;

}

.c-follow-entry .thumb {

  display: grid;

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

}

.c-follow-entry .thumb img {

  width: 3rem;

}

@media screen and (min-width: 768px) {

  .c-follow-entry .thumb img {

    width: 3.875rem;

    margin-top: 0.375rem;

  }

}

.c-follow-entry .label {

  display: grid;

  grid-template-columns: repeat(3, max-content);

  grid-column-gap: 0.0625rem;

  -moz-column-gap: 0.0625rem;

       column-gap: 0.0625rem;

  align-items: center;

  font-family: var(--font-poppins);

  font-size: 0.8125rem;

  font-weight: 500;

  line-height: 1;

}

@media screen and (min-width: 768px) {

  .c-follow-entry .label {

    -moz-column-gap: 0.125rem;

         column-gap: 0.125rem;

    margin-right: 0.125rem;

    font-size: 0.875rem;

  }

}

.c-follow-entry .label::before, .c-follow-entry .label::after {

  width: 0.75rem;

  height: 0.0625rem;

  content: "";

  background-color: currentcolor;

  border-radius: 100vmax;

}

.c-follow-entry .label::before {

  rotate: 55deg;

}

.c-follow-entry .label::after {

  rotate: -55deg;

}

.c-follow-entry .label > span {

  position: relative;

  top: -0.125rem;

}

@media screen and (min-width: 768px) {

  .c-follow-entry .c-list {

    gap: 0.3875rem;

  }

}

.c-follow-entry .c-list > li {

  height: -moz-fit-content;

  height: fit-content;

}

.c-follow-entry .c-list > li a {

  position: relative;

  top: 0.0625rem;

  width: -moz-fit-content;

  width: fit-content;

  height: -moz-fit-content;

  height: fit-content;

  font-size: 0.75rem;

  font-weight: 500;

  color: var(--color-text);

  letter-spacing: -0.02em;

  background-image: linear-gradient(currentcolor 0, currentcolor 0);

  background-image: linear-gradient(currentcolor 0 0);

  background-repeat: no-repeat;

  background-position: bottom right;

  background-size: 100% 0.03125rem;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-follow-entry .c-list > li a {

    font-size: 1.0rem;

	background-image: none;

  }

}

.c-follow-entry .c-list > li a:focus-visible {

  color: var(--color-primary);

}

@media (any-hover: hover) {

  .c-follow-entry .c-list > li a:hover {

    color: var(--color-primary);

  }

}

.c-follow-entry .toggle {

  --toggle-width: 1.5rem;

  position: absolute;

  top: 0.625rem;

  right: 0.625rem;

  width: 1.5rem;

  width: var(--toggle-width);

  aspect-ratio: 1;

  overflow: clip;

  color: var(--color-white);

  border-radius: 50%;

  transition: color 0.3s ease;

}

@media screen and (min-width: 768px) {

  .c-follow-entry .toggle {

    top: 0.75rem;

    right: 0.75rem;

  }

}

.c-follow-entry .toggle:focus-visible {

  color: var(--color-text);

}

.c-follow-entry .toggle:focus-visible::before {

  border-width: 0.0625rem;

}

@media (any-hover: hover) {

  .c-follow-entry .toggle:hover {

    color: var(--color-text);

  }

  .c-follow-entry .toggle:hover::before {

    border-width: 0.0625rem;

  }

}

.c-follow-entry .toggle::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  aspect-ratio: 1;

  margin: auto;

  content: "";

  border-color: var(--color-text);

  border-style: solid;

  border-width: calc(var(--toggle-width) / 2);

  border-radius: 50%;

  transition: border-width 0.3s ease, border-color 0.3s ease;

}

.c-follow-entry .toggle > span {

  position: relative;

  display: grid;

  grid-template-areas: "line";

  align-items: center;

  justify-items: center;

  align-items: center;

  justify-items: center;

  place-items: center;

}

.c-follow-entry .toggle > span::before, .c-follow-entry .toggle > span::after {

  grid-area: line;

  width: 0.625rem;

  height: 0.0625rem;

  content: "";

  background-color: currentcolor;

  border-radius: 100vmax;

}

.c-follow-entry .toggle > span::before {

  rotate: 45deg;

}

.c-follow-entry .toggle > span::after {

  rotate: -45deg;

}.p-top .c-index-job {

  margin-top: 4rem;

}

@media screen and (min-width: 768px) {

  .p-top .c-index-job {

    margin-top: 8rem;

  }

}

@charset "UTF-8";
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}
.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}
.splide--rtl{direction:rtl}
.splide__track--ttb>.splide__list{display:block}
.splide__container{box-sizing:border-box;position:relative}
.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}
.splide.is-initialized:not(.is-active) .splide__list{display:block}
.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}
.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}
.splide:not(.is-overflow) .splide__pagination{display:none}
.splide__progress__bar{width:0}
.splide{position:relative;visibility:hidden}
.splide.is-initialized,.splide.is-rendered{visibility:visible}
.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}
.splide__slide img{vertical-align:bottom}
.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}
.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}
.splide__toggle.is-active .splide__toggle__pause{display:inline}
.splide__track{overflow:hidden;position:relative;z-index:0}
/*
https://alpinejs.dev/directives/cloak
*/
[x-cloak] {
  display: none !important;
}
/*
https://swup.js.org/getting-started/animations/
*/
html.is-changing .transition-main {
  opacity: 1;
  transition: opacity 0.25s;
}
html.is-animating .transition-main {
  opacity: 0;
}
html #swup-interview-body.is-changing {
  transition-duration: 0.4s;
}
html #swup-interview-body.is-changing .c-interview-card {
  transition: opacity 0.25s, translate 0.25s;
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(2) {
  transition-delay: calc(1 * 0.05s);
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(3) {
  transition-delay: calc(2 * 0.05s);
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(4) {
  transition-delay: calc(3 * 0.05s);
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(5) {
  transition-delay: calc(4 * 0.05s);
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(6) {
  transition-delay: calc(5 * 0.05s);
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(7) {
  transition-delay: calc(6 * 0.05s);
}
html #swup-interview-body.is-changing .c-interview-card:nth-child(8) {
  transition-delay: calc(7 * 0.05s);
}
html #swup-interview-body.is-animating .c-interview-card {
  opacity: 0;
  translate: 0 5%;
}
/* 
A (more) Modern CSS Reset 
https: //andy-bell.co.uk/a-more-modern-css-reset/
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}
/* Set core root defaults */
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizespeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  display: block;
  max-width: 100%;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
*,
::before,
::after {
  min-width: 0;
}
:focus:not(:focus-visible) {
  outline: none;
}
html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-zkg);
  font-size: 1rem;
  line-height: 1.5;
  word-wrap: anywhere;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-fixed {
  overflow: hidden;
}
body.is-overlay::before {
  opacity: 1;
}

h5,
h6 {
  margin: 0;
}
img,
svg {
  height: auto;
}
a {
  -webkit-text-decoration: none;
  text-decoration: none;
}
button {
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  touch-action: manipulation;
  cursor: pointer;
  background-color: transparent;
  border: none;
}
ol,
ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: "";
}
address {
  font-style: normal;
}
summary {
  display: block;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
input {
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
}
input[type=text] {
  font-size: 1rem;
}
label[for] {
  cursor: pointer;
}
select {
  cursor: pointer;
}
[id] {
  scroll-margin-top: 6.8125rem;
  scroll-margin-top: var(--header-height, 6.8125rem);
}
:root {
  --screen-xl: 1280;
  --screen-lg: 1024;
  --screen-md: 768;
  --screen-xs: 375;
  --z-header: 10;
  --z-infinity: calc(infinity);
  --pi: 3.1415;
  --color-white: #fff;
  --color-black: #000;
  --color-text: #111;
  --color-primary: #036dd6;
	  --color-primary: #000;
  --color-secondary: #d6410b;
  --color-blue: #60adf9;
  --color-light-blue: #e0f0ff;
  --color-light-blue2: #f3faff;
  --color-light-orange: #fffaf5;
  --color-border-white: #f2f2f2;
  --color-border-gray: #c8c9ce;
  --color-border-gray2: #e6e6e6;
  --color-border-gray3: #ccc;
  --color-border-gray4: #bfbfbf;
  --color-bg-gray: #f7f7f7;
  --color-bg-gray2: #d9d9d9;
  --color-bg-gray3: #a6a6a6;
  --color-bg-gray4: #f8f7f5;
  --color-bg-gray5: #6a6a6a;
  --color-disabled: #666;
  --color-text-gray: #888;
  --color-text-gray2: #999;
  --color-beige: #fdf6ee;
  --font-zkg: "Zen Kaku Gothic New", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-yakuhan-jp: "YakuHanJP", "Zen Kaku Gothic New", sans-serif;
  --leading-trim: calc((1em - 1lh) / 2);
  --linear: linear;
  --ease: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}
/*
ユーティリティクラス
*/
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.u-hidden {
  display: none;
}
@media screen and (min-width: 768px) {
  .u-md\:hidden[class] {
    display: none;
  }
}
.u-contents {
  display: contents;
}
@media screen and (min-width: 768px) {
  .u-md\:contents[class] {
    display: contents;
  }
}
.u-inline {
  display: inline;
}
@media screen and (min-width: 768px) {
  .u-md\:inline[class] {
    display: inline;
  }
}
.u-inline-block {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .u-md\:inline-block[class] {
    display: inline-block;
  }
}
.u-block {
  display: block;
}
@media screen and (min-width: 768px) {
  .u-md\:block[class] {
    display: block;
  }
}
.u-flex {
  display: flex;
}
@media screen and (min-width: 768px) {
  .u-md\:flex[class] {
    display: flex;
  }
}
.u-grid {
  display: grid;
}
@media screen and (min-width: 768px) {
  .u-md\:grid[class] {
    display: grid;
  }
}
.u-font-zkg {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-zkg);
}
@media screen and (min-width: 768px) {
  .u-md\:font-zkg[class] {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-family: var(--font-zkg);
  }
}
.u-font-poppins {
  font-family: "Poppins", sans-serif;
  font-family: var(--font-poppins);
}
@media screen and (min-width: 768px) {
  .u-md\:font-poppins[class] {
    font-family: "Poppins", sans-serif;
    font-family: var(--font-poppins);
  }
}
.u-font-inter {
  font-family: "Inter", sans-serif;
  font-family: var(--font-inter);
}
@media screen and (min-width: 768px) {
  .u-md\:font-inter[class] {
    font-family: "Inter", sans-serif;
    font-family: var(--font-inter);
  }
}
.u-font-yakuhan-jp {
  font-family: "YakuHanJP", "Zen Kaku Gothic New", sans-serif;
  font-family: var(--font-yakuhan-jp);
}
@media screen and (min-width: 768px) {
  .u-md\:font-yakuhan-jp[class] {
    font-family: "YakuHanJP", "Zen Kaku Gothic New", sans-serif;
    font-family: var(--font-yakuhan-jp);
  }
}
.u-font-\[normal\] {
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .u-md\:font-\[normal\][class] {
    font-weight: 400;
  }
}
.u-font-\[medium\] {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .u-md\:font-\[medium\][class] {
    font-weight: 500;
  }
}
.u-font-\[semibold\] {
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .u-md\:font-\[semibold\][class] {
    font-weight: 600;
  }
}
.u-font-\[bold\] {
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .u-md\:font-\[bold\][class] {
    font-weight: 700;
  }
}
.u-text-\[10\] {
  font-size: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[10\][class] {
    font-size: 0.625rem;
  }
}
.u-text-\[12\] {
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[12\][class] {
    font-size: 0.75rem;
  }
}
.u-text-\[14\] {
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[14\][class] {
    font-size: 0.875rem;
  }
}
.u-text-\[16\] {
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[16\][class] {
    font-size: 1rem;
  }
}
.u-text-\[18\] {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[18\][class] {
    font-size: 1.125rem;
  }
}
.u-text-\[20\] {
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[20\][class] {
    font-size: 1.25rem;
  }
}
.u-text-\[24\] {
  font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[24\][class] {
    font-size: 1.5rem;
  }
}
.u-text-\[28\] {
  font-size: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[28\][class] {
    font-size: 1.75rem;
  }
}
.u-text-\[30\] {
  font-size: 1.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[30\][class] {
    font-size: 1.875rem;
  }
}
.u-text-\[32\] {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[32\][class] {
    font-size: 2rem;
  }
}
.u-text-\[36\] {
  font-size: 2.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[36\][class] {
    font-size: 2.25rem;
  }
}
.u-text-\[40\] {
  font-size: 2.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[40\][class] {
    font-size: 2.5rem;
  }
}
.u-text-\[42\] {
  font-size: 2.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[42\][class] {
    font-size: 2.625rem;
  }
}
.u-text-\[48\] {
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[48\][class] {
    font-size: 3rem;
  }
}
.u-leading-\[100\] {
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[100\][class] {
    line-height: 1;
  }
}
.u-leading-\[120\] {
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[120\][class] {
    line-height: 1.2;
  }
}
.u-leading-\[130\] {
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[130\][class] {
    line-height: 1.3;
  }
}
.u-leading-\[150\] {
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[150\][class] {
    line-height: 1.5;
  }
}
.u-leading-\[165\] {
  line-height: 1.65;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[165\][class] {
    line-height: 1.65;
  }
}
.u-leading-\[175\] {
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[175\][class] {
    line-height: 1.75;
  }
}
.u-leading-\[200\] {
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .u-md\:leading-\[200\][class] {
    line-height: 2;
  }
}
.u-tracking-\[-10\] {
  letter-spacing: -0.01em;
}
@media screen and (min-width: 768px) {
  .u-md\:tracking-\[-10\][class] {
    letter-spacing: -0.01em;
  }
}
.u-tracking-\[-20\] {
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .u-md\:tracking-\[-20\][class] {
    letter-spacing: -0.02em;
  }
}
.u-tracking-\[0\] {
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:tracking-\[0\][class] {
    letter-spacing: 0;
  }
}
.u-tracking-\[20\] {
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .u-md\:tracking-\[20\][class] {
    letter-spacing: 0.02em;
  }
}
.u-tracking-\[40\] {
  letter-spacing: 0.04em;
}
@media screen and (min-width: 768px) {
  .u-md\:tracking-\[40\][class] {
    letter-spacing: 0.04em;
  }
}
.u-tracking-\[60\] {
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .u-md\:tracking-\[60\][class] {
    letter-spacing: 0.06em;
  }
}
.u-text-\[left\] {
  text-align: left;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[left\][class] {
    text-align: left;
  }
}
.u-text-\[center\] {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[center\][class] {
    text-align: center;
  }
}
.u-text-\[right\] {
  text-align: right;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[right\][class] {
    text-align: right;
  }
}
.u-text-\[justify\] {
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .u-md\:text-\[justify\][class] {
    text-align: justify;
  }
}
.u-color-white {
  color: #fff;
  color: var(--color-white);
}
@media screen and (min-width: 768px) {
  .u-md\:color-white[class] {
    color: #fff;
    color: var(--color-white);
  }
}
.u-color-black {
  color: #000;
  color: var(--color-black);
}
@media screen and (min-width: 768px) {
  .u-md\:color-black[class] {
    color: #000;
    color: var(--color-black);
  }
}
.u-color-text {
  color: #111;
  color: var(--color-text);
}
@media screen and (min-width: 768px) {
  .u-md\:color-text[class] {
    color: #111;
    color: var(--color-text);
  }
}
.u-color-primary {
  color: #036dd6;
  color: var(--color-primary);
}
@media screen and (min-width: 768px) {
  .u-md\:color-primary[class] {
    color: #036dd6;
    color: var(--color-primary);
  }
}
.u-color-secondary {
  color: #d6410b;
  color: var(--color-secondary);
}
@media screen and (min-width: 768px) {
  .u-md\:color-secondary[class] {
    color: #d6410b;
    color: var(--color-secondary);
  }
}
.u-color-blue {
  color: #60adf9;
  color: var(--color-blue);
}
@media screen and (min-width: 768px) {
  .u-md\:color-blue[class] {
    color: #60adf9;
    color: var(--color-blue);
  }
}
.u-color-light-blue {
  color: #e0f0ff;
  color: var(--color-light-blue);
}
@media screen and (min-width: 768px) {
  .u-md\:color-light-blue[class] {
    color: #e0f0ff;
    color: var(--color-light-blue);
  }
}
.u-color-light-blue2 {
  color: #f3faff;
  color: var(--color-light-blue2);
}
@media screen and (min-width: 768px) {
  .u-md\:color-light-blue2[class] {
    color: #f3faff;
    color: var(--color-light-blue2);
  }
}
.u-color-light-orange {
  color: #fffaf5;
  color: var(--color-light-orange);
}
@media screen and (min-width: 768px) {
  .u-md\:color-light-orange[class] {
    color: #fffaf5;
    color: var(--color-light-orange);
  }
}
.u-color-border-white {
  color: #f2f2f2;
  color: var(--color-border-white);
}
@media screen and (min-width: 768px) {
  .u-md\:color-border-white[class] {
    color: #f2f2f2;
    color: var(--color-border-white);
  }
}
.u-color-border-gray {
  color: #c8c9ce;
  color: var(--color-border-gray);
}
@media screen and (min-width: 768px) {
  .u-md\:color-border-gray[class] {
    color: #c8c9ce;
    color: var(--color-border-gray);
  }
}
.u-color-border-gray2 {
  color: #e6e6e6;
  color: var(--color-border-gray2);
}
@media screen and (min-width: 768px) {
  .u-md\:color-border-gray2[class] {
    color: #e6e6e6;
    color: var(--color-border-gray2);
  }
}
.u-color-border-gray3 {
  color: #ccc;
  color: var(--color-border-gray3);
}
@media screen and (min-width: 768px) {
  .u-md\:color-border-gray3[class] {
    color: #ccc;
    color: var(--color-border-gray3);
  }
}
.u-color-border-gray4 {
  color: #bfbfbf;
  color: var(--color-border-gray4);
}
@media screen and (min-width: 768px) {
  .u-md\:color-border-gray4[class] {
    color: #bfbfbf;
    color: var(--color-border-gray4);
  }
}
.u-color-bg-gray {
  color: #f7f7f7;
  color: var(--color-bg-gray);
}
@media screen and (min-width: 768px) {
  .u-md\:color-bg-gray[class] {
    color: #f7f7f7;
    color: var(--color-bg-gray);
  }
}
.u-color-bg-gray2 {
  color: #d9d9d9;
  color: var(--color-bg-gray2);
}
@media screen and (min-width: 768px) {
  .u-md\:color-bg-gray2[class] {
    color: #d9d9d9;
    color: var(--color-bg-gray2);
  }
}
.u-color-bg-gray3 {
  color: #a6a6a6;
  color: var(--color-bg-gray3);
}
@media screen and (min-width: 768px) {
  .u-md\:color-bg-gray3[class] {
    color: #a6a6a6;
    color: var(--color-bg-gray3);
  }
}
.u-color-bg-gray4 {
  color: #f8f7f5;
  color: var(--color-bg-gray4);
}
@media screen and (min-width: 768px) {
  .u-md\:color-bg-gray4[class] {
    color: #f8f7f5;
    color: var(--color-bg-gray4);
  }
}
.u-color-bg-gray5 {
  color: #6a6a6a;
  color: var(--color-bg-gray5);
}
@media screen and (min-width: 768px) {
  .u-md\:color-bg-gray5[class] {
    color: #6a6a6a;
    color: var(--color-bg-gray5);
  }
}
.u-color-disabled {
  color: #666;
  color: var(--color-disabled);
}
@media screen and (min-width: 768px) {
  .u-md\:color-disabled[class] {
    color: #666;
    color: var(--color-disabled);
  }
}
.u-color-text-gray {
  color: #888;
  color: var(--color-text-gray);
}
@media screen and (min-width: 768px) {
  .u-md\:color-text-gray[class] {
    color: #888;
    color: var(--color-text-gray);
  }
}
.u-color-text-gray2 {
  color: #999;
  color: var(--color-text-gray2);
}
@media screen and (min-width: 768px) {
  .u-md\:color-text-gray2[class] {
    color: #999;
    color: var(--color-text-gray2);
  }
}
.u-color-beige {
  color: #fdf6ee;
  color: var(--color-beige);
}
@media screen and (min-width: 768px) {
  .u-md\:color-beige[class] {
    color: #fdf6ee;
    color: var(--color-beige);
  }
}
.u-bg-white {
  background-color: #fff;
  background-color: var(--color-white);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-white[class] {
    background-color: #fff;
    background-color: var(--color-white);
  }
}
.u-bg-black {
  background-color: #000;
  background-color: var(--color-black);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-black[class] {
    background-color: #000;
    background-color: var(--color-black);
  }
}
.u-bg-text {
  background-color: #111;
  background-color: var(--color-text);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-text[class] {
    background-color: #111;
    background-color: var(--color-text);
  }
}
.u-bg-primary {
  background-color: #036dd6;
  background-color: var(--color-primary);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-primary[class] {
    background-color: #036dd6;
    background-color: var(--color-primary);
  }
}
.u-bg-secondary {
  background-color: #d6410b;
  background-color: var(--color-secondary);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-secondary[class] {
    background-color: #d6410b;
    background-color: var(--color-secondary);
  }
}
.u-bg-blue {
  background-color: #60adf9;
  background-color: var(--color-blue);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-blue[class] {
    background-color: #60adf9;
    background-color: var(--color-blue);
  }
}
.u-bg-light-blue {
  background-color: #e0f0ff;
  background-color: var(--color-light-blue);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-light-blue[class] {
    background-color: #e0f0ff;
    background-color: var(--color-light-blue);
  }
}
.u-bg-light-blue2 {
  background-color: #f3faff;
  background-color: var(--color-light-blue2);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-light-blue2[class] {
    background-color: #f3faff;
    background-color: var(--color-light-blue2);
  }
}
.u-bg-light-orange {
  background-color: #fffaf5;
  background-color: var(--color-light-orange);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-light-orange[class] {
    background-color: #fffaf5;
    background-color: var(--color-light-orange);
  }
}
.u-bg-border-white {
  background-color: #f2f2f2;
  background-color: var(--color-border-white);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-border-white[class] {
    background-color: #f2f2f2;
    background-color: var(--color-border-white);
  }
}
.u-bg-border-gray {
  background-color: #c8c9ce;
  background-color: var(--color-border-gray);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-border-gray[class] {
    background-color: #c8c9ce;
    background-color: var(--color-border-gray);
  }
}
.u-bg-border-gray2 {
  background-color: #e6e6e6;
  background-color: var(--color-border-gray2);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-border-gray2[class] {
    background-color: #e6e6e6;
    background-color: var(--color-border-gray2);
  }
}
.u-bg-border-gray3 {
  background-color: #ccc;
  background-color: var(--color-border-gray3);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-border-gray3[class] {
    background-color: #ccc;
    background-color: var(--color-border-gray3);
  }
}
.u-bg-border-gray4 {
  background-color: #bfbfbf;
  background-color: var(--color-border-gray4);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-border-gray4[class] {
    background-color: #bfbfbf;
    background-color: var(--color-border-gray4);
  }
}
.u-bg-bg-gray {
  background-color: #f7f7f7;
  background-color: var(--color-bg-gray);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-bg-gray[class] {
    background-color: #f7f7f7;
    background-color: var(--color-bg-gray);
  }
}
.u-bg-bg-gray2 {
  background-color: #d9d9d9;
  background-color: var(--color-bg-gray2);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-bg-gray2[class] {
    background-color: #d9d9d9;
    background-color: var(--color-bg-gray2);
  }
}
.u-bg-bg-gray3 {
  background-color: #a6a6a6;
  background-color: var(--color-bg-gray3);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-bg-gray3[class] {
    background-color: #a6a6a6;
    background-color: var(--color-bg-gray3);
  }
}
.u-bg-bg-gray4 {
  background-color: #f8f7f5;
  background-color: var(--color-bg-gray4);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-bg-gray4[class] {
    background-color: #f8f7f5;
    background-color: var(--color-bg-gray4);
  }
}
.u-bg-bg-gray5 {
  background-color: #6a6a6a;
  background-color: var(--color-bg-gray5);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-bg-gray5[class] {
    background-color: #6a6a6a;
    background-color: var(--color-bg-gray5);
  }
}
.u-bg-disabled {
  background-color: #666;
  background-color: var(--color-disabled);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-disabled[class] {
    background-color: #666;
    background-color: var(--color-disabled);
  }
}
.u-bg-text-gray {
  background-color: #888;
  background-color: var(--color-text-gray);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-text-gray[class] {
    background-color: #888;
    background-color: var(--color-text-gray);
  }
}
.u-bg-text-gray2 {
  background-color: #999;
  background-color: var(--color-text-gray2);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-text-gray2[class] {
    background-color: #999;
    background-color: var(--color-text-gray2);
  }
}
.u-bg-beige {
  background-color: #fdf6ee;
  background-color: var(--color-beige);
}
@media screen and (min-width: 768px) {
  .u-md\:bg-beige[class] {
    background-color: #fdf6ee;
    background-color: var(--color-beige);
  }
}
.u-m-\[0\] {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[0\][class] {
    margin: 0;
  }
}
.u-mx-\[0\] {
  margin-right: 0;
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[0\][class] {
    margin-right: 0;
    margin-left: 0;
  }
}
.u-my-\[0\] {
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[0\][class] {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.u-mt-\[0\] {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[0\][class] {
    margin-top: 0;
  }
}
.u-ml-\[0\] {
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[0\][class] {
    margin-left: 0;
  }
}
.u-mr-\[0\] {
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[0\][class] {
    margin-right: 0;
  }
}
.u-mb-\[0\] {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[0\][class] {
    margin-bottom: 0;
  }
}
.u-p-\[0\] {
  padding: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[0\][class] {
    padding: 0;
  }
}
.u-px-\[0\] {
  padding-right: 0;
  padding-left: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[0\][class] {
    padding-right: 0;
    padding-left: 0;
  }
}
.u-py-\[0\] {
  padding-top: 0;
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[0\][class] {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.u-pt-\[0\] {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[0\][class] {
    padding-top: 0;
  }
}
.u-pl-\[0\] {
  padding-left: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[0\][class] {
    padding-left: 0;
  }
}
.u-pr-\[0\] {
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[0\][class] {
    padding-right: 0;
  }
}
.u-pb-\[0\] {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[0\][class] {
    padding-bottom: 0;
  }
}
.u-gap-\[0\] {
  gap: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[0\][class] {
    gap: 0;
  }
}
.u-gap-x-\[0\] {
  -moz-column-gap: 0;
       column-gap: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[0\][class] {
    -moz-column-gap: 0;
         column-gap: 0;
  }
}
.u-gap-y-\[0\] {
  row-gap: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[0\][class] {
    row-gap: 0;
  }
}
.u-m-\[2\] {
  margin: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[2\][class] {
    margin: 0.125rem;
  }
}
.u-mx-\[2\] {
  margin-right: 0.125rem;
  margin-left: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[2\][class] {
    margin-right: 0.125rem;
    margin-left: 0.125rem;
  }
}
.u-my-\[2\] {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[2\][class] {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
  }
}
.u-mt-\[2\] {
  margin-top: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[2\][class] {
    margin-top: 0.125rem;
  }
}
.u-ml-\[2\] {
  margin-left: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[2\][class] {
    margin-left: 0.125rem;
  }
}
.u-mr-\[2\] {
  margin-right: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[2\][class] {
    margin-right: 0.125rem;
  }
}
.u-mb-\[2\] {
  margin-bottom: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[2\][class] {
    margin-bottom: 0.125rem;
  }
}
.u-p-\[2\] {
  padding: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[2\][class] {
    padding: 0.125rem;
  }
}
.u-px-\[2\] {
  padding-right: 0.125rem;
  padding-left: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[2\][class] {
    padding-right: 0.125rem;
    padding-left: 0.125rem;
  }
}
.u-py-\[2\] {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[2\][class] {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
}
.u-pt-\[2\] {
  padding-top: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[2\][class] {
    padding-top: 0.125rem;
  }
}
.u-pl-\[2\] {
  padding-left: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[2\][class] {
    padding-left: 0.125rem;
  }
}
.u-pr-\[2\] {
  padding-right: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[2\][class] {
    padding-right: 0.125rem;
  }
}
.u-pb-\[2\] {
  padding-bottom: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[2\][class] {
    padding-bottom: 0.125rem;
  }
}
.u-gap-\[2\] {
  gap: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[2\][class] {
    gap: 0.125rem;
  }
}
.u-gap-x-\[2\] {
  -moz-column-gap: 0.125rem;
       column-gap: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[2\][class] {
    -moz-column-gap: 0.125rem;
         column-gap: 0.125rem;
  }
}
.u-gap-y-\[2\] {
  row-gap: 0.125rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[2\][class] {
    row-gap: 0.125rem;
  }
}
.u-m-\[4\] {
  margin: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[4\][class] {
    margin: 0.25rem;
  }
}
.u-mx-\[4\] {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[4\][class] {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
}
.u-my-\[4\] {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[4\][class] {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}
.u-mt-\[4\] {
  margin-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[4\][class] {
    margin-top: 0.25rem;
  }
}
.u-ml-\[4\] {
  margin-left: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[4\][class] {
    margin-left: 0.25rem;
  }
}
.u-mr-\[4\] {
  margin-right: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[4\][class] {
    margin-right: 0.25rem;
  }
}
.u-mb-\[4\] {
  margin-bottom: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[4\][class] {
    margin-bottom: 0.25rem;
  }
}
.u-p-\[4\] {
  padding: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[4\][class] {
    padding: 0.25rem;
  }
}
.u-px-\[4\] {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[4\][class] {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
}
.u-py-\[4\] {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[4\][class] {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}
.u-pt-\[4\] {
  padding-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[4\][class] {
    padding-top: 0.25rem;
  }
}
.u-pl-\[4\] {
  padding-left: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[4\][class] {
    padding-left: 0.25rem;
  }
}
.u-pr-\[4\] {
  padding-right: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[4\][class] {
    padding-right: 0.25rem;
  }
}
.u-pb-\[4\] {
  padding-bottom: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[4\][class] {
    padding-bottom: 0.25rem;
  }
}
.u-gap-\[4\] {
  gap: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[4\][class] {
    gap: 0.25rem;
  }
}
.u-gap-x-\[4\] {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[4\][class] {
    -moz-column-gap: 0.25rem;
         column-gap: 0.25rem;
  }
}
.u-gap-y-\[4\] {
  row-gap: 0.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[4\][class] {
    row-gap: 0.25rem;
  }
}
.u-m-\[6\] {
  margin: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[6\][class] {
    margin: 0.375rem;
  }
}
.u-mx-\[6\] {
  margin-right: 0.375rem;
  margin-left: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[6\][class] {
    margin-right: 0.375rem;
    margin-left: 0.375rem;
  }
}
.u-my-\[6\] {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[6\][class] {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
  }
}
.u-mt-\[6\] {
  margin-top: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[6\][class] {
    margin-top: 0.375rem;
  }
}
.u-ml-\[6\] {
  margin-left: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[6\][class] {
    margin-left: 0.375rem;
  }
}
.u-mr-\[6\] {
  margin-right: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[6\][class] {
    margin-right: 0.375rem;
  }
}
.u-mb-\[6\] {
  margin-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[6\][class] {
    margin-bottom: 0.375rem;
  }
}
.u-p-\[6\] {
  padding: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[6\][class] {
    padding: 0.375rem;
  }
}
.u-px-\[6\] {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[6\][class] {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
  }
}
.u-py-\[6\] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[6\][class] {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}
.u-pt-\[6\] {
  padding-top: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[6\][class] {
    padding-top: 0.375rem;
  }
}
.u-pl-\[6\] {
  padding-left: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[6\][class] {
    padding-left: 0.375rem;
  }
}
.u-pr-\[6\] {
  padding-right: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[6\][class] {
    padding-right: 0.375rem;
  }
}
.u-pb-\[6\] {
  padding-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[6\][class] {
    padding-bottom: 0.375rem;
  }
}
.u-gap-\[6\] {
  gap: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[6\][class] {
    gap: 0.375rem;
  }
}
.u-gap-x-\[6\] {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[6\][class] {
    -moz-column-gap: 0.375rem;
         column-gap: 0.375rem;
  }
}
.u-gap-y-\[6\] {
  row-gap: 0.375rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[6\][class] {
    row-gap: 0.375rem;
  }
}
.u-m-\[8\] {
  margin: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[8\][class] {
    margin: 0.5rem;
  }
}
.u-mx-\[8\] {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[8\][class] {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
}
.u-my-\[8\] {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[8\][class] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}
.u-mt-\[8\] {
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[8\][class] {
    margin-top: 0.5rem;
  }
}
.u-ml-\[8\] {
  margin-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[8\][class] {
    margin-left: 0.5rem;
  }
}
.u-mr-\[8\] {
  margin-right: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[8\][class] {
    margin-right: 0.5rem;
  }
}
.u-mb-\[8\] {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[8\][class] {
    margin-bottom: 0.5rem;
  }
}
.u-p-\[8\] {
  padding: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[8\][class] {
    padding: 0.5rem;
  }
}
.u-px-\[8\] {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[8\][class] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}
.u-py-\[8\] {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[8\][class] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
.u-pt-\[8\] {
  padding-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[8\][class] {
    padding-top: 0.5rem;
  }
}
.u-pl-\[8\] {
  padding-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[8\][class] {
    padding-left: 0.5rem;
  }
}
.u-pr-\[8\] {
  padding-right: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[8\][class] {
    padding-right: 0.5rem;
  }
}
.u-pb-\[8\] {
  padding-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[8\][class] {
    padding-bottom: 0.5rem;
  }
}
.u-gap-\[8\] {
  gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[8\][class] {
    gap: 0.5rem;
  }
}
.u-gap-x-\[8\] {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[8\][class] {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
}
.u-gap-y-\[8\] {
  row-gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[8\][class] {
    row-gap: 0.5rem;
  }
}
.u-m-\[10\] {
  margin: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[10\][class] {
    margin: 0.625rem;
  }
}
.u-mx-\[10\] {
  margin-right: 0.625rem;
  margin-left: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[10\][class] {
    margin-right: 0.625rem;
    margin-left: 0.625rem;
  }
}
.u-my-\[10\] {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[10\][class] {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }
}
.u-mt-\[10\] {
  margin-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[10\][class] {
    margin-top: 0.625rem;
  }
}
.u-ml-\[10\] {
  margin-left: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[10\][class] {
    margin-left: 0.625rem;
  }
}
.u-mr-\[10\] {
  margin-right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[10\][class] {
    margin-right: 0.625rem;
  }
}
.u-mb-\[10\] {
  margin-bottom: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[10\][class] {
    margin-bottom: 0.625rem;
  }
}
.u-p-\[10\] {
  padding: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[10\][class] {
    padding: 0.625rem;
  }
}
.u-px-\[10\] {
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[10\][class] {
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }
}
.u-py-\[10\] {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[10\][class] {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}
.u-pt-\[10\] {
  padding-top: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[10\][class] {
    padding-top: 0.625rem;
  }
}
.u-pl-\[10\] {
  padding-left: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[10\][class] {
    padding-left: 0.625rem;
  }
}
.u-pr-\[10\] {
  padding-right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[10\][class] {
    padding-right: 0.625rem;
  }
}
.u-pb-\[10\] {
  padding-bottom: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[10\][class] {
    padding-bottom: 0.625rem;
  }
}
.u-gap-\[10\] {
  gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[10\][class] {
    gap: 0.625rem;
  }
}
.u-gap-x-\[10\] {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[10\][class] {
    -moz-column-gap: 0.625rem;
         column-gap: 0.625rem;
  }
}
.u-gap-y-\[10\] {
  row-gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[10\][class] {
    row-gap: 0.625rem;
  }
}
.u-m-\[12\] {
  margin: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[12\][class] {
    margin: 0.75rem;
  }
}
.u-mx-\[12\] {
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[12\][class] {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
  }
}
.u-my-\[12\] {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[12\][class] {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
}
.u-mt-\[12\] {
  margin-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[12\][class] {
    margin-top: 0.75rem;
  }
}
.u-ml-\[12\] {
  margin-left: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[12\][class] {
    margin-left: 0.75rem;
  }
}
.u-mr-\[12\] {
  margin-right: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[12\][class] {
    margin-right: 0.75rem;
  }
}
.u-mb-\[12\] {
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[12\][class] {
    margin-bottom: 0.75rem;
  }
}
.u-p-\[12\] {
  padding: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[12\][class] {
    padding: 0.75rem;
  }
}
.u-px-\[12\] {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[12\][class] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}
.u-py-\[12\] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[12\][class] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
.u-pt-\[12\] {
  padding-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[12\][class] {
    padding-top: 0.75rem;
  }
}
.u-pl-\[12\] {
  padding-left: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[12\][class] {
    padding-left: 0.75rem;
  }
}
.u-pr-\[12\] {
  padding-right: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[12\][class] {
    padding-right: 0.75rem;
  }
}
.u-pb-\[12\] {
  padding-bottom: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[12\][class] {
    padding-bottom: 0.75rem;
  }
}
.u-gap-\[12\] {
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[12\][class] {
    gap: 0.75rem;
  }
}
.u-gap-x-\[12\] {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[12\][class] {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
}
.u-gap-y-\[12\] {
  row-gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[12\][class] {
    row-gap: 0.75rem;
  }
}
.u-m-\[14\] {
  margin: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[14\][class] {
    margin: 0.875rem;
  }
}
.u-mx-\[14\] {
  margin-right: 0.875rem;
  margin-left: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[14\][class] {
    margin-right: 0.875rem;
    margin-left: 0.875rem;
  }
}
.u-my-\[14\] {
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[14\][class] {
    margin-top: 0.875rem;
    margin-bottom: 0.875rem;
  }
}
.u-mt-\[14\] {
  margin-top: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[14\][class] {
    margin-top: 0.875rem;
  }
}
.u-ml-\[14\] {
  margin-left: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[14\][class] {
    margin-left: 0.875rem;
  }
}
.u-mr-\[14\] {
  margin-right: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[14\][class] {
    margin-right: 0.875rem;
  }
}
.u-mb-\[14\] {
  margin-bottom: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[14\][class] {
    margin-bottom: 0.875rem;
  }
}
.u-p-\[14\] {
  padding: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[14\][class] {
    padding: 0.875rem;
  }
}
.u-px-\[14\] {
  padding-right: 0.875rem;
  padding-left: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[14\][class] {
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }
}
.u-py-\[14\] {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[14\][class] {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
}
.u-pt-\[14\] {
  padding-top: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[14\][class] {
    padding-top: 0.875rem;
  }
}
.u-pl-\[14\] {
  padding-left: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[14\][class] {
    padding-left: 0.875rem;
  }
}
.u-pr-\[14\] {
  padding-right: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[14\][class] {
    padding-right: 0.875rem;
  }
}
.u-pb-\[14\] {
  padding-bottom: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[14\][class] {
    padding-bottom: 0.875rem;
  }
}
.u-gap-\[14\] {
  gap: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[14\][class] {
    gap: 0.875rem;
  }
}
.u-gap-x-\[14\] {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[14\][class] {
    -moz-column-gap: 0.875rem;
         column-gap: 0.875rem;
  }
}
.u-gap-y-\[14\] {
  row-gap: 0.875rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[14\][class] {
    row-gap: 0.875rem;
  }
}
.u-m-\[16\] {
  margin: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[16\][class] {
    margin: 1rem;
  }
}
.u-mx-\[16\] {
  margin-right: 1rem;
  margin-left: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[16\][class] {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}
.u-my-\[16\] {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[16\][class] {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
.u-mt-\[16\] {
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[16\][class] {
    margin-top: 1rem;
  }
}
.u-ml-\[16\] {
  margin-left: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[16\][class] {
    margin-left: 1rem;
  }
}
.u-mr-\[16\] {
  margin-right: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[16\][class] {
    margin-right: 1rem;
  }
}
.u-mb-\[16\] {
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[16\][class] {
    margin-bottom: 1rem;
  }
}
.u-p-\[16\] {
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[16\][class] {
    padding: 1rem;
  }
}
.u-px-\[16\] {
  padding-right: 1rem;
  padding-left: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[16\][class] {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
.u-py-\[16\] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[16\][class] {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.u-pt-\[16\] {
  padding-top: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[16\][class] {
    padding-top: 1rem;
  }
}
.u-pl-\[16\] {
  padding-left: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[16\][class] {
    padding-left: 1rem;
  }
}
.u-pr-\[16\] {
  padding-right: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[16\][class] {
    padding-right: 1rem;
  }
}
.u-pb-\[16\] {
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[16\][class] {
    padding-bottom: 1rem;
  }
}
.u-gap-\[16\] {
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[16\][class] {
    gap: 1rem;
  }
}
.u-gap-x-\[16\] {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[16\][class] {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
.u-gap-y-\[16\] {
  row-gap: 1rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[16\][class] {
    row-gap: 1rem;
  }
}
.u-m-\[20\] {
  margin: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[20\][class] {
    margin: 1.25rem;
  }
}
.u-mx-\[20\] {
  margin-right: 1.25rem;
  margin-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[20\][class] {
    margin-right: 1.25rem;
    margin-left: 1.25rem;
  }
}
.u-my-\[20\] {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[20\][class] {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
}
.u-mt-\[20\] {
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[20\][class] {
    margin-top: 1.25rem;
  }
}
.u-ml-\[20\] {
  margin-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[20\][class] {
    margin-left: 1.25rem;
  }
}
.u-mr-\[20\] {
  margin-right: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[20\][class] {
    margin-right: 1.25rem;
  }
}
.u-mb-\[20\] {
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[20\][class] {
    margin-bottom: 1.25rem;
  }
}
.u-p-\[20\] {
  padding: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[20\][class] {
    padding: 1.25rem;
  }
}
.u-px-\[20\] {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[20\][class] {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
.u-py-\[20\] {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[20\][class] {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}
.u-pt-\[20\] {
  padding-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[20\][class] {
    padding-top: 1.25rem;
  }
}
.u-pl-\[20\] {
  padding-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[20\][class] {
    padding-left: 1.25rem;
  }
}
.u-pr-\[20\] {
  padding-right: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[20\][class] {
    padding-right: 1.25rem;
  }
}
.u-pb-\[20\] {
  padding-bottom: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[20\][class] {
    padding-bottom: 1.25rem;
  }
}
.u-gap-\[20\] {
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[20\][class] {
    gap: 1.25rem;
  }
}
.u-gap-x-\[20\] {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[20\][class] {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }
}
.u-gap-y-\[20\] {
  row-gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[20\][class] {
    row-gap: 1.25rem;
  }
}
.u-m-\[24\] {
  margin: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[24\][class] {
    margin: 1.5rem;
  }
}
.u-mx-\[24\] {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[24\][class] {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
}
.u-my-\[24\] {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[24\][class] {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.u-mt-\[24\] {
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[24\][class] {
    margin-top: 1.5rem;
  }
}
.u-ml-\[24\] {
  margin-left: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[24\][class] {
    margin-left: 1.5rem;
  }
}
.u-mr-\[24\] {
  margin-right: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[24\][class] {
    margin-right: 1.5rem;
  }
}
.u-mb-\[24\] {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[24\][class] {
    margin-bottom: 1.5rem;
  }
}
.u-p-\[24\] {
  padding: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[24\][class] {
    padding: 1.5rem;
  }
}
.u-px-\[24\] {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[24\][class] {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
.u-py-\[24\] {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[24\][class] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
.u-pt-\[24\] {
  padding-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[24\][class] {
    padding-top: 1.5rem;
  }
}
.u-pl-\[24\] {
  padding-left: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[24\][class] {
    padding-left: 1.5rem;
  }
}
.u-pr-\[24\] {
  padding-right: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[24\][class] {
    padding-right: 1.5rem;
  }
}
.u-pb-\[24\] {
  padding-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[24\][class] {
    padding-bottom: 1.5rem;
  }
}
.u-gap-\[24\] {
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[24\][class] {
    gap: 1.5rem;
  }
}
.u-gap-x-\[24\] {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[24\][class] {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
}
.u-gap-y-\[24\] {
  row-gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[24\][class] {
    row-gap: 1.5rem;
  }
}
.u-m-\[28\] {
  margin: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[28\][class] {
    margin: 1.75rem;
  }
}
.u-mx-\[28\] {
  margin-right: 1.75rem;
  margin-left: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[28\][class] {
    margin-right: 1.75rem;
    margin-left: 1.75rem;
  }
}
.u-my-\[28\] {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[28\][class] {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }
}
.u-mt-\[28\] {
  margin-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[28\][class] {
    margin-top: 1.75rem;
  }
}
.u-ml-\[28\] {
  margin-left: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[28\][class] {
    margin-left: 1.75rem;
  }
}
.u-mr-\[28\] {
  margin-right: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[28\][class] {
    margin-right: 1.75rem;
  }
}
.u-mb-\[28\] {
  margin-bottom: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[28\][class] {
    margin-bottom: 1.75rem;
  }
}
.u-p-\[28\] {
  padding: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[28\][class] {
    padding: 1.75rem;
  }
}
.u-px-\[28\] {
  padding-right: 1.75rem;
  padding-left: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[28\][class] {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
}
.u-py-\[28\] {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[28\][class] {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}
.u-pt-\[28\] {
  padding-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[28\][class] {
    padding-top: 1.75rem;
  }
}
.u-pl-\[28\] {
  padding-left: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[28\][class] {
    padding-left: 1.75rem;
  }
}
.u-pr-\[28\] {
  padding-right: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[28\][class] {
    padding-right: 1.75rem;
  }
}
.u-pb-\[28\] {
  padding-bottom: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[28\][class] {
    padding-bottom: 1.75rem;
  }
}
.u-gap-\[28\] {
  gap: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[28\][class] {
    gap: 1.75rem;
  }
}
.u-gap-x-\[28\] {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[28\][class] {
    -moz-column-gap: 1.75rem;
         column-gap: 1.75rem;
  }
}
.u-gap-y-\[28\] {
  row-gap: 1.75rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[28\][class] {
    row-gap: 1.75rem;
  }
}
.u-m-\[32\] {
  margin: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[32\][class] {
    margin: 2rem;
  }
}
.u-mx-\[32\] {
  margin-right: 2rem;
  margin-left: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[32\][class] {
    margin-right: 2rem;
    margin-left: 2rem;
  }
}
.u-my-\[32\] {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[32\][class] {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
.u-mt-\[32\] {
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[32\][class] {
    margin-top: 2rem;
  }
}
.u-ml-\[32\] {
  margin-left: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[32\][class] {
    margin-left: 2rem;
  }
}
.u-mr-\[32\] {
  margin-right: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[32\][class] {
    margin-right: 2rem;
  }
}
.u-mb-\[32\] {
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[32\][class] {
    margin-bottom: 2rem;
  }
}
.u-p-\[32\] {
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[32\][class] {
    padding: 2rem;
  }
}
.u-px-\[32\] {
  padding-right: 2rem;
  padding-left: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[32\][class] {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
.u-py-\[32\] {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[32\][class] {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.u-pt-\[32\] {
  padding-top: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[32\][class] {
    padding-top: 2rem;
  }
}
.u-pl-\[32\] {
  padding-left: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[32\][class] {
    padding-left: 2rem;
  }
}
.u-pr-\[32\] {
  padding-right: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[32\][class] {
    padding-right: 2rem;
  }
}
.u-pb-\[32\] {
  padding-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[32\][class] {
    padding-bottom: 2rem;
  }
}
.u-gap-\[32\] {
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[32\][class] {
    gap: 2rem;
  }
}
.u-gap-x-\[32\] {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[32\][class] {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
.u-gap-y-\[32\] {
  row-gap: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[32\][class] {
    row-gap: 2rem;
  }
}
.u-m-\[48\] {
  margin: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[48\][class] {
    margin: 3rem;
  }
}
.u-mx-\[48\] {
  margin-right: 3rem;
  margin-left: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[48\][class] {
    margin-right: 3rem;
    margin-left: 3rem;
  }
}
.u-my-\[48\] {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[48\][class] {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}
.u-mt-\[48\] {
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[48\][class] {
    margin-top: 3rem;
  }
}
.u-ml-\[48\] {
  margin-left: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[48\][class] {
    margin-left: 3rem;
  }
}
.u-mr-\[48\] {
  margin-right: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[48\][class] {
    margin-right: 3rem;
  }
}
.u-mb-\[48\] {
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[48\][class] {
    margin-bottom: 3rem;
  }
}
.u-p-\[48\] {
  padding: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[48\][class] {
    padding: 3rem;
  }
}
.u-px-\[48\] {
  padding-right: 3rem;
  padding-left: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[48\][class] {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
.u-py-\[48\] {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[48\][class] {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.u-pt-\[48\] {
  padding-top: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[48\][class] {
    padding-top: 3rem;
  }
}
.u-pl-\[48\] {
  padding-left: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[48\][class] {
    padding-left: 3rem;
  }
}
.u-pr-\[48\] {
  padding-right: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[48\][class] {
    padding-right: 3rem;
  }
}
.u-pb-\[48\] {
  padding-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[48\][class] {
    padding-bottom: 3rem;
  }
}
.u-gap-\[48\] {
  gap: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[48\][class] {
    gap: 3rem;
  }
}
.u-gap-x-\[48\] {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[48\][class] {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}
.u-gap-y-\[48\] {
  row-gap: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[48\][class] {
    row-gap: 3rem;
  }
}
.u-m-\[56\] {
  margin: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[56\][class] {
    margin: 3.5rem;
  }
}
.u-mx-\[56\] {
  margin-right: 3.5rem;
  margin-left: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[56\][class] {
    margin-right: 3.5rem;
    margin-left: 3.5rem;
  }
}
.u-my-\[56\] {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[56\][class] {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
}
.u-mt-\[56\] {
  margin-top: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[56\][class] {
    margin-top: 3.5rem;
  }
}
.u-ml-\[56\] {
  margin-left: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[56\][class] {
    margin-left: 3.5rem;
  }
}
.u-mr-\[56\] {
  margin-right: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[56\][class] {
    margin-right: 3.5rem;
  }
}
.u-mb-\[56\] {
  margin-bottom: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[56\][class] {
    margin-bottom: 3.5rem;
  }
}
.u-p-\[56\] {
  padding: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[56\][class] {
    padding: 3.5rem;
  }
}
.u-px-\[56\] {
  padding-right: 3.5rem;
  padding-left: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[56\][class] {
    padding-right: 3.5rem;
    padding-left: 3.5rem;
  }
}
.u-py-\[56\] {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[56\][class] {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
.u-pt-\[56\] {
  padding-top: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[56\][class] {
    padding-top: 3.5rem;
  }
}
.u-pl-\[56\] {
  padding-left: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[56\][class] {
    padding-left: 3.5rem;
  }
}
.u-pr-\[56\] {
  padding-right: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[56\][class] {
    padding-right: 3.5rem;
  }
}
.u-pb-\[56\] {
  padding-bottom: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[56\][class] {
    padding-bottom: 3.5rem;
  }
}
.u-gap-\[56\] {
  gap: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[56\][class] {
    gap: 3.5rem;
  }
}
.u-gap-x-\[56\] {
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[56\][class] {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }
}
.u-gap-y-\[56\] {
  row-gap: 3.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[56\][class] {
    row-gap: 3.5rem;
  }
}
.u-m-\[64\] {
  margin: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[64\][class] {
    margin: 4rem;
  }
}
.u-mx-\[64\] {
  margin-right: 4rem;
  margin-left: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[64\][class] {
    margin-right: 4rem;
    margin-left: 4rem;
  }
}
.u-my-\[64\] {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[64\][class] {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.u-mt-\[64\] {
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[64\][class] {
    margin-top: 4rem;
  }
}
.u-ml-\[64\] {
  margin-left: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[64\][class] {
    margin-left: 4rem;
  }
}
.u-mr-\[64\] {
  margin-right: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[64\][class] {
    margin-right: 4rem;
  }
}
.u-mb-\[64\] {
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[64\][class] {
    margin-bottom: 4rem;
  }
}
.u-p-\[64\] {
  padding: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[64\][class] {
    padding: 4rem;
  }
}
.u-px-\[64\] {
  padding-right: 4rem;
  padding-left: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[64\][class] {
    padding-right: 4rem;
    padding-left: 4rem;
  }
}
.u-py-\[64\] {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[64\][class] {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.u-pt-\[64\] {
  padding-top: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[64\][class] {
    padding-top: 4rem;
  }
}
.u-pl-\[64\] {
  padding-left: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[64\][class] {
    padding-left: 4rem;
  }
}
.u-pr-\[64\] {
  padding-right: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[64\][class] {
    padding-right: 4rem;
  }
}
.u-pb-\[64\] {
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[64\][class] {
    padding-bottom: 4rem;
  }
}
.u-gap-\[64\] {
  gap: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[64\][class] {
    gap: 4rem;
  }
}
.u-gap-x-\[64\] {
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[64\][class] {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }
}
.u-gap-y-\[64\] {
  row-gap: 4rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[64\][class] {
    row-gap: 4rem;
  }
}
.u-m-\[72\] {
  margin: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[72\][class] {
    margin: 4.5rem;
  }
}
.u-mx-\[72\] {
  margin-right: 4.5rem;
  margin-left: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[72\][class] {
    margin-right: 4.5rem;
    margin-left: 4.5rem;
  }
}
.u-my-\[72\] {
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[72\][class] {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
}
.u-mt-\[72\] {
  margin-top: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[72\][class] {
    margin-top: 4.5rem;
  }
}
.u-ml-\[72\] {
  margin-left: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[72\][class] {
    margin-left: 4.5rem;
  }
}
.u-mr-\[72\] {
  margin-right: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[72\][class] {
    margin-right: 4.5rem;
  }
}
.u-mb-\[72\] {
  margin-bottom: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[72\][class] {
    margin-bottom: 4.5rem;
  }
}
.u-p-\[72\] {
  padding: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[72\][class] {
    padding: 4.5rem;
  }
}
.u-px-\[72\] {
  padding-right: 4.5rem;
  padding-left: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[72\][class] {
    padding-right: 4.5rem;
    padding-left: 4.5rem;
  }
}
.u-py-\[72\] {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[72\][class] {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}
.u-pt-\[72\] {
  padding-top: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[72\][class] {
    padding-top: 4.5rem;
  }
}
.u-pl-\[72\] {
  padding-left: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[72\][class] {
    padding-left: 4.5rem;
  }
}
.u-pr-\[72\] {
  padding-right: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[72\][class] {
    padding-right: 4.5rem;
  }
}
.u-pb-\[72\] {
  padding-bottom: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[72\][class] {
    padding-bottom: 4.5rem;
  }
}
.u-gap-\[72\] {
  gap: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[72\][class] {
    gap: 4.5rem;
  }
}
.u-gap-x-\[72\] {
  -moz-column-gap: 4.5rem;
       column-gap: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[72\][class] {
    -moz-column-gap: 4.5rem;
         column-gap: 4.5rem;
  }
}
.u-gap-y-\[72\] {
  row-gap: 4.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[72\][class] {
    row-gap: 4.5rem;
  }
}
.u-m-\[auto\] {
  margin: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:m-\[auto\][class] {
    margin: auto;
  }
}
.u-mx-\[auto\] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:mx-\[auto\][class] {
    margin-right: auto;
    margin-left: auto;
  }
}
.u-my-\[auto\] {
  margin-top: auto;
  margin-bottom: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:my-\[auto\][class] {
    margin-top: auto;
    margin-bottom: auto;
  }
}
.u-mt-\[auto\] {
  margin-top: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:mt-\[auto\][class] {
    margin-top: auto;
  }
}
.u-ml-\[auto\] {
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:ml-\[auto\][class] {
    margin-left: auto;
  }
}
.u-mr-\[auto\] {
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:mr-\[auto\][class] {
    margin-right: auto;
  }
}
.u-mb-\[auto\] {
  margin-bottom: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:mb-\[auto\][class] {
    margin-bottom: auto;
  }
}
.u-p-\[auto\] {
  padding: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:p-\[auto\][class] {
    padding: auto;
  }
}
.u-px-\[auto\] {
  padding-right: auto;
  padding-left: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:px-\[auto\][class] {
    padding-right: auto;
    padding-left: auto;
  }
}
.u-py-\[auto\] {
  padding-top: auto;
  padding-bottom: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:py-\[auto\][class] {
    padding-top: auto;
    padding-bottom: auto;
  }
}
.u-pt-\[auto\] {
  padding-top: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:pt-\[auto\][class] {
    padding-top: auto;
  }
}
.u-pl-\[auto\] {
  padding-left: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:pl-\[auto\][class] {
    padding-left: auto;
  }
}
.u-pr-\[auto\] {
  padding-right: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:pr-\[auto\][class] {
    padding-right: auto;
  }
}
.u-pb-\[auto\] {
  padding-bottom: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:pb-\[auto\][class] {
    padding-bottom: auto;
  }
}
.u-gap-\[auto\] {
  gap: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-\[auto\][class] {
    gap: auto;
  }
}
.u-gap-x-\[auto\] {
  -moz-column-gap: auto;
       column-gap: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-x-\[auto\][class] {
    -moz-column-gap: auto;
         column-gap: auto;
  }
}
.u-gap-y-\[auto\] {
  row-gap: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:gap-y-\[auto\][class] {
    row-gap: auto;
  }
}
.u-w-\[0\] {
  width: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[0\][class] {
    width: 0;
  }
}
.u-h-\[0\] {
  height: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[0\][class] {
    height: 0;
  }
}
.u-size-\[0\] {
  width: 0;
  height: 0;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[0\][class] {
    width: 0;
    height: 0;
  }
}
.u-w-\[20\] {
  width: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[20\][class] {
    width: 1.25rem;
  }
}
.u-h-\[20\] {
  height: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[20\][class] {
    height: 1.25rem;
  }
}
.u-size-\[20\] {
  width: 1.25rem;
  height: 1.25rem;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[20\][class] {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.u-w-\[32\] {
  width: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[32\][class] {
    width: 2rem;
  }
}
.u-h-\[32\] {
  height: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[32\][class] {
    height: 2rem;
  }
}
.u-size-\[32\] {
  width: 2rem;
  height: 2rem;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[32\][class] {
    width: 2rem;
    height: 2rem;
  }
}
.u-w-\[40\] {
  width: 2.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[40\][class] {
    width: 2.5rem;
  }
}
.u-h-\[40\] {
  height: 2.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[40\][class] {
    height: 2.5rem;
  }
}
.u-size-\[40\] {
  width: 2.5rem;
  height: 2.5rem;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[40\][class] {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.u-w-\[48\] {
  width: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[48\][class] {
    width: 3rem;
  }
}
.u-h-\[48\] {
  height: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[48\][class] {
    height: 3rem;
  }
}
.u-size-\[48\] {
  width: 3rem;
  height: 3rem;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[48\][class] {
    width: 3rem;
    height: 3rem;
  }
}
.u-w-\[half\] {
  width: 50%;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[half\][class] {
    width: 50%;
  }
}
.u-h-\[half\] {
  height: 50%;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[half\][class] {
    height: 50%;
  }
}
.u-size-\[half\] {
  width: 50%;
  height: 50%;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[half\][class] {
    width: 50%;
    height: 50%;
  }
}
.u-w-\[full\] {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[full\][class] {
    width: 100%;
  }
}
.u-h-\[full\] {
  height: 100%;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[full\][class] {
    height: 100%;
  }
}
.u-size-\[full\] {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[full\][class] {
    width: 100%;
    height: 100%;
  }
}
.u-w-\[fit\] {
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[fit\][class] {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.u-h-\[fit\] {
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[fit\][class] {
    height: -moz-fit-content;
    height: fit-content;
  }
}
.u-size-\[fit\] {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[fit\][class] {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.u-w-\[min\] {
  width: -moz-min-content;
  width: min-content;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[min\][class] {
    width: -moz-min-content;
    width: min-content;
  }
}
.u-h-\[min\] {
  height: -moz-min-content;
  height: min-content;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[min\][class] {
    height: -moz-min-content;
    height: min-content;
  }
}
.u-size-\[min\] {
  width: -moz-min-content;
  width: min-content;
  height: -moz-min-content;
  height: min-content;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[min\][class] {
    width: -moz-min-content;
    width: min-content;
    height: -moz-min-content;
    height: min-content;
  }
}
.u-w-\[max\] {
  width: -moz-max-content;
  width: max-content;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[max\][class] {
    width: -moz-max-content;
    width: max-content;
  }
}
.u-h-\[max\] {
  height: -moz-max-content;
  height: max-content;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[max\][class] {
    height: -moz-max-content;
    height: max-content;
  }
}
.u-size-\[max\] {
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[max\][class] {
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
  }
}
.u-w-\[auto\] {
  width: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:w-\[auto\][class] {
    width: auto;
  }
}
.u-h-\[auto\] {
  height: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:h-\[auto\][class] {
    height: auto;
  }
}
.u-size-\[auto\] {
  width: auto;
  height: auto;
}
@media screen and (min-width: 768px) {
  .u-md\:size-\[auto\][class] {
    width: auto;
    height: auto;
  }
}
.u-grid-cols-\[1\] {
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[1\][class] {
    grid-template-columns: repeat(1, 1fr);
  }
}
.u-grid-rows-\[1\] {
  grid-template-rows: repeat(1, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[1\][class] {
    grid-template-rows: repeat(1, 1fr);
  }
}
.u-grid-cols-\[2\] {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[2\][class] {
    grid-template-columns: repeat(2, 1fr);
  }
}
.u-grid-rows-\[2\] {
  grid-template-rows: repeat(2, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[2\][class] {
    grid-template-rows: repeat(2, 1fr);
  }
}
.u-grid-cols-\[3\] {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[3\][class] {
    grid-template-columns: repeat(3, 1fr);
  }
}
.u-grid-rows-\[3\] {
  grid-template-rows: repeat(3, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[3\][class] {
    grid-template-rows: repeat(3, 1fr);
  }
}
.u-grid-cols-\[4\] {
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[4\][class] {
    grid-template-columns: repeat(4, 1fr);
  }
}
.u-grid-rows-\[4\] {
  grid-template-rows: repeat(4, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[4\][class] {
    grid-template-rows: repeat(4, 1fr);
  }
}
.u-grid-cols-\[5\] {
  grid-template-columns: repeat(5, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[5\][class] {
    grid-template-columns: repeat(5, 1fr);
  }
}
.u-grid-rows-\[5\] {
  grid-template-rows: repeat(5, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[5\][class] {
    grid-template-rows: repeat(5, 1fr);
  }
}
.u-grid-cols-\[6\] {
  grid-template-columns: repeat(6, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[6\][class] {
    grid-template-columns: repeat(6, 1fr);
  }
}
.u-grid-rows-\[6\] {
  grid-template-rows: repeat(6, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[6\][class] {
    grid-template-rows: repeat(6, 1fr);
  }
}
.u-grid-cols-\[7\] {
  grid-template-columns: repeat(7, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[7\][class] {
    grid-template-columns: repeat(7, 1fr);
  }
}
.u-grid-rows-\[7\] {
  grid-template-rows: repeat(7, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[7\][class] {
    grid-template-rows: repeat(7, 1fr);
  }
}
.u-grid-cols-\[8\] {
  grid-template-columns: repeat(8, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[8\][class] {
    grid-template-columns: repeat(8, 1fr);
  }
}
.u-grid-rows-\[8\] {
  grid-template-rows: repeat(8, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[8\][class] {
    grid-template-rows: repeat(8, 1fr);
  }
}
.u-grid-cols-\[9\] {
  grid-template-columns: repeat(9, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[9\][class] {
    grid-template-columns: repeat(9, 1fr);
  }
}
.u-grid-rows-\[9\] {
  grid-template-rows: repeat(9, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[9\][class] {
    grid-template-rows: repeat(9, 1fr);
  }
}
.u-grid-cols-\[10\] {
  grid-template-columns: repeat(10, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[10\][class] {
    grid-template-columns: repeat(10, 1fr);
  }
}
.u-grid-rows-\[10\] {
  grid-template-rows: repeat(10, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[10\][class] {
    grid-template-rows: repeat(10, 1fr);
  }
}
.u-grid-cols-\[auto\] {
  grid-template-columns: repeat(auto, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-cols-\[auto\][class] {
    grid-template-columns: repeat(auto, 1fr);
  }
}
.u-grid-rows-\[auto\] {
  grid-template-rows: repeat(auto, 1fr);
}
@media screen and (min-width: 768px) {
  .u-md\:grid-rows-\[auto\][class] {
    grid-template-rows: repeat(auto, 1fr);
  }
}
.c-auto-phrase {
  word-break: keep-all;
  word-wrap: anywhere;
}
.c-desc {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .c-desc {
    font-size: 1rem;
  }
}
.c-desc[data-color=white] {
  color: #fff;
  color: var(--color-white);
}
.c-index-lower {
  display: grid;
  padding-top: 3rem;
}
@media screen and (min-width: 768px) {
  .c-index-lower {
    padding-top: 0;
  }
}
.c-link {
  color: #111;
  color: var(--color-text);
  transition: color 0.3s ease;
}
.c-link:focus-visible {
  color: #036dd6;
  color: var(--color-primary);
}
@media (any-hover: hover) {
  .c-link:hover {
    color: #036dd6;
    color: var(--color-primary);
  }
}
.c-link[target=_blank] {
  --icon-gap: 0.125rem;
  --icon-size: calc(10 / 16 * 1em);
  display: inline-grid;
  grid-template-columns: 1fr max-content;
  -moz-column-gap: 0.125rem;
       column-gap: 0.125rem;
  -moz-column-gap: var(--icon-gap);
       column-gap: var(--icon-gap);
}
@media screen and (min-width: 768px) {
  .c-link[target=_blank] {
    --icon-gap: 0.25rem;
    --icon-size: calc(12 / 16 * 1em);
  }
}
.c-link[target=_blank]::after {
  display: inline-block;
  width: var(--icon-size);
  aspect-ratio: 1;
  margin-top: calc((1lh - var(--icon-size)) / 2);
  margin-bottom: calc((1lh - var(--icon-size)) / 2);
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");
          mask-image: url("/surugabank/recruitment/img/global/icon_blank.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.c-link > span {
  background-image: linear-gradient(currentcolor 0, currentcolor 0);
  background-image: linear-gradient(currentcolor 0 0);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100% 0.03125rem;
}
.c-list {
  display: grid;
}
.c-list li {
  display: grid;
  grid-template-columns: max-content 1fr;
}
.c-list li > * {
  grid-column-start: 2;
}
.c-list[data-type=disc] > li {
  --marker-size: 0.25rem;
  --marker-color: currentcolor;
}
.c-list[data-type=disc] > li::before {
  width: var(--marker-size);
  aspect-ratio: 1;
  margin-top: calc((1lh - var(--marker-size)) / 2);
  margin-bottom: calc((1lh - var(--marker-size)) / 2);
  content: "";
  background-color: var(--marker-color);
  border-radius: 50%;
}
.c-list[data-type=note] > li {
  --marker-color: currentcolor;
}
.c-list[data-type=note] > li::before {
  color: var(--marker-color);
  content: "※";
}
.c-list[data-type=num] {
  counter-reset: list-counter;
}
.c-list[data-type=num] > li {
  --marker-color: currentcolor;
}
.c-list[data-type=num] > li::before {
  color: var(--marker-color);
}
.c-list[data-type=num] > li:first-of-type::before {
  content: "①";
}
.c-list[data-type=num] > li:nth-of-type(2)::before {
  content: "②";
}
.c-list[data-type=num] > li:nth-of-type(3)::before {
  content: "③";
}
.c-list[data-type=num] > li:nth-of-type(4)::before {
  content: "④";
}
.c-list[data-type=num] > li:nth-of-type(5)::before {
  content: "⑤";
}
.c-list[data-type=num] > li:nth-of-type(6)::before {
  content: "⑥";
}
.c-list[data-type=num] > li:nth-of-type(7)::before {
  content: "⑦";
}
.c-list[data-type=num] > li:nth-of-type(8)::before {
  content: "⑧";
}
.c-list[data-type=num] > li:nth-of-type(9)::before {
  content: "⑨";
}
.c-list[data-type=num] > li:nth-of-type(10)::before {
  content: "⑩";
}
.c-list[data-marker-color=primary] > li {
  --marker-color: var(--color-primary);
}
.c-list[data-marker-size="6"] > li {
  --marker-size: 0.375rem;
}
.c-sec-inner {
  --inner-size: 327;
  position: relative;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  container-type: inline-size;
}
@media screen and (min-width: 768px) {
  .c-sec-inner {
    --inner-size: 1040;
    box-sizing: content-box;
    max-width: calc(1040 * 1px);
    max-width: calc(var(--inner-size) * 1px);
    padding-right: calc(40 / 1280 * 100cqi);
    padding-right: calc(40 / var(--screen-xl) * 100cqi);
    padding-left: calc(40 / 1280 * 100cqi);
    padding-left: calc(40 / var(--screen-xl) * 100cqi);
    margin-right: auto;
    margin-left: auto;
  }
}
.c-table .c-table-body {
  overflow-x: auto;
}
.c-table table {
  width: 100%;
  border-collapse: collapse;
  border: 0.0625rem solid #ccc;
  border: 0.0625rem solid var(--color-border-gray3);
}
.c-table th,
.c-table td {
  padding: 1rem;
  font-size: 1rem;
  text-align: center;
  border: 0.0625rem solid #ccc;
  border: 0.0625rem solid var(--color-border-gray3);
}
.c-table td {
  font-weight: 500;
}
.c-table th {
  font-weight: 700;
  background-color: #f7f7f7;
  background-color: var(--color-bg-gray);
}
.c-table .c-table-caption {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .c-table .c-table-caption {
    font-size: 1.125rem;
  }
}
.c-table .c-table-caption + * {
  margin-top: 1rem;
}
.p-interview .c-index-pagelist {
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .p-interview .c-index-pagelist {
    margin-top: 10rem;
  }
}
.p-interview .c-breadcrumb .item:last-of-type .link {
  color: #036dd6;
  color: var(--color-primary);
}
.p-interview .c-pagination {
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .p-interview .c-pagination {
    margin-top: 6rem;
  }
}
.p-interview .tab-control {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .p-interview .tab-control {
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    margin-top: 5rem;
  }
}
.p-interview .tab-label {
  font-size: 0.875rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-interview .tab-label {
    margin-top: 0.25rem;
  }
}
.p-interview .tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-interview .tab-list {
    gap: 0.625rem 1rem;
  }
}
.p-interview .tab-list:has(.tab:not([data-category=all])[aria-current]) .tab[data-category=all]:not(:hover) {
  color: #111;
  color: var(--color-text);
  background-color: #f8f7f5;
  background-color: var(--color-bg-gray4);
}
.p-interview .tab {
  padding: 0.0625rem 0.9375rem 0.1875rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  color: #111;
  color: var(--color-text);
  letter-spacing: -0.01em;
  background-color: #f8f7f5;
  background-color: var(--color-bg-gray4);
  border-radius: 100vmax;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media screen and (min-width: 768px) {
  .p-interview .tab {
    font-size: 1rem;
  }
}
.p-interview .tab[href]:focus-visible {
  color: #fff;
  color: var(--color-white);
  background-color: #036dd6;
  background-color: var(--color-primary);
}
@media (any-hover: hover) {
  .p-interview .tab[href]:hover {
    color: #fff;
    color: var(--color-white);
    background-color: #036dd6;
    background-color: var(--color-primary);
  }
}
.p-interview .tab[aria-current=page], .p-interview .tab[aria-current=true] {
  color: #fff;
  color: var(--color-white);
  background-color: #036dd6;
  background-color: var(--color-primary);
}
.p-interview .tab-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(456px, 100%), 1fr));
  grid-gap: 3rem;
  gap: 3rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-interview .tab-panel {
    gap: calc(80 / var(--inner-size) * 100cqi) calc(64 / var(--inner-size) * 100cqi);
    margin-top: 4rem;
  }
}
.p-job-description-dl {
  padding: 1.5rem 1.5rem 2.5rem;
  margin-top: 2rem;
  border: 0.0625rem solid #d9d9d9;
  border: 0.0625rem solid var(--color-bg-gray2);
  border-radius: 0.5rem;
  container-type: inline-size;
}
@media screen and (min-width: 768px) {
  .p-job-description-dl {
    padding: 4rem calc(64 / var(--inner-size) * 100cqi);
    margin-top: 3rem;
    border-radius: 1rem;
  }
}
.p-job-description-dl .list {
  display: grid;
  width: -moz-fit-content;
  width: fit-content;
}
.p-job-description-dl .item {
  position: relative;
  display: grid;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-job-description-dl .item {
    grid-template-columns: subgrid;
    grid-column: span 2;
    gap: calc(64 / var(--inner-size) * 100cqi);
  }
}
.p-job-description-dl .item:not(:first-of-type) {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .p-job-description-dl .item:not(:first-of-type) {
    padding-top: 1.75rem;
    margin-top: 2rem;
  }
}
.p-job-description-dl .item:not(:first-of-type)::before {
  --r: 0.0625rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqi;
  height: 0.125rem;
  content: "";
  background-image: radial-gradient(circle, #d9d9d9 0.0625rem, transparent 0.0625rem);
  background-image: radial-gradient(circle, var(--color-bg-gray2) var(--r), transparent var(--r));
  background-position: 0 0;
  background-size: 0.375rem calc(0.0625rem * 2);
  background-size: 0.375rem calc(var(--r) * 2);
}
.p-job-description-dl dt {
  font-size: 1.125rem;
  font-weight: 700;
}
.p-job-description-dl dd {
  font-weight: 500;
}
.p-job-description-accordion {
  padding: 1.5rem 1.25rem 2rem;
  background-color: #f7f7f7;
  background-color: var(--color-bg-gray);
  border-radius: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion {
    padding: 1.5rem calc(40 / var(--inner-size) * 100cqi) 2rem;
  }
}
.p-job-description-accordion .summary {
  display: grid;
  grid-template-columns: 1fr max-content;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .summary {
    align-items: center;
  }
}
.p-job-description-accordion .summary .summary-heading {
  display: grid;
  grid-row-gap: 0.25rem;
  row-gap: 0.25rem;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .summary .summary-heading {
    row-gap: 0.125rem;
  }
}
.p-job-description-accordion .summary .summary-title {
  font-size: 1.125rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .summary .summary-title {
    font-size: 1.25rem;
  }
}
.p-job-description-accordion .summary .summary-overview {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .summary .summary-overview {
    line-height: 1.75;
    letter-spacing: 0.02em;
  }
}
.p-job-description-accordion .summary .summary-icon {
  position: relative;
  display: grid;
  grid-template-areas: "line";
  align-items: center;
  justify-items: center;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  background-color: #fff;
  background-color: var(--color-white);
  border-radius: 50%;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .summary .summary-icon {
    top: 0.25rem;
    width: 2.5rem;
  }
}
.p-job-description-accordion .summary .summary-icon > span {
  grid-area: line;
  width: 0.625rem;
  height: 0.125rem;
  background-color: #036dd6;
  background-color: var(--color-primary);
  border-radius: 100vmax;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .summary .summary-icon > span {
    width: 0.8125rem;
  }
}
.p-job-description-accordion .summary .summary-icon > span:first-of-type {
  transition: rotate 0.3s ease;
  rotate: 90deg;
}
.p-job-description-accordion .summary .summary-icon[data-open] > span:first-of-type {
  rotate: 180deg;
}
.p-job-description-accordion .panel {
  overflow: clip;
  transition: height 0.3s ease-out;
}
.p-job-description-accordion .panel .panel-inner {
  padding-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .panel .panel-inner {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
}
.p-job-description-accordion .skill {
  padding: 1rem 1.125rem 1.5rem 1rem;
  background-color: #fff;
  background-color: var(--color-white);
  border-radius: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .skill {
    padding: 1.5rem calc(24 / var(--inner-size) * 100cqi) 2rem;
    border-radius: 0.375rem;
  }
}
.p-job-description-accordion .skill .skill-label {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.1875rem 0.75rem 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  color: var(--color-white);
  letter-spacing: -0.02em;
  background-color: #036dd6;
  background-color: var(--color-primary);
  border-radius: 0.25rem;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .skill .skill-label {
    font-size: 1rem;
    letter-spacing: 0;
  }
}
.p-job-description-accordion .skill .skill-list {
  display: grid;
  grid-row-gap: 0.25rem;
  row-gap: 0.25rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .skill .skill-list {
    row-gap: 0.125rem;
    margin-top: 0.75rem;
    margin-left: 0.5rem;
    font-size: 1rem;
  }
}
.p-job-description-accordion .skill .skill-list > li {
  gap: 0.5rem;
  line-height: 1.65;
}
@media screen and (min-width: 768px) {
  .p-job-description-accordion .skill .skill-list > li {
    line-height: 1.75;
  }
}

.c-txt {
    letter-spacing: 0.08em;
    line-height: 200%;
    text-align: justify;
}
@media print, screen and (min-width: 768px) {
    .c-txt {
        font-size: 14px;
    }
}



h2 {
    font-size: var(--h2-size, clamp(24px, 4vw, 26px));
	
}
h2::after {
    border-bottom: 1px;
}
.c-title__primary--en {
    margin-bottom: 20px;
    font-size: 1rem;
    font-family: var(--font-family-en)
}

.c-title__primary--ja {
    font-weight: var(--font-medium);
    font-size: 2.25rem;
    line-height: 1
}

.c-title__primary--white {
    color: #fff
}

.c-title__primary::after {
  content: "";
  display: block;
  width: 50px;           /* 横线长度 */
  height: 2px;            /* 横线粗细 */
  background-color: #333; /* 横线颜色 */
  margin: 20px auto 10px auto;       /* 横线与标题之间的距离 */
}








/*--------------------------------------------

    ページ専用ヘッダー

---------------------------------------------*/
    .l-innermin {
        min-width: 1000px;
        max-width: 1120px;
        
        padding-left: 20px;
        padding-right: 20px;
		margin:10px auto;
    }

.c-pagehead {

	min-height: 325px;

	padding-top: 100px;

	padding-bottom: 20px;

}

#page-contents{
	margin:100px auto;
}

.c-pagehead__body {

	padding-top: 20px;

	margin-top: 20px;

}

.privacy__section {

	margin-top: 50px;

}



.contact__privacy .privacy__section {

	margin-top: 20px;

}



.privacy__section:first-child {

	margin-top: 0;

}



.contact__privacy .privacy__section:first-child {

	margin-top: 0;

}



.privacy__ttl {

	font-size: 18px;

	margin-bottom: 20px;

}



.contact__privacy .privacy__ttl {

	font-size: 16px;

	margin-bottom: 10px;

}



.contact__privacy .privacy .c-txt {

	font-size: 12px;

}


.c-pagehead__ttl {
        font-size: 42px;
    }

.c-pagehead__ttl {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 100%;
    font-feature-settings: "palt" 1;
}

/**

 * c-pagehead

 */



.c-pagehead__body {

	border-top: 1px solid #e9e9e9;

}



.c-pagehead__ttl {

	font-family: 'Poppins', sans-serif;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	font-weight: 600;

	letter-spacing: 0.01em;

	line-height: 100%;

	font-feature-settings: "palt" 1;

}



.c-pagehead__lead {

	letter-spacing: 0.1em;

	font-weight: bold;

	line-height: 180%;

	text-align: justify;

	font-feature-settings: "palt" 1;

}


.c-headbg__head {

	z-index: 1; /*.c-headbg*/

}



.c-headbg__body {

	z-index: 2; /*.c-headbg*/

}



.c-headbg__board::before {

	z-index: 1; /*.c-headbg__board*/

}



.c-headbg__board__ctt {

	z-index: 2; /*.c-headbg__board*/

}



.c-headbg {

	position: relative;

}



.c-headbg__head {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

}


/*
.c-headbg__head__bg {

	background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjRlZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNDY5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

	background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #feb951), color-stop(100%, #e63a00));

	background: -moz-linear-gradient(left, #feb951 0%, #e63a00 100%);

	background: -webkit-linear-gradient(left, #feb951 0%, #e63a00 100%);

	background: linear-gradient(to right, #feb951 0%, #e63a00 100%);

}

*/

.c-headbg__body {

	position: relative;

}



.c-headbg__board {

	position: relative;

}



.c-headbg__board__ctt {

	position: relative;

}

.c-headbg {

	padding-top: 80px;

}



.c-headbg__head__bg {

	height: 460px;

}


.c-headbg__board::before {

	content: "";

	display: block;

	position: absolute;

	top: 50%;

	left: 50%;

	-moz-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

	-webkit-transform: translate(-50%, -50%);

	transform: translate(-50%, -50%);

	width: 1200px;

	height: 100%;

	background-color: #fff;

}



.c-headbg .dummy-ctt {

	height: 400px;

}



.c-treehead__ctt {

	padding-top: 115px;

}
#contents{
	padding-top: 10px;
}
.top100{
	padding-top: 10px;
}
@media screen and (min-width: 768px) {
 .top100{
	padding-top: 150px;
}
}

@media screen and (max-width: 767px) {
	    .l-innersp {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
	.l-innermin {
    min-width: auto;
    max-width: 100%;
   
    margin: 10px auto;
}
    .c-treehead__ctt {
        padding-top: 60px;
    }
.c-headbg__head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
    .l-innerspleftmore {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/*list*/
.bottom_0{
	padding-bottom:0!important;
	padding-left: 0!important;
}
.u-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.u-flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	width: 100%;
}

.u-flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.u-flex-align-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.u-flex-justify-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.u-clearfix:after {
    display: block;
    clear: both;
    content: ""
}

  .c-hover-animation {
                overflow: hidden;
                backface-visibility: hidden;
            }

            .c-hover-animation__image {
                transition: transform 0.5s ease, opacity 0.5s ease;
            }

            @media (hover: hover) and (pointer: fine) {
                a.c-hover-animation:hover .c-hover-animation__image, a:hover .c-hover-animation .c-hover-animation__image {
                    transform: scale(1.1);
                }
            }




.c-post-category {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background-color: #000;
    min-width: 100px;
    height: 35px;
    padding: 0 15px
}

.p-archive--post-item__image-bg {
    padding-top: 54.7619%
}

.p-archive--post-item__content {
    padding: 30px;
    border: 0 solid #ddd;
    border-left-width: 1px
}

.p-archive--post-item__date {
    margin-bottom: 15px
}

.p-archive--post-item__title {
    font-size: 18px;
    line-height: 1.6;
    height: 3.2em;
    margin: -.3em 0
}

.p-archive--post .p-archive--post-item:nth-of-type(2n) .p-archive--post-item__content,.p-archive--post .p-archive--post-item:last-of-type .p-archive--post-item__content {
    border-right-width: 1px
}

.p-archive--post .p-archive--post-item:nth-last-of-type(-n+2) .p-archive--post-item__content {
    border-bottom-width: 1px
}

@media (max-width: 767px) {
    .p-archive--post {
        width:100%;
		margin-left: 12px;
       
    }

    .c-widget-headline+.p-archive--post {
        margin-top: 0
    }

    .p-archive--post-item__content {
        padding: 20px
    }

    .p-archive--post-item__title {
        font-size: 14px;
        line-height: 1.7;
        height: 5.1em;
        margin: -.35em 0
    }

    .p-archive--post-item__title span {
        -webkit-line-clamp: 3
    }

    .p-archive--post .p-archive--post-item:nth-of-type(2n-1) .p-archive--post-item__content {
        border-left-width: 0
    }

    .p-archive--post .p-archive--post-item:nth-of-type(2n) .p-archive--post-item__content {
        border-right-width: 0
    }
}

@media (max-width: 499px) {
    .p-archive--post-item__image {
        height:120px
    }

    .p-archive--post-item__image-bg {
        width: 100%;
        height: 100%
    }
}


.p-archive--post .p-archive--post-item:nth-of-type(3n) .p-archive--post-item__content,.p-archive--post .p-archive--post-item:last-of-type .p-archive--post-item__content {
    border-right-width: 1px
}

.p-archive--post .p-archive--post-item:nth-last-of-type(-n+3) .p-archive--post-item__content {
    border-bottom-width: 1px
}

@media (max-width: 767px) {
.p-archive--post .p-archive--post-item:nth-of-type(2n) .p-archive--post-item__content,.p-archive--post .p-archive--post-item:last-of-type .p-archive--post-item__content {
    border-right-width: 1px
}

.p-archive--post .p-archive--post-item:nth-last-of-type(-n+2) .p-archive--post-item__content {
    border-bottom-width: 1px
}
    }





.c-date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    font-family: 'Arial';
    font-size: 14px;
    color: #999;
    line-height: 1
}

.c-date:after {
content: "";
    position: absolute;
    right: 20px;
    margin-top: 20px;
	
    width: 20px;
    height: 20px;
    background: url(../img/common/icon-arrow-right.svg);
    background-size: cover;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.c-date--updated:before {
      transform: rotate(180deg)
}

@media (max-width: 767px) {
    .c-date {
        font-size:12px
    }
}
.top-case05 {

  margin: 0 0 64px;

  padding: 10px 16px 0;

  background: url() no-repeat 0 0;

  background-size: 100% auto;

}

.top-case05-subttl {

  margin: 0 0 8px;

  padding: 0 0 16px;

  font-size: 32px;

  font-weight: bold;

  text-align: center;

  background: url() no-repeat 50% 100%;

  background-size: 464px auto;

}

.top-case05-subttl span {

  color: #E8807D;

}

.top-case05-ttl {

  margin: 0 0 16px;

  text-align: center;

}

.top-case05-ttl span {

  display: block;

}

.top-case05-ttl [lang="en"] {

  font-size: 26px;

  font-family: "Montserrat";

  font-weight: 600;

  letter-spacing: 2px;

}

.top-case05-ttl [lang="en"]:first-letter {

  color: #E8807D;

}

.top-case05-ttl [lang="ja"] {

  font-size: 50px;

}

.top-case05-lead {

  margin: 0 0 40px;

  text-align: center;

}

.top-case05-list {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  max-width: 1200px;

  margin: 0 auto -16px;

}

.top-case05-item {

  width: 15.75%;

  margin: 0 0 24px;

  position:relative;

}



.top-case05-item a {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  text-decoration: none;

}

.top-case05-item img {

  flex-shrink: 0;

  margin: 0 0 16px;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .15);

  transition: .3s;

  width:100%;

}

.top-case05-item a:hover img {

  opacity: .7;

}

.top-case05-cat {

  line-height: 1;

  margin: 0 0 8px;

  padding: 8px 24px;

  border-radius: 20px;

  color: #fff;

  font-size: 12px;

  font-weight: bold;

  background: #99cc66;

}

.top-case05-client {

  line-height: 1.5;

  margin: 0;

  font-size: 14px;

  font-weight: bold;

}

.top-case05-site {

  margin: 0;

  color: #E8807D;

}

.top-case05-item a:hover .top-case05-site {

  text-decoration: underline;

}

.top-case05-other {

  margin: 80px -16px 40px;

  padding: 0 16px;

  background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(222, 222, 222, 0.25) 100%);

}

.top-case05-other-ttl {

  margin: 0;

  font-size: 36px;

  text-align: center;

  transform: translateY(-50%);

}

.top-case05-other-ttl span {

  position: relative;

}

.top-case05-other-ttl span:after {

  content: "・・・・・";

  position: absolute;

  top: -1em;

  left: 0;

  color: #E8807D;

}

.top-case05-other-list1 {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  list-style: none;

  max-width: 1200px;

  margin: 0 auto;

  padding: 32px 20px;

  background: #fff;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .15);

}

.top-case05-other-list1 li {

  margin: 8px 8%;

}

.top-case05-other-list1 img {

  height: 53px;

}



.top-case05-other-list1 span{

	font-weight:bold;

	padding:10px 0;

	margin-bottom:10px;

	}





.top-case05-other-list {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  list-style: none;

  max-width: 1200px;

  margin: 0 auto;

  padding: 32px 0;

  background: #fff;

  box-shadow: 0 3px 6px rgba(0, 0, 0, .15);

}

.top-case05-other-list li {

  margin: 8px 16px;

  text-align: center;

}

.top-case05-other-list img {

  height: 53px;

}
.section-point-support-list-item-summary {
  margin: 10px 0 0 0;
  text-align: left;
  padding:0;
}
.section-point-support-list-item-summary-item {
  margin-top: 13px;
  font-weight: bold;
  display: table;
  width:50%;
}
.section-point-support-list-item-summary-item span{
	display:block;
	font-weight:100;
}
.section-point-support-list-item-summary-item:before {
  padding-right: 5px;
  content: url("../img/common/item-arrow-red.svg");
  display: table-cell;
  width:20px;
}

@media (max-width: 767px) {

 .top-case05 {

    margin: 0 0 32px;

    padding: 0px 16px 0;

  }

  .top-case05-subttl {

    padding: 0 0 8px;

    font-size: 3.73vw;

    background-size: 200px auto;

  }

  .top-case05-ttl [lang="en"] {

    font-size: 3.73vw;

  }

  .top-case05-ttl [lang="ja"] {

    font-size: 8vw;

  }

  .top-case05-item {

    width: 48.5%;

    margin: 0 0 16px;

  }

  .top-case05-cat {

    padding: 4px 16px;

    font-size: 2.67vw;

  }

  .top-case05-client {

    font-size: 3.47vw;

  }

  .top-case05-other {

    margin-top: 44px;

  }

  .top-case05-other-ttl {

    font-size: 5.93vw;

  }

  .top-case05-other-ttl span:after {

    top: -.85em;

  }

  .top-case05-other-list {

    margin-top: -5vw;

    padding: 8px 16px;

    justify-content: space-between;

  }

  

  .top-case05-other-list li {

    width: 50%;

    margin: 8px 0;

    text-align: center;

  }  

  

  .top-case05-other-list1 li {

    width: 100%;

    margin: 2px;

  }

  .top-case05-other-list img {

    width: 35%;

	height:auto;

  }
	  }




/*list detail*/
   :root {
                --tcd-accent-color: 221,51,51;
                --tcd-bg-color: 221,51,51;
                --tcd-link-color: 21,120,214;
            }

            .c-headline {
                font-family: var(--tcd-font-type3);
                font-size: 34px;
            }

            .p-single__header-title {
                font-family: var(--tcd-font-type2);
                font-size: 28px;
            }

            .post_content {
                font-family: var(--tcd-font-type2);
                font-size: 16px;
            }

            @media (max-width: 767px) {
                .c-headline {
                    font-size:22px;
                }

                .p-single__header-title {
                    font-size: 22px;
                }

                .post_content {
                    font-size: 16px;
                }
            }

            .qt_google_map .pb_googlemap_custom-overlay-inner {
                background: #ffffff;
                color: #000000;
            }

            .qt_google_map .pb_googlemap_custom-overlay-inner::after {
                border-color: #ffffff transparent transparent transparent;
            }

            .styled_h2 {
                font-size: 26px!important;
                text-align: center!important;
                font-weight: 600!important;
                color: #000000;
                border-color: #000000;
                border-width: 3px;
                border-style: solid;
                border-left: none;
                border-right: none;
                border-top: none;
                border-bottom: none;
                background-color: transparent;
            }

            @media screen and (max-width: 767px) {
                .styled_h2 {
                    font-size:18px!important;
                }
            }

            .styled_h3 {
                font-size: 20px!important;
                text-align: left!important;
                font-weight: 600!important;
                color: #000000;
                border-color: #000000;
                border-width: 2px;
                border-style: solid;
                padding-left: 1em!important;
                padding-top: 0.5em!important;
                padding-bottom: 0.5em!important;
                border-right: none;
                border-top: none;
                border-bottom: none;
                background-color: transparent;
            }

            @media screen and (max-width: 767px) {
                .styled_h3 {
                    font-size:18px!important;
                }
            }

            .styled_h4 {
                font-size: 18px!important;
                text-align: left!important;
                font-weight: 400!important;
                color: #000000;
                border-color: #dddddd;
                border-width: 1px;
                border-style: dotted;
                border-left: none;
                border-right: none;
                border-top: none;
                padding-bottom: 0.8em!important;
                background-color: transparent;
            }

            @media screen and (max-width: 767px) {
                .styled_h4 {
                    font-size:18px!important;
                }
            }

            .styled_h5 {
                font-size: 16px!important;
                text-align: left!important;
                font-weight: 400!important;
                color: #000000;
                border-color: #000000;
                border-width: 3px;
                border-style: double;
                border-left: none;
                border-right: none;
                border-top: none;
                border-bottom: none;
                background-color: #fafafa;
                padding: 0.8em 1em!important;
            }

            @media screen and (max-width: 767px) {
                .styled_h5 {
                    font-size:16px!important;
                }
            }

            .q_custom_button.q_custom_button1 {
                width: 270px;
                height: 60px;
                border-radius: 70px;
                color: #000000;
                border-color: #000000;
            }

            .q_custom_button.q_custom_button1:before {
                background-color: #333333;
                opacity: 0;
            }

            .q_custom_button.q_custom_button1:hover {
                color: #fff;
                border-color: #333333;
            }

            .q_custom_button.q_custom_button1:hover:before {
                opacity: 1;
            }

            .q_custom_button.q_custom_button2 {
                width: 270px;
                height: 60px;
                border-radius: 0px;
                background-color: #000000;
                border: none;
            }

            .q_custom_button.q_custom_button2:before {
                background-color: #333333;
                left: -100%;
            }

            .q_custom_button.q_custom_button2:hover {
            }

            .q_custom_button.q_custom_button2:hover:before {
                left: 0;
            }

            .q_custom_button.q_custom_button3 {
                width: 400px;
                height: 70px;
                border-radius: 70px;
                border-color: #000000;
            }

            .q_custom_button.q_custom_button3:before {
                background-color: #000000;
                left: -35px;
                transform: skewX(45deg);
                width: calc(100% + 70px);
            }

            .q_custom_button.q_custom_button3:hover {
                color: #333333;
                border-color: #333333;
            }

            .q_custom_button.q_custom_button3:hover:before {
                left: calc(100% + 50px);
            }

            .q_frame1 {
                background: #ffffff;
                border-radius: 0px;
                border-width: 1px;
                border-color: #dddddd;
                border-style: solid;
            }

            .q_frame1 .q_frame_label {
                color: #000000;
            }

            .q_frame2 {
                background: #ffffff;
                border-radius: 0px;
                border-width: 1px;
                border-color: #009aff;
                border-style: solid;
            }

            .q_frame2 .q_frame_label {
                color: #009aff;
            }

            .q_frame3 {
                background: #ffffff;
                border-radius: 10px;
                border-width: 1px;
                border-color: #f9b42d;
                border-style: solid;
            }

            .q_frame3 .q_frame_label {
                color: #f9b42d;
            }

            .q_underline1 {
                font-weight: 400;
                background-image: linear-gradient(to right, transparent 50%, #fff799 50%);
                background-position: -100% 0.8em;
            }

            .q_underline2 {
                font-weight: 600;
                background-image: linear-gradient(to right, transparent 50%, #99f9ff 50%);
            }

            .q_underline3 {
                font-weight: 400;
                background-image: linear-gradient(to right, transparent 50%, #ff99b8 50%);
            }

            .speech_balloon1 .speech_balloon_text_inner {
                color: #000000;
                background-color: #f2f2f2;
                border-color: #f2f2f2;
            }

            .speech_balloon1 .before {
                border-left-color: #f2f2f2;
            }

            .speech_balloon1 .after {
                border-right-color: #f2f2f2;
            }

            .speech_balloon2 .speech_balloon_text_inner {
                color: #000000;
                background-color: #ffffff;
                border-color: #000000;
            }

            .speech_balloon2 .before {
                border-left-color: #000000;
            }

            .speech_balloon2 .after {
                border-right-color: #ffffff;
            }

            .speech_balloon3 .speech_balloon_text_inner {
                color: #ffffff;
                background-color: #000000;
                border-color: #000000;
            }

            .speech_balloon3 .before {
                border-left-color: #000000;
            }

            .speech_balloon3 .after {
                border-right-color: #000000;
            }

            .speech_balloon4 .speech_balloon_text_inner {
                color: #000000;
                background-color: #ffffff;
                border-color: #000000;
            }

            .speech_balloon4 .before {
                border-left-color: #000000;
            }

            .speech_balloon4 .after {
                border-right-color: #ffffff;
            }