@charset "utf-8";

header {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-pc);
  z-index: 11;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-pc) 0 var(--gap-pc);
}

.logo {
  overflow: hidden;
  position: relative;
  width: auto;
  height: var(--logo-pc);
}

header nav {
  overflow: hidden;
  position: relative;
  width: auto;
  height: var(--header-pc);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

button.button-header {
  overflow: hidden;
  position: relative;
  width: 264px;
  height: var(--header-pc);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

button.button-header:hover {
  opacity: 0.82;
}

button.button-header span {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 33px;
  line-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  padding-left: 44px;
  display: inline-block;
}

button.button-header span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 33px;
  height: 33px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

button.button-header.button-office {
  background-color: var(--color-secondary);
}

button.button-header.button-office span::before {
  background-image: url(../images/common/icon-office.svg);
}

button.button-header.button-contact {
  background-color: var(--color-primary);
}

button.button-header.button-contact span::before {
  background-image: url(../images/common/icon-mail.svg);
}

.mobile-panel {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  width: 330px;
  height: 100vh;
  background-color: var(--color-gray);
  z-index: 12;
  transition: all 0.6s ease;
  opacity: 0;
  transform: translateX(100%);
}

.mobile-panel.active {
  opacity: 1;
  transform: translateX(0);
}

.button-home {
  overflow: hidden;
  position: relative;
  width: auto;
  height: var(--header-pc);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  padding: 0 var(--gap-mobile);
}

.mobile-panel-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-pc));
  padding: 55px var(--gap-mobile) 0 var(--gap-mobile);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sticky-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16.5px;
}

button.button-sticky {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  border: solid 1px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

button.button-sticky:hover {
  border: solid 1px var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}

button.button-sticky.external span {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 66px;
  line-height: 66px;
  padding-left: 19px;
  padding-right: 19px;
}

button.button-sticky.external span::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 0;
  width: 12px;
  height: 12px;
  background-image: url(../images/common/icon-newwindow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.global-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 22px;
  color: #fff;
}

button.button-global {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
}

button.button-global span {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 44px;
  line-height: 44px;
  padding-left: 19px;
  padding-right: 19px;
  transition: all 0.3s ease;
}

button.button-global:hover span {
  color: var(--color-primary);
}

button.button-global span::before {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  left: 0;
  width: 14px;
  height: 14px;
  background-image: url(../images/common/icon-nav.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

button.button-global.external span::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 0;
  width: 12px;
  height: 12px;
  background-image: url(../images/common/icon-newwindow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

footer button.button-global.external span::after {
  background-image: url(../images/common/icon-newwindow-footer.svg);
}

.global-navigation-sub {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 11px;
}

button.button-global-sub {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 33px;
  line-height: 33px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-left: 34px;
  text-align: left;
  transition: all 0.3s ease;
}

button.button-global-sub span {
  transition: all 0.3s ease;
}

button.button-global-sub span::before {
  content: "";
  position: absolute;
  top: calc(50% - 6.5px);
  left: 19px;
  width: 13px;
  height: 13px;
  background-image: url(../images/common/icon-subnav.svg);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

button.button-global-sub:hover span {
  color: var(--color-primary);
}

button.button-global-sub:hover span::before {
  background-image: url(../images/common/icon-subnav-footer-hover.svg);
}

footer .global-navigation-sub span::before {
  background-image: url(../images/common/icon-subnav-footer.svg);
}

footer button.button-global-sub:hover span::before {
  background-image: url(../images/common/icon-subnav-footer-hover.svg);
}

footer button.button-global-sub span {
  transition: all 0.3s ease;
}

footer button.button-global-sub:hover span {
  color: var(--color-primary);
}

.extra-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16.5px;
  margin-top: 22px;
}

.mobile-header-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16.5px;
  margin-top: 16.5px;
}

.mobile-header-navigation a {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66px;
  background-color: #fff;
}

button.button-mobile-header {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66px;
  line-height: 66px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  transition: all 0.3s ease;
}

button.button-mobile-header:hover {
  opacity: 0.82;
}

button.button-mobile-header span {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 66px;
  line-height: 66px;
  padding-left: 44px;
}

button.button-mobile-header span::before {
  content: "";
  position: absolute;
  top: calc(50% - 16.5px);
  left: 0;
  width: 33px;
  height: 33px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

button.button-mobile-header.button-office {
  background-color: var(--color-secondary);
}

button.button-mobile-header.button-office span {
  display: inline-block;
  padding-left: 51.5px;
  padding-right: 7.5px;
}

button.button-mobile-header.button-office span::before {
  background-image: url(../images/common/icon-office.svg);
}

button.button-mobile-header.button-contact {
  background-color: var(--color-primary);
}

button.button-mobile-header.button-contact span::before {
  background-image: url(../images/common/icon-mail.svg);
}

.button-instagram {
  overflow: hidden;
  position: relative;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 66px 0 0 0;
  transition: all 0.3s ease;
}

.button-instagram:hover {
  opacity: 0.82;
}

.company-info {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  color: #fff;
}

.company-info-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 11px;
}

footer .company-info {
  color: var(--color-font);
  margin-top: 27.5px;
  text-align: right;
}

.company-name {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 33px 0 16.5px 0;
}

.copyright .company-name {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 16.5px 0;
}

.company-zip,
.company-address,
.company-tel {
  overflow: hidden;
  position: relative;
  width: auto;
  height: auto;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
}

footer .company-zip,
footer .company-address,
footer .company-tel {
  font-size: 1.4rem;
}

.mobile-footer-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 44px;
}

button.button-mobile-footer {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 33px;
  line-height: 33px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: left;
  transition: all 0.3s ease;
}

button.button-mobile-footer:hover {
  opacity: 0.82;
}

.mobile-copyright {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  margin-top: 16.5px;
  margin-bottom: 27.5px;
}

main {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: var(--header-pc);
}

footer {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--color-alternate);
  padding: 55px 0 88px 0;
}

.container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap-pc);
}

.wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  max-width: var(--wrapper);
  margin: 0 auto;
}

.footer-content {
  overflow: hidden;
  position: relative;
  width: 330px;
  height: auto;
}

.csr-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16.5px;
}

.csr-navigation-box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.csr-navigation-box.rara-recruit {
  margin-bottom: 22px;
}

.csr-navigation-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 33.3333%;
  background-color: var(--color-quaternary);
}

.csr-navigation-image span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.4s cubic-bezier(.77, 0, .18, 1);
}

.csr-navigation-box:hover .csr-navigation-image span {
  transform: scale(1.05);
}

.csr-navigation-title {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--color-quaternary);
  color: #fff;
  text-align: center;
  padding: 11px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.csr-navigation-title span {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding: 0 44px;
}

.csr-navigation-box.external .csr-navigation-title::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 22px;
  width: 14px;
  height: 14px;
  background-image: url(../images/common/icon-newwindow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

footer .container {
  display: flex;
  justify-content: space-between;
}

footer nav {
  overflow: hidden;
  position: relative;
  width: calc(100% - 330px);
  height: auto;
}

footer nav .global-navigation {
  margin-top: 0;
  color: var(--color-font);
  display: block;
  columns: 3;
}

.copyright {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background-color: var(--color-primary);
  color: #fff;
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  padding: 33px var(--gap-pc);
}

.copyright-wrapper {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
}

.copyright-wrapper.right {
  text-align: right;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 11px;
}

.copyright .button-instagram {
  width: 30px;
  height: 30px;
  margin: 0;
}

.copyright .copyright-text {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}

.copyright .mobile-footer-navigation-title {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
}

section#key-visual {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.slideshow-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 660px;
}

.slideshow-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 660px;
}

.slideshow-item .slideshow-image {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: blur(0);
}

.slideshow-item.slick-active .slideshow-image {
  animation: slideshow-image-active 6s ease-in-out;
}

@keyframes slideshow-image-active {
  0% {
    transform: scale(1.1);
    filter: blur(11px);
  }

  12% {
    filter: blur(0);
  }

  100% {
    transform: scale(1);
    filter: blur(0);
  }
}

.slideshow-item .slideshow-slogan {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: var(--gap-pc);
  width: auto;
  height: 330px;
  object-fit: contain;
}

.slideshow-mask {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 800px;
  height: 244px;
  background-image: url(../images/common/mask.webp);
  background-size: cover;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

.slideshow-item:nth-child(3) .slideshow-mask {
  height: 355px;
}

.fadeInDelay {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: 1s;
}

.slideshow-item.slick-active .slideshow-mask.fadeInDelay {
  opacity: 1;
  transform: translateY(0);
}

.slideshow-item.slick-active .slideshow-slogan.fadeInDelay {
  opacity: 1;
  transform: translateY(0);
}

.pagetop {
  overflow: hidden;
  position: fixed;
  bottom: 144px;
  right: 38.5px;
  z-index: 11;
}

.pagetop img {
  overflow: hidden;
  position: relative;
  width: 16.5px;
  height: auto;
  object-fit: contain;
}

section#overview {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
  background-color: var(--color-alternate);
}

.overview-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min(3vw, 37.98px) 3%;
}

.overview-item {
  overflow: hidden;
  position: relative;
  width: 30.6666%;
  height: auto;
}

.overview-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 66.66%;
}

.overview-image span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: 0.4s cubic-bezier(.77, 0, .18, 1);
}

.overview-item:hover .overview-image span {
  transform: scale(1.05);
}

.overview-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 66px;
  background-image: url(../images/common/icon-readmore-hover.svg);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: calc(100% - 22px) center;
  transition: 0.4s cubic-bezier(.77, 0, .18, 1);
}

.overview-item:hover .overview-content {
  background-position: calc(100% - 16.5px) center;

}

.overview-title {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

section.about {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
  text-align: center;
}

section h3 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "Lato", sans-serif !important;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-align: center;
}

section h2 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  text-align: center;
  margin-top: 11px;
}

.description {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 44px;
}

.description p {
  max-width: 600px;
  word-break: break-all;
  margin: 0 auto;
}

.contact-form .description p {
  margin-bottom: 1em;
}

.contact-form .description p:last-child {
  margin-bottom: 0;
}

.no-margin-top {
  margin-top: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

p {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
  color: var(--color-font);
}

section.gallery {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.gallery-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.gallery-item {
  overflow: hidden;
  position: relative;
  width: 330px;
  height: auto;
}

.gallery-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}

section#massage {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
  text-align: center;
}

.full-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.graph {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}

.massage-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min(3vw, 37.98px) 3%;
  margin-top: 44px;
}

.massage-item {
  overflow: hidden;
  position: relative;
  width: 30.6666%;
  height: auto;
  padding-left: 33px;
  border-left: solid 4px var(--color-primary);
  text-align: left;
}

.massage-title {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.massage-description {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  margin-top: 16.5px;
}

section.background {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 330px;
}

.background span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.background img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  top: -33%;
}

section#news {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

.news-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 55px;
  margin-bottom: 55px;
}

.news-list>li {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  border-bottom: solid 1px var(--color-border);
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-image: url(../images/common/icon-news.svg);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: calc(100% - 22px) center;
  transition: 0.4s cubic-bezier(.77, 0, .18, 1);
}

.news-list>li:hover {
  background-position: calc(100% - 16.5px) center;
}

.news-list>li:first-child {
  border-top: solid 1px var(--color-border);
}

.news-time {
  overflow: hidden;
  position: relative;
  width: 99px;
  height: auto;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #8c8c8c;
}

.term-list {
  overflow: hidden;
  position: relative;
  width: 99px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.term-list li {
  overflow: hidden;
  position: relative;
  width: 66px;
  height: 25px;
  line-height: 25px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 !important;
  color: #fff;
  background-color: var(--color-primary);
}

.news-title {
  overflow: hidden;
  position: relative;
  width: calc(100% - 198px);
  height: auto;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 31px 66px 31px 0;
}

.news-title a {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

button.button-more {
  overflow: hidden;
  position: relative;
  width: max-content;
  min-width: 264px;
  height: 66px;
  padding: 0 66px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background-image: url(../images/common/icon-readmore.svg);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: calc(100% - 22px) center;
  display: block;
  margin: 0 auto;
  transition: 0.4s cubic-bezier(.77, 0, .18, 1);
}

button.button-more:hover {
  opacity: 0.82;
  background-position: calc(100% - 16.5px) center;
}

section#home-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 55px 0 88px 0;
}

.home-navigation-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min(3vw, 37.98px) 3%;
}

.home-navigation-item {
  overflow: hidden;
  position: relative;
  width: 30.6666%;
  height: auto;
}

.home-navigation-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
  background-color: var(--color-quaternary);
}

.home-navigation-image span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.4s cubic-bezier(.77, 0, .18, 1);
}

.home-navigation-item:hover .home-navigation-image span {
  transform: scale(1.05);
}

.home-navigation-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66px;
  background-color: var(--color-quaternary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 66px;
}

.home-navigation-item.external .home-navigation-content {
  background-image: url(../images/common/icon-newwindow.svg);
  background-size: 14px 14px;
  background-position: calc(100% - 22px) center;
  background-repeat: no-repeat;
}

.home-navigation-title {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}

section#instagram-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 55px 0;
  background-color: var(--color-alternate);
  text-align: center;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.instagram-navigation-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 331px;
  height: auto;
  margin: 0 auto;
}

.instagram-navigation-image img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.instagram-navigation-title {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 11px;
}

section.instagram-gallery {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--color-alternate);
}

.instagram-gallery-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.instagram-gallery-item {
  overflow: hidden;
  position: relative;
  width: 276px;
  height: auto;
}

.instagram-gallery-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 2/3;
}

section.visual {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 440px;
}

section.visual.short {
  height: 220px;
  margin-bottom: 33px;
}

section.visual .visual-image {
  overflow: hidden;
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 0%;
  background-repeat: no-repeat;
}

section.visual .container {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: auto;
}

section.visual h1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--color-tertiary);
  margin-top: 0 !important;
  margin-bottom: 22px;
  text-align: left;
}

section.visual h2 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "Lato", sans-serif !important;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-top: 0 !important;
  margin-bottom: 11px;
  text-align: left;
}

.breadcrumbs {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-font);
  text-align: left;
  margin-bottom: 11px;
}

.mask {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 900px;
  height: 198px;
  background-image: url(../images/common/mask.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section.concerns {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
  background-color: var(--color-alternate);
}

.concerns-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min(2vw, 24px) 2%;
  margin-top: 44px;
}

.concerns-item {
  overflow: hidden;
  position: relative;
  width: 32%;
  height: auto;
  background-color: #fff;
  padding: 0 22px 0 88px;
  background-image: url(../images/common/icon-check.svg);
  background-size: 44px 44px;
  background-position: 22px center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.concerns-title {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 33px 0;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-font);
  line-height: 1.75;
}

.hr {
  overflow: hidden;
  position: relative;
  width: 88px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 11px auto 0 auto;
}

section.details {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

.details-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min(3vw, 37.98px) 3%;
  margin-top: 44px;
}

.details-item {
  overflow: hidden;
  position: relative;
  width: 30.6666%;
  height: auto;
}

.details-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 66.6666%;
}

.details-image img {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.details-title {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66px;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-quaternary);
  padding: 0 22px;
}

.details-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 22px 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-font);
  line-height: 1.75;
}

.remarks {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: var(--wrapper)px;
  height: auto;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 33px 0;
  margin: 44px auto 0 auto;
  text-align: center;
}

section.links {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 55px 0 88px 0;
}

.links-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
}

.links-item,
.links-item a {
  overflow: hidden;
  position: relative;
  width: 660px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s cubic-bezier(.77, 0, .18, 1);
}

.links-item:hover {
  opacity: 0.82;
}

.links-image {
  overflow: hidden;
  position: relative;
  width: 220px;
  height: 146.6666px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.links-content {
  overflow: hidden;
  position: relative;
  width: calc(100% - 220px);
  height: 146.6666px;
  background-color: var(--color-primary);
  padding: 0 88px 0 33px;
  display: flex;
  align-items: lex-start;
  justify-content: center;
  flex-direction: column;
  background-image: url(../images/common/icon-readmore.svg);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: calc(100% - 33px) center;
  transition: 0.4s cubic-bezier(.77, 0, .18, 1);
}

.links-item:hover .links-content {
  background-position: calc(100% - 26.5px) center;
}

.links-content p {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: auto;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.75;
  border-bottom: 1px solid #fff;
  padding-bottom: 11px;
  margin-bottom: 16.5px;
}

.links-title {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.5;
}

section.treatment-time {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 55px 0;
  background-color: var(--color-alternate);
}

.treatment-time-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: var(--wrapper)px;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 33px;
}

.treatment-time-item {
  overflow: hidden;
  position: relative;
  width: calc((100% - 99px) / 2);
  height: 99px;
  background-color: var(--color-primary);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.treatment-time-item:last-child {
  background-color: var(--color-secondary);
}

.treatment-time-plus {
  overflow: hidden;
  position: relative;
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.treatment-time-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin: 33px auto 0 auto;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.5;
}

section.service-details {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

.service-details-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.service-details-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.service-details-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
}

.service-details-image span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.service-details-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  margin-top: 33px;
  padding: 11px 0 11px 22px;
  border-left: solid 4px var(--color-primary);
  text-align: left;
}

.service-details-title {
  overflow: hidden;
  position: relative;
  width: auto;
  height: auto;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
}

.service-details-content p {
  margin-top: 11px;
}

section.flow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

.flow-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 33px 22px;
  text-align: center;
  background-color: var(--color-alternate);
}

.flow-graph {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 88px;
}

.flow-graph img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

section.flow-and-price {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

.flow-and-price-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.flow-and-price-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0 44px;
}

.flow-and-price-number {
  overflow: hidden;
  position: relative;
  width: 88px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flow-and-price-number span {
  overflow: hidden;
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: auto;
  font-family: "Poppins", sans-serif !important;
  font-size: 5.5rem;
  font-weight: 400;
  letter-spacing: -0.05em;
  background-color: #fff;
  padding: 11px 0;
  color: var(--color-primary);
  line-height: 1.15;
  text-align: center;
}

.flow-and-price-item:first-child .flow-and-price-number span {
  top: 0;
  padding-top: 40px;
}

.flow-and-price-number-line {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1px;
  height: 100%;
  margin: auto;
  background-color: var(--color-primary);
}

.flow-and-price-wrapper {
  overflow: hidden;
  position: relative;
  width: calc(100% - 132px);
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--color-border);
}

.flow-and-price-item:last-child .flow-and-price-wrapper {
  border-bottom: none;
}

.flow-and-price-content {
  overflow: hidden;
  position: relative;
  width: calc(100% - 330px);
  height: auto;
  padding-right: 33px;
}

.flow-and-price-title {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
}

.flow-and-price-description {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  margin-top: 11px;
}

.flow-and-price-image {
  overflow: hidden;
  position: relative;
  width: 330px;
  height: auto;
}

.flow-and-price-image img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

button.button-sub {
  overflow: hidden;
  position: relative;
  width: max-content;
  min-width: 220px;
  height: 55px;
  padding: 0 55px;
  background-color: var(--color-quaternary);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 33px;
  transition: all 0.3s ease;
}

button.button-sub:hover {
  opacity: 0.82;
}

button.button-sub.button-archive {
  background-image: url(../images/common/arrow-next.svg);
  background-size: 14px 14px;
  background-position: calc(100% - 22px) center;
  background-repeat: no-repeat;
}

button.button-sub.button-pdf {
  background-image: url(../images/common/icon-newwindow.svg);
  background-size: 14px 14px;
  background-position: calc(100% - 22px) center;
  background-repeat: no-repeat;
}

button.button-sub.button-back-to-news {
  display: block;
  min-width: 276px;
  height: 66px;
  line-height: 66px;
  padding: 0 44px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 55px auto;
  background-image: url(../images/common/icon-recruit-hover.svg);
  background-size: 22px 22px;
  background-position: calc(100% - 22px) center;
  background-repeat: no-repeat;
}

section.price {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

.price-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 88px;
}

section.price h3 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
  text-align: left;
}

.table-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  overflow-x: scroll;
}

table.co-payment-table {
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 660px;
  height: auto;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  margin-top: 33px;
}

table.co-payment-table tr {
  border: 1px solid var(--color-border);
}

table.co-payment-table tr:nth-child(even) {
  background-color: var(--color-alternate);
  background-clip: padding-box;
}

table.co-payment-table td {
  overflow: hidden;
  position: relative;
  width: 33.3333%;
  height: auto;
  padding: 11px;
  border: 1px solid var(--color-border);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  text-align: center;
  vertical-align: top;
}

.co-payment-remarks {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  margin-top: 16.5px;
  text-align: right;
  vertical-align: top;
}

.co-payment-remarks p {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
}

table.massage-table {
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 660px;
  height: auto;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  margin-top: 33px;
}

table.massage-table tr {
  border: 1px solid var(--color-border);
}

table.massage-table td {
  overflow: hidden;
  position: relative;
  width: 21.25%;
  height: auto;
  padding: 11px;
  border: 1px solid var(--color-border);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  text-align: center;
  vertical-align: top;
}

table.massage-table tr:first-child td {
  padding: 22px 11px;
  background-color: var(--color-alternate);
}

table.massage-table tr td:first-child {
  width: 15%;
  background-color: var(--color-alternate);
}

.massage-price-list {
  color: var(--color-quaternary);
}

.massage-price-list .massage-item {
  border-left: solid 4px var(--color-quaternary);
}

.massage-item em {
  color: var(--color-primary);
  font-style: normal;
}

.massage-price-list .massage-title {
  color: var(--color-quaternary);
}

section.contact-form {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

section.anchor {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 55px 0;
  background-color: var(--color-alternate);
}

section.anchor.recruit-anchor {
  margin-bottom: 88px;
}

.anchor-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: min(2vw, 24px) 2%;
}

.anchor-item {
  overflow: hidden;
  position: relative;
  width: 23.5%;
  height: 66px;
  background-color: #fff;
  padding: 0 33px;
  background-image: url(../images/common/icon-readmore-hover.svg);
  background-size: 22px 22px;
  background-position: calc(100% - 22px) center;
  background-repeat: no-repeat;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-font);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.company-anchor .anchor-item {
  width: 32%;
}

section.recruit-anchor .anchor-item {
  background-image: url(../images/common/icon-recruit.svg);
}

.anchor-item.active,
.anchor-item:hover {
  background-color: var(--color-primary);
  color: #fff;
  background-image: url(../images/common/icon-readmore.svg);
  background-size: 22px 22px;
  background-position: calc(100% - 22px) center;
  background-repeat: no-repeat;
}

section.recruit-anchor .anchor-item.active,
section.recruit-anchor .anchor-item:hover {
  background-color: var(--color-quaternary);
  background-image: url(../images/common/icon-recruit-hover.svg);
}

.anchor-list a {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 44px;
}

section.visual.short h2 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  margin-top: 0 !important;
  margin-bottom: 22px;
  text-align: left;
}

section.visual.short h3 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-top: 0 !important;
  margin-bottom: 11px;
  text-align: left;
}

article {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

article h1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.5;
  text-align: center;
}

article img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 55px;
}

article p {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2;
  color: var(--color-font);
  margin-bottom: 1em;
}

table.default-table {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  border-collapse: collapse;
  margin-top: 88px;
}

table.default-table tr {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
}

table.default-table th {
  overflow: hidden;
  position: relative;
  width: 110px;
  height: auto;
  padding: 16.5px 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-primary);
  vertical-align: top;
}

table.default-table td {
  overflow: hidden;
  position: relative;
  width: calc(100% - 110px);
  height: auto;
  padding: 16.5px 0;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--color-font);
  vertical-align: top;
}

.office-contact {
  overflow: hidden;
  position: relative;
  width: max-content;
  max-width: 660px;
  height: auto;
  margin: 55px auto 0 auto;
  padding: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background-color: var(--color-alternate);
}

button.button-office-contact {
  overflow: hidden;
  position: relative;
  width: 220px;
  height: 55px;
  color: #fff;
  background-color: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.button-office-contact:hover {
  opacity: 0.82;
}

a.tel-office-contact {
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-primary);
  transition: all 0.3s ease;
}

a.tel-office-contact:hover {
  opacity: 0.82;
}

section.news {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

.category-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 0;
}

.category-list li {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 132px;
  height: 44px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  color: #808080;
  transition: all 0.3s ease;
}

.category-list li a {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-list li.active,
.category-list li:hover {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
}

.archive .news-list {
  margin-top: 33px;
}

.breadcrumbs-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 22px 0 0 0;
}

.news-information {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}

.single-news article h1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.5;
  text-align: left;
  padding: 33px 0;
  border-bottom: 1px solid var(--color-border);
}

.news-images {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: min(2vw, 22px) 2%;
  margin-top: 55px;
}

.news-images img {
  overflow: hidden;
  position: relative;
  width: 49%;
  height: auto;
  margin-bottom: 0 !important;
}

.news-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 22px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-top: 55px;
}

.news-navigation-previous {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 44px;
  background-image: url(../images/common/news-prev.svg);
  background-size: 33px 33px;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-font);
  transition: all 0.3s ease;
  float: left;
}

.news-navigation-next {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 44px;
  background-image: url(../images/common/news-next.svg);
  background-size: 33px 33px;
  background-repeat: no-repeat;
  background-position: right center;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-font);
  transition: all 0.3s ease;
  float: right;
}

section.faq {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

.faq-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.faq-question {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 22px 22px 88px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.faq-question::before {
  position: absolute;
  top: 16px;
  left: 22px;
  width: 27.5px;
  height: 44px;
  content: "";
  background-image: url(../images/common/icon-q.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.faq-answer {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 22px 22px 22px 88px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
  background-color: var(--color-alternate);
}

.faq-answer::before {
  position: absolute;
  top: 16px;
  left: 24px;
  width: 26px;
  height: 44px;
  content: "";
  background-image: url(../images/common/icon-a.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

section.greeting {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

.greeting-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.greeting-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
}

.greeting-image span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 60% 50%;
}

.greeting-information {
  overflow: hidden;
  position: relative;
  width: 760px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-right: 380px;
}

.greeting-slogan {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-tertiary);
  line-height: 2;
}

.greeting-position {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
  margin-top: 55px;
}

.greeting-name {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 2;
}

.greeting-description {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 55px;
}

.greeting-description p {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
  margin-bottom: 1em;
}

section.profile {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

.heading {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
  padding-left: 18px;
  border-left: solid 4px var(--color-primary);
  margin-top: 44px;
  margin-bottom: 33px;
  text-align: left;
}

.profile-update {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-font);
  text-align: right;
  margin-top: 16.5px;
}

section.philosophy {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

.philosophy-list {
  overflow: hidden;
  position: relative;
  width: 100%;
}

table.philosophy-table {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 33px;
}

table.philosophy-table th {
  overflow: hidden;
  position: relative;
  width: 132px;
  height: auto;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.4em;
  color: var(--color-primary);
  text-align: left;
  padding: 11px 0;
  border-top: 1px solid var(--color-primary);
  vertical-align: top;
}

table.philosophy-table td {
  overflow: hidden;
  position: relative;
  width: calc(100% - 132px);
  height: auto;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-quaternary);
  text-align: left;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}

section.history {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

.history-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.history-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.history-year {
  overflow: hidden;
  position: relative;
  width: 110px;
  height: auto;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-align: left;
  padding: 22px 0;
}

.history-line {
  overflow: hidden;
  position: relative;
  width: 88px;
  height: auto;
}

.history-line img {
  overflow: hidden;
  position: relative;
  width: 22px;
  height: auto;
  display: block;
  margin: 26px auto 0 auto;
}

.history-content:first-child .history-line img {
  margin-top: 0;
  padding-top: 26px;
  background-color: #fff;
}

.history-content:last-child .history-line img {
  padding-bottom: 26px;
  background-color: #fff;
}

.history-line span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1px;
  height: 100%;
  margin: auto;
  background-color: var(--color-primary);
}

.history-event {
  overflow: hidden;
  position: relative;
  width: calc(100% - 198px);
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}

section.recruit {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

section.recruit h3 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
  text-align: left;
  margin-top: 55px;
}

section.recruit h4 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
  text-align: left;
  padding-left: 18px;
  border-left: solid 4px var(--color-primary);
}

.recruit-description {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 33px;
}

.recruit-description p {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
  margin-bottom: 1em;
}

section.recruit table.default-table {
  margin-top: 33px;
}

section.recruit:last-child {
  margin-bottom: 55px;
}

.recruit-description ul {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 2em;
}

.recruit-description ul li {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  padding-left: 44px;
  border-left: solid 4px var(--color-primary);
}

.recruit-description ul li::before {
  content: "⚫︎";
  position: absolute;
  top: 4.5px;
  left: 29px;
  width: 13px;
  height: auto;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-align: left;
}

.recruit-flow-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 33px;
}

.recruit-flow-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.recruit-flow-item-number {
  overflow: hidden;
  position: relative;
  width: 66px;
  height: auto;
}

.recruit-flow-item-line {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: var(--color-primary);
}

.recruit-flow-item-number-text {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "Poppins", sans-serif !important;
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 0;
  background-color: #fff;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  display: block;
  margin-top: 12px;
}

.recruit-flow-item:first-child .recruit-flow-item-number-text {
  margin-top: 0;
  padding-top: 12px;
}

.recruit-flow-item:last-child .recruit-flow-item-number-text {
  padding-bottom: 49px;
}

.recruit-flow-item-content {
  overflow: hidden;
  position: relative;
  width: calc(100% - 99px);
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  line-height: 1.75;
  text-align: left;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
  margin-left: 33px;
}

.recruit-flow-item-content em {
  font-style: normal;
  color: var(--color-primary);
}

section.recruit-fc-contact {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0 88px 0;
}

button.button-recruit-fc-contact {
  overflow: hidden;
  position: relative;
  width: 440px;
  height: 110px;
  color: #fff;
  background-color: var(--color-primary);
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto;
}

button.button-recruit-fc-contact:hover {
  opacity: 0.82;
}

button.button-recruit-fc-contact span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  padding-left: 66px;
  background-image: url(../images/common/icon-mail.svg);
  background-size: 33px 33px;
  background-position: 22px center;
  background-repeat: no-repeat;
}

.service-flow-list {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 33px;
}

.service-flow-item {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 55px;
}

.service-flow-item-number {
  overflow: hidden;
  position: relative;
  width: 77px;
  height: auto;
}

.service-flow-item-line {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
}

.service-flow-item-number-circle-wrapper {
  overflow: hidden;
  position: relative;
  width: 77px;
  height: auto;
  background-color: #fff;
  padding: 11px 0;
  text-align: center;
}

.service-flow-item-number-circle {
  overflow: hidden;
  position: relative;
  width: 77px;
  height: 77px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
  background-color: var(--color-primary);
  color: #fff;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.service-flow-item-number-circle span {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  line-height: 1;
  text-align: center;
  margin-bottom: 11px;
}

.service-flow-item-content {
  overflow: hidden;
  position: relative;
  width: calc(100% - 132px);
  height: auto;
}

.service-flow-item-content-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 33px 0;
  border-top: 1px solid var(--color-border);
}

.service-flow-item-content-description {
  overflow: hidden;
  position: relative;
  width: calc(100% - 330px);
  height: auto;
}

.service-flow-item-content-description h5 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "M PLUS Rounded 1c", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}

.service-flow-item-content-description p {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-family: "Lato", sans-serif !important;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-font);
  margin-top: 1em;
}

.service-flow-item-content-image {
  overflow: hidden;
  position: relative;
  width: 264px;
  height: auto;
}

.service-flow-item-content-image img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

.service-flow-list em {
  font-style: normal;
  color: var(--color-primary);
}

.recruit .faq-list-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 55px;
}

.contact-content-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 55px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.contact-key {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-font);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16.5px;
}

.contact-key p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.required {
  overflow: hidden;
  position: relative;
  width: 33px;
  height: 22px;
  line-height: 22px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--color-primary);
  text-align: center;
}

.required p {
  overflow: hidden;
  position: relative;
  width: 33px;
  height: 22px;
  line-height: 22px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--color-primary);
  text-align: center;
}

.contact-note {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
  color: var(--color-font);
  border: solid 1px var(--color-primary);
  padding: 30px;
  margin-top: 33px;
}

.contact-note p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
  color: var(--color-font);
}

.contact-agree {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0;
  color: var(--color-primary);
  text-align: center;
}

.contact-agree p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0;
  color: var(--color-primary);
  text-align: center;
}

section.privacy-policy {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 88px 0;
}

section.privacy-policy h1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  text-align: center;
  margin-top: 11px;
}

section.privacy-policy h2 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
  text-align: left;
  margin-top: 55px;
  margin-bottom: 16.5px;
  padding-bottom: 5.5px;
  border-bottom: solid 1px var(--color-border);
}

section.privacy-policy p {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-font);
}

.mobile-fixed-navigation {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--header-sp);
  z-index: 11;
  transition: all 0.3s ease;
  display: none;
}

.mobile-fixed-navigation nav {
  overflow: hidden;
  position: relative;
  width: auto;
  height: var(--header-sp);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mobile-fixed-navigation nav a {
  overflow: hidden;
  position: relative;
  width: 50%;
  height: var(--header-sp);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-fixed-navigation nav button.button-header {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: var(--header-sp);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mobile-fixed-navigation nav button.button-header:hover {
  opacity: 0.82;
}

.mobile-fixed-navigation nav button.button-header span {
  overflow: hidden;
  position: relative;
  width: max-content;
  height: 33px;
  line-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  padding-left: 44px;
  display: inline-block;
}

.mobile-fixed-navigation nav button.button-header span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 33px;
  height: 33px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mobile-fixed-navigation nav button.button-header.button-office {
  background-color: var(--color-secondary);
}

.mobile-fixed-navigation nav button.button-header.button-office span::before {
  background-image: url(../images/common/icon-office.svg);
}

.mobile-fixed-navigation nav button.button-header.button-contact {
  background-color: var(--color-primary);
}

.mobile-fixed-navigation nav button.button-header.button-contact span::before {
  background-image: url(../images/common/icon-mail.svg);
}

.mobile-privacy-policy {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-font);
  text-align: left;
  margin-top: 22px;
}

.pagetop-sp {
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 55px;
  background-color: var(--color-primary);
  color: #fff;
  transition: all 0.3s ease;
}

.pagetop-sp:hover {
  opacity: 0.82;
}

.pagetop-sp img {
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

.opening-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 150vmax var(--color-primary);
  animation: hole-open 1s cubic-bezier(.77, 0, .18, 1) forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes hole-open {
  0% {
    width: 0;
    height: 0;
  }

  33% {
    width: 0;
    height: 0;
  }

  99% {
    width: 150vmax;
    height: 150vmax;
  }

  100% {
    width: 150vmax;
    height: 150vmax;
    display: none !important;
  }
}

.pc {
  display: block;
}

.sp {
  display: none;
}