:root {
  --blue: #2666ba;
  --ink: #343538;
  --section-gray: #f0f0f0;
  --hero-edge: max(calc((100vw - 1440px) / 2), 0px);
  --button-inline-padding: clamp(30px, 3.333333vw, 48px);
  --font-ja: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  --font-en: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-padding-top: 90px;
  background: #fdfdfd;
  color: var(--ink);
  font-family: var(--font-ja);
}

body {
  margin: 0;
  max-width: 100%;
  min-width: 320px;
  overflow-x: hidden;
  background: #fdfdfd;
}

@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

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

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

.mobile-break {
  display: none;
}

.site {
  overflow-x: clip;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 1024px;
  margin-inline: auto;
  overflow: hidden;
  background: #fdfdfd;
}

.hero__bg-copy {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  color: rgb(38 102 186 / 5%);
  font-family: var(--font-en);
  font-size: 110px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 11px;
  white-space: nowrap;
  pointer-events: none;
}

.hero__bg-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.hero__bg-track span {
  flex: 0 0 auto;
  padding-right: 88px;
}

.hero__bg-track--left {
  animation: marquee-left 42s linear infinite;
}

.hero__bg-track--right {
  animation: marquee-right 46s linear infinite;
  transform: translateX(-50%);
}

.hero__bg-copy--top {
  top: 109px;
}

.hero__bg-copy--bottom {
  top: 842px;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-track {
    animation: none;
  }

  .hero__copy-line::before {
    animation: none;
    opacity: 0;
  }

  .hero__copy-text,
  .hero__title h1 .hero__copy-line::after {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__scroll::after {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }

  .js-image-reveal::after {
    animation: none;
    opacity: 0;
  }

  .js-image-reveal img,
  .js-image-reveal.is-revealed img {
    animation: none;
    opacity: 1;
  }

  .js-text-reveal,
  .js-text-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero__header {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px calc(var(--hero-edge) + clamp(28px, 2.361111vw, 34px)) 0
    calc(var(--hero-edge) + 35px);
}

.hero__brand {
  display: block;
  padding-top: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 3.48px;
}

.hero__nav {
  display: grid;
  gap: clamp(18px, 1.736111vw, 25px);
  justify-items: center;
  padding-top: 54px;
  font-size: clamp(16px, 1.319444vw, 19px);
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 1.9px;
}

.hero__nav a {
  position: relative;
  display: block;
  min-width: 116px;
  text-align: center;
}

.hero__nav a span {
  position: relative;
  display: inline-block;
}

.hero__nav a span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s ease;
}

.hero__nav a:hover span::after,
.hero__nav a:focus-visible span::after {
  transform: scaleX(1);
}

.hero__nav a.hero__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  min-width: 140px;
  height: 52px;
  margin-top: 10px;
  padding: 0 0 2px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 1.19px;
}

.hero__nav a.hero__contact,
.lower-nav__contact,
.form-submit,
.form-back,
.works-page__button,
.business__button,
.about__button,
.works__button,
.contact__button,
.works__arrow {
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    border-color 0.28s ease;
}

.hero__nav a.hero__contact:hover,
.hero__nav a.hero__contact:focus-visible,
.form-submit:hover,
.form-submit:focus-visible,
.works-page__button:hover,
.works-page__button:focus-visible,
.about__button:hover,
.about__button:focus-visible,
.works__button:hover,
.works__button:focus-visible,
.contact__button:hover,
.contact__button:focus-visible {
  background: #fff;
  color: var(--blue);
  box-shadow:
    inset 0 0 0 1px var(--blue),
    0 10px 22px rgb(38 102 186 / 18%);
  transform: translateY(-3px);
}

.lower-nav__contact:hover,
.lower-nav__contact:focus-visible,
.business__button:hover,
.business__button:focus-visible,
.form-back:hover,
.form-back:focus-visible {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow:
    inset 0 0 0 1px #fff,
    0 10px 22px rgb(38 102 186 / 18%);
  transform: translateY(-3px);
}

.works__arrow:hover,
.works__arrow:focus-visible {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 6px 14px rgb(38 102 186 / 18%);
  transform: translateY(-2px);
}

.hero__photo {
  position: absolute;
  top: 168px;
  left: calc(var(--hero-edge) + clamp(32px, calc(14.166667vw - 138px), 66px));
  z-index: 1;
  width: min(1164px, calc(100vw - 190px));
  height: 700px;
  overflow: hidden;
  background: #d9d9d9;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero__photo img.is-active {
  opacity: 1;
}

.hero__photo img.hero__slide--main {
  inset: auto;
  top: -126px;
  left: -230px;
  width: 1448px;
  height: 880px;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 15%);
}

.hero__title {
  position: absolute;
  top: 559px;
  left: calc(var(--hero-edge) + 108px);
  z-index: 2;
  width: 547px;
  color: #fff;
}

.hero__title h1 {
  display: grid;
  gap: 0;
  margin: 0;
  font-size: 58px;
  font-weight: 700;
  line-height: 90px;
  letter-spacing: 4.06px;
}

.hero__copy-line {
  --copy-delay: 0.35s;
  position: relative;
  display: block;
  width: max-content;
  overflow: hidden;
}

.hero__copy-line:nth-child(2) {
  --copy-delay: 0.55s;
}

.hero__copy-line--en {
  --copy-delay: 0.8s;
}

.hero__copy-line--en:nth-child(2) {
  --copy-delay: 0.92s;
}

.hero__copy-line--en:nth-child(3) {
  --copy-delay: 1.04s;
}

.hero__copy-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  transform: translateX(-102%);
  animation: hero-copy-mask 0.86s cubic-bezier(0.19, 1, 0.22, 1) var(--copy-delay)
    both;
}

.hero__copy-text {
  display: block;
  opacity: 0;
  transform: translateY(24%);
  animation: hero-copy-text 0.58s cubic-bezier(0.19, 1, 0.22, 1)
    calc(var(--copy-delay) + 0.34s) both;
}

.hero__title h1 .hero__copy-line::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: calc(100% - 3px);
  height: 2.5px;
  background: #fff;
  opacity: 0;
  transform: translateX(-12%);
  animation: hero-copy-underline 0.5s cubic-bezier(0.19, 1, 0.22, 1)
    calc(var(--copy-delay) + 0.46s) both;
}

.hero__title p {
  position: absolute;
  top: 110px;
  left: 206px;
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 2.34px;
}

@keyframes hero-copy-mask {
  0% {
    transform: translateX(-102%);
  }

  46% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(102%);
  }
}

@keyframes hero-copy-text {
  0% {
    opacity: 0;
    transform: translateY(24%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-copy-underline {
  0% {
    opacity: 0;
    transform: translateX(-12%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero__blue-block {
  position: absolute;
  top: 639px;
  right: calc(var(--hero-edge) + clamp(88px, calc(31.25vw - 287px), 163px));
  z-index: 0;
  width: 400px;
  height: 275px;
  background: var(--blue);
}

.hero__scroll {
  position: absolute;
  top: 783px;
  right: calc(var(--hero-edge) + 39px);
  z-index: 3;
  width: 34px;
  height: 240px;
  color: var(--blue);
  overflow: hidden;
}

.hero__scroll::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  width: 1px;
  height: 240px;
  background: rgb(38 102 186 / 24%);
}

.hero__scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  width: 1px;
  height: 58px;
  background: var(--blue);
  transform: translateY(-64px);
  animation: scroll-line 2.2s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}

.hero__scroll span {
  position: absolute;
  top: 0;
  right: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.84px;
}

@keyframes scroll-line {
  0% {
    opacity: 0;
    transform: translateY(-64px);
  }

  14% {
    opacity: 1;
  }

  78% {
    opacity: 1;
    transform: translateY(246px);
  }

  100% {
    opacity: 0;
    transform: translateY(246px);
  }
}

@media (max-width: 1200px) {
  .hero {
    min-height: 900px;
  }

  .hero__brand {
    font-size: clamp(20px, 2.2vw, 29px);
  }
}

@media (min-width: 1441px) {
  .hero {
    min-height: clamp(1000px, calc(1096px - 5vw), 1024px);
  }

  .hero__header {
    padding-top: clamp(32px, calc(6vw - 54.4px), 34px);
    padding-right: clamp(34px, calc(5vw - 38px), 58px);
    padding-left: clamp(35px, calc(5.416667vw - 43px), 61px);
  }

  .hero__photo {
    left: clamp(66px, calc(21.458333vw - 243px), 169px);
    width: clamp(1164px, calc(60.833333vw + 288px), 1456px);
    height: clamp(650px, calc(850px - 10.416667vw), 700px);
  }

  .hero__photo img.hero__slide--main {
    top: clamp(-126px, calc(26.25vw - 504px), 0px);
    left: clamp(-230px, calc(47.916667vw - 920px), 0px);
    width: max(100%, clamp(1448px, calc(1.666667vw + 1424px), 1456px));
    height: clamp(650px, calc(1570px - 47.916667vw), 880px);
    object-fit: cover;
    object-position: center center;
  }

  .hero__title {
    top: clamp(453px, calc(877px - 22.083333vw), 559px);
    left: clamp(108px, calc(29.166667vw - 312px), 248px);
  }

  .hero__title h1 {
    font-size: 58px;
    line-height: 90px;
    letter-spacing: 4.06px;
  }

  .hero__title h1 .hero__copy-line::after {
    height: 2.5px;
  }

  .hero__title p {
    top: 110px;
    left: clamp(206px, calc(6.666667vw + 110px), 238px);
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 2.34px;
  }

  .hero__blue-block {
    top: clamp(606px, calc(738px - 6.875vw), 639px);
    left: clamp(877px, calc(86.041667vw - 362px), 1290px);
    right: auto;
    width: clamp(400px, calc(2.083333vw + 370px), 410px);
    height: clamp(275px, calc(0.208333vw + 272px), 276px);
  }

  .hero__scroll {
    right: clamp(39px, calc(14.791667vw - 174px), 110px);
  }
}

.lower-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 76px;
  padding: 0 calc(var(--hero-edge) + 34px) 0 calc(var(--hero-edge) + 40px);
  background: var(--blue);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
  will-change: transform, opacity;
}

.lower-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lower-nav--page {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lower-nav__brand {
  font-size: 29px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 3.48px;
}

.lower-nav__links {
  display: flex;
  align-items: center;
  gap: 58px;
  font-size: 17px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 1.19px;
}

.lower-nav__links a:not(.lower-nav__contact) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  transition:
    transform 0.28s ease,
    color 0.28s ease;
}

.lower-nav__links a:not(.lower-nav__contact)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
}

.lower-nav__links a:not(.lower-nav__contact):hover,
.lower-nav__links a:not(.lower-nav__contact):focus-visible {
  transform: translateY(-3px);
}

.lower-nav__links a:not(.lower-nav__contact):hover::after,
.lower-nav__links a:not(.lower-nav__contact):focus-visible::after {
  transform: scaleX(1);
}

.lower-nav__contact {
  display: grid;
  place-items: center;
  width: 140px;
  height: 48px;
  margin-left: 8px;
  border-radius: 4px;
  background: #fff;
  color: var(--blue);
  font-size: 17px;
  letter-spacing: 1.19px;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

@media (min-width: 1441px) {
  .lower-nav {
    padding-right: clamp(34px, calc(5vw - 38px), 58px);
    padding-left: clamp(40px, calc(4.375vw - 23px), 61px);
  }

  .lower-nav__links {
    gap: 57px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lower-nav {
    transition: none;
  }
}

.section-heading {
  text-align: center;
}

.subpage__main {
  padding-top: 76px;
}

.page-hero {
  position: relative;
  overflow: hidden;
  background: #fdfdfd;
}

.page-hero--business {
  height: clamp(315px, 21.875vw, 420px);
}

.page-hero--works {
  height: clamp(280px, 19.270833vw, 370px);
}

.page-hero__label {
  margin: 0 0 13px;
  color: #fff;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.page-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 37px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 4.44px;
}

.page-hero__line {
  display: block;
  width: 50px;
  height: 1px;
  margin: 17px auto 0;
  background: #fff;
}

.page-hero__visual {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #1e2b38;
}

.page-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 26 53 / 42%);
}

.page-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translate(-50%, -44%);
}

.page-hero--works .page-hero__visual img {
  object-position: center 47%;
}

.page-hero--business .page-hero__visual img {
  object-position: center center;
}

.page-hero--business .page-hero__overlay {
  background: rgb(1 62 141 / 20%);
}

.page-hero--contact {
  height: clamp(315px, 21.875vw, 420px);
}

.page-hero--contact .page-hero__visual img {
  object-position: center 48%;
}

.page-hero--contact .page-hero__overlay {
  background: rgb(0 66 145 / 28%);
}

.page-hero--privacy {
  height: clamp(315px, 21.875vw, 420px);
  background: var(--blue);
}

.page-hero--privacy .page-hero__visual img {
  object-position: center 48%;
}

.page-hero--privacy .page-hero__visual {
  display: none;
}

.page-hero--privacy .page-hero__overlay {
  display: none;
}

.faq-page {
  padding: clamp(108px, 7.5vw, 144px) 0 clamp(114px, 7.916667vw, 152px);
  background: #f0f0f0;
}

.faq-page__lead {
  width: min(calc(100% - 96px), clamp(738px, 51.25vw, 984px));
  margin: clamp(44px, 3.125vw, 60px) auto 0;
  color: var(--ink);
  font-size: clamp(15px, calc(0.885417vw + 2px), 19px);
  font-weight: 800;
  line-height: clamp(27px, 1.859375vw, 36px);
  letter-spacing: clamp(1.3px, 0.088542vw, 1.7px);
  text-align: center;
}

.faq-page__lead p {
  margin: 0;
}

.faq-page__lead p + p {
  margin-top: 0;
}

.faq-page__list {
  display: grid;
  gap: clamp(36px, 2.552083vw, 49px);
  width: min(calc(100% - 96px), clamp(738px, 51.25vw, 984px));
  margin: clamp(72px, 5.052083vw, 97px) auto 0;
}

.faq-item {
  padding: calc(clamp(16px, 1.09375vw, 21px) + 5px) clamp(30px, 2.083333vw, 40px)
    calc(clamp(17px, 1.145833vw, 22px) + 5px);
  border: 1px solid #d1d1d1;
  background: #fff;
}

.faq-item__row {
  display: grid;
  grid-template-columns: clamp(52px, 3.645833vw, 70px) minmax(0, 1fr);
  gap: clamp(22px, 1.666667vw, 32px);
  align-items: center;
}

.faq-item__row + .faq-item__row {
  position: relative;
  margin-top: clamp(14px, 1.041667vw, 20px);
  padding-top: clamp(13px, 0.911458vw, 18px);
}

.faq-item__row + .faq-item__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(clamp(52px, 3.645833vw, 70px) + clamp(22px, 1.666667vw, 32px));
  height: 1px;
  background: #d1d1d1;
}

.faq-item__mark {
  display: grid;
  place-items: center;
  width: clamp(42px, 2.916667vw, 56px);
  height: clamp(42px, 2.916667vw, 56px);
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-en);
  font-size: clamp(22px, 1.5625vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.faq-item__row + .faq-item__row .faq-item__mark {
  background: #f0f0f0;
  color: var(--blue);
}

.faq-item h3,
.faq-item p {
  margin: 0;
}

.faq-item h3 {
  color: var(--ink);
  font-size: clamp(17px, 1.197917vw, 23px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: clamp(1.7px, 0.14375vw, 2.76px);
}

.faq-item p {
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: clamp(0.78px, 0.053125vw, 1.02px);
}

.contact-form-section {
  background: #fdfdfd;
}

.contact-form-section__stripe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: clamp(32px, 2.239583vw, 43px);
}

.contact-form-section__stripe span:first-child {
  background: #d1d1d1;
}

.contact-form-section__stripe span:last-child {
  background: var(--blue);
}

.contact-form-section__inner {
  padding: clamp(112px, 7.8125vw, 150px) 0 clamp(240px, 16.666667vw, 320px);
}

.contact-form-section__lead {
  width: min(calc(100% - 96px), clamp(738px, 51.25vw, 984px));
  margin: clamp(43px, 3.020833vw, 58px) auto 0;
  color: var(--ink);
  font-size: clamp(15px, calc(0.885417vw + 2px), 19px);
  font-weight: 800;
  line-height: clamp(27px, 1.859375vw, 36px);
  letter-spacing: clamp(1.3px, 0.088542vw, 1.7px);
  text-align: center;
}

.contact-form-section__lead p {
  margin: 0;
}

.contact-form-section__lead p + p {
  margin-top: 0;
}

.contact-form {
  display: grid;
  gap: clamp(24px, 1.666667vw, 32px);
  width: min(calc(100% - 96px), clamp(929px, 64.479167vw, 1238px));
  margin: clamp(80px, 5.572917vw, 107px) auto 0;
}

.form-row {
  display: grid;
  grid-template-columns:
    clamp(183px, 12.708333vw, 244px)
    clamp(50px, 3.4375vw, 66px)
    minmax(0, 1fr);
  gap: clamp(28px, 1.979167vw, 38px);
  align-items: center;
}

.form-row--message {
  align-items: start;
}

.form-row__label {
  color: var(--ink);
  font-size: clamp(15px, 1.041667vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: clamp(1.5px, 0.125vw, 2.4px);
}

.form-row__badge {
  display: grid;
  place-items: center;
  width: clamp(50px, 3.333333vw, 64px);
  height: clamp(28px, 1.875vw, 36px);
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  font-size: clamp(12px, 0.833333vw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(1.2px, 0.1vw, 1.92px);
}

.form-row__badge--optional {
  border: 1px solid #d1d1d1;
  background: #fff;
  color: #343538;
}

.form-row input,
.form-row textarea {
  width: 100%;
  border: 1px solid #d1d1d1;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(14px, 0.9375vw, 18px);
  font-weight: 400;
  letter-spacing: clamp(0.84px, 0.05625vw, 1.08px);
}

.form-row input {
  height: clamp(52px, 3.645833vw, 70px);
  padding: 0 clamp(22px, 1.5625vw, 30px);
}

.form-row textarea {
  min-height: clamp(315px, 21.875vw, 420px);
  padding: clamp(20px, 1.40625vw, 27px) clamp(22px, 1.5625vw, 30px);
  line-height: 1.8;
  resize: vertical;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #d1d1d1;
}

.form-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 0.989583vw, 19px);
  margin: clamp(53px, 3.697917vw, 71px) 0 0;
  color: var(--ink);
  font-size: clamp(15px, 1.041667vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: clamp(1.5px, 0.125vw, 2.4px);
}

.form-privacy input {
  width: clamp(24px, 1.666667vw, 32px);
  height: clamp(24px, 1.666667vw, 32px);
  margin: 0;
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid #d1d1d1;
  border-radius: 0;
  background: #fff;
}

.form-privacy input::before {
  content: "";
  width: 0.42em;
  height: 0.72em;
  margin-top: -0.12em;
  border: solid var(--blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.14s ease;
}

.form-privacy input:checked::before {
  transform: rotate(45deg) scale(1);
}

.form-privacy a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  transition: opacity 0.2s ease;
}

.form-privacy a:hover {
  opacity: 0.72;
}

.form-errors {
  width: min(calc(100% - 96px), clamp(738px, 51.25vw, 984px));
  margin: clamp(42px, 2.916667vw, 56px) auto 0;
  padding: clamp(22px, 1.5625vw, 30px) clamp(26px, 1.822917vw, 35px);
  border: 1px solid #d96b6b;
  background: #fff;
  color: #b02d2d;
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: clamp(0.78px, 0.053125vw, 1.02px);
}

.form-errors p {
  margin: 0 0 10px;
  font-weight: 700;
}

.form-errors ul {
  margin: 0;
  padding-left: 1.4em;
}

.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 1.5625vw, 30px);
  width: clamp(316px, 21.927083vw, 421px);
  height: clamp(60px, 4.21875vw, 81px);
  margin: clamp(51px, 3.541667vw, 68px) auto 0;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: clamp(16px, 1.041667vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(1.92px, 0.125vw, 2.4px);
  cursor: pointer;
}

.form-submit[href] {
  text-decoration: none;
}

.contact-form-section--confirm .contact-form-section__inner,
.thanks-section {
  padding: clamp(118px, 8.333333vw, 160px) 0 clamp(160px, 11.111111vw, 213px);
  background: #fdfdfd;
}

.contact-form-section--confirm .contact-form-section__lead {
  text-align: center;
}

.confirm-table {
  display: grid;
  gap: clamp(54px, 3.75vw, 72px);
  width: min(calc(100% - 96px), clamp(810px, 56.25vw, 1080px));
  margin: clamp(108px, 7.5vw, 144px) auto 0;
}

.confirm-table__row {
  display: grid;
  grid-template-columns:
    clamp(160px, 11.111111vw, 213px)
    clamp(50px, 3.333333vw, 64px)
    minmax(0, 1fr);
  gap: clamp(54px, 3.75vw, 72px);
  align-items: center;
}

.confirm-table dt,
.confirm-table dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 0.989583vw, 19px);
  line-height: 1.9;
  letter-spacing: clamp(1.4px, 0.11875vw, 2.28px);
}

.confirm-table dt {
  font-weight: 700;
}

.confirm-table dd {
  font-weight: 400;
}

.confirm-table__badge {
  justify-self: start;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 2.083333vw, 40px);
  margin: clamp(60px, 4.166667vw, 80px) auto 0;
}

.form-actions form {
  margin: 0;
}

.form-actions .form-submit {
  margin: 0;
}

.form-back {
  display: grid;
  place-items: center;
  width: clamp(216px, 15vw, 288px);
  height: clamp(60px, 4.21875vw, 81px);
  border: 1px solid #d1d1d1;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(16px, 1.041667vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(1.92px, 0.125vw, 2.4px);
}

.thanks-section__body {
  width: min(calc(100% - 96px), clamp(738px, 51.25vw, 984px));
  margin: clamp(60px, 4.166667vw, 80px) auto 0;
  text-align: center;
}

.thanks-section__body p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 0.989583vw, 19px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: clamp(1.4px, 0.11875vw, 2.28px);
}

.privacy-policy {
  padding: clamp(112px, 7.8125vw, 150px) 0 clamp(96px, 6.666667vw, 128px);
  background: #fdfdfd;
}

.privacy-policy__inner {
  width: min(calc(100% - 120px), 1600px);
  margin: 0 auto;
}

.privacy-policy__body {
  margin-top: 0;
}

.privacy-policy__lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 0.989583vw, 19px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: clamp(0.7px, 0.059375vw, 1.14px);
}

.privacy-policy__section {
  margin-top: clamp(54px, 3.75vw, 72px);
  padding-top: 0;
  border-top: 0;
}

.privacy-policy__section h3 {
  margin: 0 0 clamp(23px, 1.614583vw, 31px);
  color: var(--ink);
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: clamp(1.8px, 0.15vw, 2.88px);
}

.privacy-policy__section:nth-of-type(1) h3,
.privacy-policy__section:nth-of-type(2) h3 {
  font-weight: 700;
}

.privacy-policy__section p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 0.989583vw, 19px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: clamp(0.7px, 0.059375vw, 1.14px);
}

.privacy-policy__section ul {
  margin: clamp(18px, 1.25vw, 24px) 0 0;
  padding-left: 1.2em;
  color: var(--ink);
  font-size: clamp(14px, 0.989583vw, 19px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: clamp(0.7px, 0.059375vw, 1.14px);
}

.privacy-policy__section p + p {
  margin-top: 12px;
}

.privacy-policy__company {
  font-weight: 700;
}

.privacy-policy__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(240px, 16.666667vw, 320px);
  height: clamp(60px, 4.166667vw, 80px);
  margin: clamp(82px, 5.729167vw, 110px) auto 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: clamp(15px, 1.041667vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(2.4px, 0.166667vw, 3.2px);
}

.works-page {
  position: relative;
  padding: clamp(70px, 4.861111vw, 93px) 0 clamp(124px, 8.645833vw, 166px);
  overflow: hidden;
  background:
    url("./assets/works-page-bg.jpg") center clamp(94px, 6.666667vw, 128px) /
      min(100%, 1620px) auto no-repeat,
    #fdfdfd;
}

.works-page__intro {
  position: relative;
  z-index: 1;
  width: min(100% - 96px, 1220px);
  margin: 0 auto;
  text-align: center;
}

.works-page__intro h2 {
  margin: 0 0 clamp(39px, 2.708333vw, 52px);
  color: var(--ink);
  font-size: clamp(29px, 2.03125vw, 39px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: clamp(2.9px, 0.203125vw, 3.9px);
}

.works-page__intro h2 span {
  color: var(--blue);
}

.works-page__intro p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: clamp(1.3px, 0.088542vw, 1.7px);
}

.works-page__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(72px, 5.729167vw, 110px) clamp(28px, 2.604167vw, 50px);
  width: min(calc(100% - clamp(120px, 9.375vw, 180px)), 1560px);
  margin: clamp(82px, 5.729167vw, 110px) auto 0;
}

.work-card {
  min-width: 0;
}

.work-card__media {
  position: relative;
  width: 100%;
  height: clamp(212px, 14.6875vw, 282px);
  margin: 0;
  overflow: hidden;
  background: #ddd;
}

.work-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card:nth-child(8) .work-card__media img,
.work-card:nth-child(9) .work-card__media img {
  object-position: center 54%;
}

.work-card__text {
  min-height: clamp(50px, 3.541667vw, 68px);
  margin: clamp(24px, 1.666667vw, 32px) 0 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: clamp(0.26px, 0.017708vw, 0.34px);
}

.work-card__meta {
  display: grid;
  gap: clamp(7px, 0.520833vw, 10px);
  width: min(100%, clamp(290px, 24.479167vw, 470px));
  margin: clamp(28px, 1.927083vw, 37px) 0 0 clamp(18px, 1.354167vw, 26px);
}

.work-card__meta div {
  display: grid;
  grid-template-columns: clamp(82px, 6.25vw, 120px) minmax(0, 1fr);
  column-gap: clamp(28px, 2.083333vw, 40px);
  align-items: center;
  min-height: clamp(27px, 1.875vw, 36px);
}

.work-card__meta dt,
.work-card__meta dd {
  margin: 0;
  font-size: clamp(13px, 0.885417vw, 16px);
  line-height: 1.6;
  letter-spacing: clamp(1.3px, 0.10625vw, 2.04px);
}

.work-card__meta dt {
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.work-card__meta dd {
  min-width: 0;
  height: 100%;
  padding-left: 0;
  border-bottom: 1px solid rgb(52 53 56 / 72%);
  color: var(--ink);
  font-weight: 500;
}

.works-page__button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 3.125vw, 60px);
  width: clamp(346px, calc(21.927083vw + 30px), 451px);
  height: clamp(60px, 4.21875vw, 81px);
  margin: clamp(96px, 6.666667vw, 128px) auto 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: clamp(16px, 1.041667vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(1.92px, 0.125vw, 2.4px);
}

.works-page__silhouette {
  position: absolute;
  right: max(calc((100vw - 1440px) / 2 - 40px), -12px);
  bottom: -6px;
  z-index: 0;
  width: clamp(310px, 26.041667vw, 500px);
  height: auto;
  filter: brightness(0);
  opacity: 0.05;
  pointer-events: none;
}

.business-intro {
  position: relative;
  min-height: 0;
  padding: clamp(62px, 4.861111vw, 88px) 0 0;
  background:
    linear-gradient(180deg, rgb(253 253 253 / 18%) 0%, #fdfdfd 100%),
    url("./assets/business-intro-bg.jpg") center top / 100% auto no-repeat,
    #fdfdfd;
}

.business-intro__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 120px, 1040px);
  margin: 0 auto;
  text-align: center;
}

.business-intro h2 {
  margin: 0 0 42px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 1.44px;
}

.business-intro h2 span {
  color: var(--blue);
}

.business-intro p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: 0.56px;
}

.business-intro p + p {
  margin-top: 10px;
}

.business-service {
  padding: 150px 0 0;
  background: #fdfdfd;
}

.business-service .section-heading p {
  margin-bottom: clamp(15px, calc(1.770833vw - 10px), 24px);
  font-size: clamp(17px, 1.145833vw, 22px);
}

.business-service .section-heading h2 {
  font-size: clamp(36px, 2.5vw, 48px);
  letter-spacing: clamp(4.32px, 0.3vw, 5.76px);
}

.business-service .section-heading span {
  width: clamp(56px, 3.90625vw, 75px);
  margin-top: clamp(25px, 1.770833vw, 34px);
}

.business-service__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(56px, 3.90625vw, 75px);
  row-gap: clamp(40px, 2.760417vw, 53px);
  width: min(calc(100% - clamp(120px, 15.9375vw, 306px)), 1620px);
  margin: clamp(42px, 2.916667vw, 56px) auto 0;
}

.service-card {
  display: flex;
  min-height: clamp(398px, 27.604167vw, 530px);
  padding: clamp(15px, 1.041667vw, 20px);
  border: clamp(3px, 0.260417vw, 5px) solid #d1d1d1;
  background: #fff;
}

.service-card__media {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 450 / 248;
  background: #e8edf2;
}

.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card {
  flex-direction: column;
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 1.40625vw, 27px) clamp(11px, 0.78125vw, 15px) 0;
}

.service-card__title {
  margin: 0;
  color: var(--blue);
  font-size: clamp(27px, 1.875vw, 36px);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  letter-spacing: clamp(0.81px, 0.05625vw, 1.08px);
}

.service-card__type {
  min-height: clamp(26px, 1.770833vw, 34px);
  margin: clamp(2px, 0.15625vw, 3px) calc(clamp(11px, 0.78125vw, 15px) * -1) 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 2;
  text-align: center;
  letter-spacing: clamp(0.26px, 0.017708vw, 0.34px);
}

.service-card__text {
  margin: clamp(7px, 0.729167vw, 14px) 0 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: clamp(0.26px, 0.017708vw, 0.34px);
}

@media (max-width: 1200px) {
  .business-service {
    padding: 76px 0 128px;
  }

  .business-service__grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100% - 80px, 560px);
    row-gap: 34px;
  }

  .service-card {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .business-service {
    padding: 64px 0 104px;
  }

  .business-service__grid {
    width: min(100% - 48px, 520px);
  }
}

.business-reason {
  padding: 150px 0 0;
  overflow: hidden;
  background: #fdfdfd;
}

.business-reason .section-heading p {
  margin-bottom: clamp(15px, calc(1.770833vw - 10px), 24px);
  font-size: clamp(17px, 1.145833vw, 22px);
}

.business-reason .section-heading h2 {
  font-size: clamp(34px, 2.5vw, 48px);
  letter-spacing: clamp(3.4px, 0.3vw, 5.76px);
}

.business-reason .section-heading span {
  width: clamp(56px, 3.90625vw, 75px);
  margin-top: clamp(29px, 1.979167vw, 38px);
}

.business-reason__list {
  display: grid;
  gap: clamp(120px, 8.854167vw, 170px);
  margin-top: clamp(64px, 4.479167vw, 86px);
}

.reason-item {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, clamp(456px, 31.666667vw, 608px))
    minmax(0, clamp(600px, 41.666667vw, 800px));
  gap: clamp(96px, 10.677083vw, 205px);
  align-items: start;
  justify-content: center;
  width: min(calc(100% - clamp(120px, 15.625vw, 300px)), 1620px);
  min-height: clamp(411px, 28.541667vw, 548px);
  margin: 0 auto;
}

.reason-item--reverse {
  grid-template-columns:
    minmax(0, clamp(600px, 41.666667vw, 800px))
    minmax(0, clamp(456px, 31.666667vw, 608px));
}

.reason-item__bg {
  position: absolute;
  top: clamp(65px, 4.53125vw, 87px);
  right: calc(clamp(600px, 41.666667vw, 800px) * -0.19);
  z-index: 0;
  width: min(78.125vw, 1500px);
  height: clamp(390px, 27.083333vw, 520px);
  background: rgb(38 102 186 / 5%);
  pointer-events: none;
}

.reason-item--reverse .reason-item__bg {
  right: auto;
  left: calc(clamp(600px, 41.666667vw, 800px) * -0.19);
}

.reason-item__copy {
  position: relative;
  z-index: 1;
  padding-top: clamp(106px, 7.395833vw, 142px);
}

.reason-item--reverse .reason-item__copy {
  grid-column: 2;
}

.reason-item--reverse .reason-item__media {
  grid-column: 1;
  grid-row: 1;
}

.reason-item__number {
  position: absolute;
  top: clamp(-9px, 0.104167vw, 2px);
  left: 0;
  z-index: -1;
  margin: 0;
  color: rgb(38 102 186 / 10%);
  font-family: var(--font-en);
  font-size: clamp(105px, 8.645833vw, 166px);
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: 0;
  -webkit-text-stroke: 0.45px rgb(38 102 186 / 10%);
}

.reason-item--reverse .reason-item__number {
  right: 0;
  left: auto;
}

.reason-item h3 {
  margin: 0;
  color: var(--blue);
  font-size: clamp(27px, 1.875vw, 36px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: clamp(3.24px, 0.225vw, 4.32px);
}

.reason-item--reverse h3 {
  text-align: right;
}

.reason-item__text {
  display: grid;
  gap: 0;
  margin-top: clamp(34px, 2.864583vw, 55px);
}

.reason-item__text p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 2.35;
  letter-spacing: clamp(0.26px, 0.017708vw, 0.34px);
}

.reason-item__media {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 800 / 548;
  background: #e8edf2;
}

.reason-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .business-reason {
    padding: 96px 0 128px;
  }

  .business-reason__list {
    gap: 86px;
    margin-top: 58px;
  }

  .reason-item,
  .reason-item--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    width: min(100% - 80px, 720px);
    min-height: 0;
  }

  .reason-item__bg,
  .reason-item--reverse .reason-item__bg {
    top: 96px;
    right: -40px;
    left: -40px;
    width: auto;
    height: calc(100% - 46px);
  }

  .reason-item__copy,
  .reason-item--reverse .reason-item__copy,
  .reason-item--reverse .reason-item__media {
    grid-column: auto;
    grid-row: auto;
  }

  .reason-item__copy {
    padding: 82px 34px 0;
  }

  .reason-item--reverse h3 {
    text-align: left;
  }

  .reason-item--reverse .reason-item__number {
    right: auto;
    left: 0;
  }
}

@media (max-width: 767px) {
  .business-reason {
    padding: 78px 0 104px;
  }

  .reason-item,
  .reason-item--reverse {
    width: min(100% - 48px, 560px);
  }

  .reason-item__copy {
    padding: 70px 0 0;
  }

  .reason-item__bg,
  .reason-item--reverse .reason-item__bg {
    right: -24px;
    left: -24px;
  }
}

.business-greeting {
  position: relative;
  padding: 150px 0 90px;
  overflow: hidden;
  background: #fdfdfd;
  text-align: center;
}

.business-greeting .section-heading p {
  margin-bottom: clamp(15px, calc(1.770833vw - 10px), 24px);
  font-size: clamp(17px, 1.145833vw, 22px);
}

.business-greeting .section-heading h2 {
  font-size: clamp(36px, 2.5vw, 48px);
  letter-spacing: clamp(4.32px, 0.3vw, 5.76px);
}

.business-greeting .section-heading span {
  width: clamp(56px, 3.90625vw, 75px);
  margin-top: clamp(31px, 2.1875vw, 42px);
}

.business-greeting__catch {
  margin: calc(clamp(52px, calc(6.041667vw - 35px), 81px) + 15px) auto 0;
  color: var(--blue);
  font-size: clamp(27px, 1.875vw, 36px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: clamp(2.7px, 0.1875vw, 3.6px);
}

.business-greeting__body {
  display: grid;
  gap: clamp(28px, 1.979167vw, 38px);
  width: min(100% - clamp(120px, 16.666667vw, 320px), 1520px);
  margin: calc(clamp(41px, calc(5.3125vw - 35px), 67px) + 15px) auto 0;
}

.business-greeting__body p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 2.35;
  letter-spacing: clamp(0.26px, 0.017708vw, 0.34px);
}

.business-greeting__signature {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(34px, 3.645833vw, 70px);
  margin: clamp(78px, 5.416667vw, 104px) 0 0;
  color: var(--ink);
  font-size: clamp(34px, 2.5vw, 48px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: clamp(3.4px, 0.25vw, 4.8px);
}

.business-greeting__signature span {
  font-size: clamp(23px, 1.614583vw, 31px);
  letter-spacing: clamp(2.3px, 0.161458vw, 3.1px);
}

.business-greeting__signature .business-greeting__name {
  font-family: "Yomogi", var(--font-ja);
  font-size: clamp(42px, 3.125vw, 60px);
  line-height: 1;
  letter-spacing: clamp(4.2px, 0.3125vw, 6px);
}

.business-greeting__marquee {
  position: absolute;
  right: 0;
  bottom: clamp(13px, 1.041667vw, 20px);
  left: 0;
  z-index: 0;
  overflow: hidden;
  color: rgb(38 102 186 / 5%);
  font-family: var(--font-en);
  font-size: clamp(52px, 4.583333vw, 88px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.business-greeting__marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-left 58s linear infinite;
}

.business-greeting__marquee span {
  flex: 0 0 auto;
  padding-right: clamp(56px, 5vw, 96px);
}

@media (prefers-reduced-motion: reduce) {
  .business-greeting__marquee-track {
    animation: none;
  }
}

@media (max-width: 1200px) {
  .business-greeting {
    padding: 96px 0 128px;
  }

  .business-greeting__body {
    width: min(100% - 80px, 880px);
  }
}

@media (max-width: 767px) {
  .business-greeting {
    padding: 78px 0 104px;
  }

  .business-greeting__body {
    width: min(100% - 48px, 560px);
    text-align: left;
  }

  .business-greeting__signature {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}

.section-heading--left {
  text-align: left;
}

.section-heading--left span {
  margin-right: 0;
  margin-left: 0;
}

.business-concept {
  margin-top: 0;
  padding: 88px 0 clamp(126px, 8.802083vw, 169px);
  overflow: hidden;
  background: #fdfdfd;
}

.business-concept__inner {
  display: grid;
  grid-template-columns:
    minmax(0, clamp(648px, 43.75vw, 840px))
    minmax(0, clamp(534px, 37.083333vw, 712px));
  gap: clamp(56px, 4.583333vw, 88px);
  align-items: start;
  justify-content: space-between;
  width: min(calc(100% - clamp(64px, 7.34375vw, 141px)), 1780px);
  margin: 0 auto;
}

.business-concept .section-heading p {
  margin-bottom: clamp(15px, calc(1.770833vw - 10px), 24px);
  font-size: clamp(17px, 1.145833vw, 22px);
}

.business-concept .section-heading h2 {
  font-size: clamp(36px, 2.5vw, 48px);
  letter-spacing: clamp(4.32px, 0.3vw, 5.76px);
}

.business-concept .section-heading span {
  width: clamp(56px, 3.90625vw, 75px);
  margin: clamp(29px, 1.979167vw, 38px) 0 0;
}

.business-concept__catch {
  margin: clamp(50px, 3.697917vw, 71px) 0 0;
  color: var(--blue);
  font-size: clamp(27px, 1.875vw, 36px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: clamp(2.7px, 0.1875vw, 3.6px);
  white-space: nowrap;
}

.business-concept__text {
  display: grid;
  gap: clamp(18px, 1.25vw, 24px);
  margin-top: clamp(31px, 2.34375vw, 45px);
}

.business-concept__text p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(13px, 0.885417vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: clamp(0.26px, 0.017708vw, 0.34px);
}

.business-concept__media {
  position: relative;
  width: 100%;
  margin: clamp(16px, 1.145833vw, 22px) 0 0;
  aspect-ratio: 712 / 486;
}

.business-concept__media::before {
  content: "";
  position: absolute;
  top: clamp(-22px, -1.145833vw, -16px);
  right: clamp(23px, 1.666667vw, 32px);
  bottom: clamp(22px, 1.458333vw, 28px);
  left: clamp(-24px, -1.666667vw, -32px);
  z-index: 0;
  background: var(--blue);
}

.business-concept__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.business-concept__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transform: none;
}

@media (max-width: 1200px) {
  .business-concept {
    margin-top: -48px;
    padding: 46px 0 128px;
  }

  .business-concept__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 54px;
    width: min(100% - 80px, 760px);
  }

  .business-concept__catch {
    white-space: normal;
  }

  .business-concept__media {
    order: -1;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .business-concept {
    margin-top: -36px;
    padding: 28px 0 104px;
  }

  .business-concept__inner {
    width: min(100% - 48px, 560px);
  }
}

.business-company {
  position: relative;
  padding: clamp(244px, 16.927083vw, 325px) 0 clamp(104px, 7.291667vw, 140px);
  overflow: hidden;
  background: #fdfdfd !important;
}

.business-company::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(349px, 24.21875vw, 465px);
  background: url("./assets/business-intro-bg.jpg") center top / 100% auto no-repeat;
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgb(0 0 0 / 58%) 52%, transparent 82%);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 30%,
    rgb(0 0 0 / 58%) 52%,
    transparent 82%
  );
  pointer-events: none;
}

.business-company__stripe {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(32px, 2.239583vw, 43px);
  background: #d1d1d1;
}

.business-company__stripe span {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(488px, 33.90625vw, 651px);
  height: 100%;
  background: var(--blue);
}

.business-company__inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(96px, 16.354167vw, 314px)), 1606px);
  margin: 0 auto;
}

.business-company .section-heading p {
  margin-bottom: clamp(15px, calc(1.770833vw - 10px), 24px);
  font-size: clamp(17px, 1.145833vw, 22px);
}

.business-company .section-heading h2 {
  font-size: clamp(36px, 2.5vw, 48px);
  letter-spacing: clamp(4.32px, 0.3vw, 5.76px);
}

.business-company .section-heading span {
  width: clamp(56px, 3.90625vw, 75px);
  margin: clamp(35px, 2.395833vw, 46px) 0 0;
}

.company-profile {
  display: grid;
  margin: clamp(45px, 3.125vw, 60px) 0 0;
}

.company-profile__row {
  display: grid;
  grid-template-columns: clamp(260px, 22.708333vw, 436px) minmax(0, 1fr);
  gap: clamp(66px, 4.53125vw, 87px);
  margin: 0;
  padding: clamp(23px, 1.614583vw, 31px) 0 clamp(22px, 1.510417vw, 29px);
  border-bottom: 2px solid #d1d1d1;
}

.company-profile__row:first-child {
  padding-top: 0;
}

.company-profile dt,
.company-profile dd {
  margin: 0;
  font-size: clamp(21px, 1.458333vw, 28px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: clamp(1.68px, 0.116667vw, 2.24px);
}

.company-profile dt {
  color: var(--blue);
}

.company-profile dd {
  color: var(--ink);
}

@media (max-width: 1200px) {
  .business-company {
    padding: 128px 0;
  }

  .business-company__inner {
    width: min(100% - 80px, 860px);
  }

  .company-profile__row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 767px) {
  .business-company {
    padding: 104px 0;
  }

  .business-company__inner {
    width: min(100% - 48px, 560px);
  }

  .company-profile__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.business-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  height: clamp(325px, 22.569444vw, 433px);
  overflow: hidden;
  background: #d1d1d1;
}

.business-photo-strip__item {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.business-photo-strip__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-photo-strip__item:nth-child(1) img {
  object-position: center 48%;
}

.business-photo-strip__item:nth-child(2) img {
  object-position: center 52%;
}

.business-photo-strip__item:nth-child(3) img {
  object-position: center 44%;
}

@media (max-width: 1200px) {
  .business-photo-strip {
    grid-template-columns: 1fr;
    height: auto;
  }

  .business-photo-strip__item {
    height: 260px;
  }
}

@media (max-width: 767px) {
  .business-photo-strip__item {
    height: 220px;
  }
}

.section-heading p {
  margin: 0 0 24px;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 5.4px;
}

.section-heading span {
  display: block;
  width: 50px;
  height: 1px;
  margin: 34px auto 0;
  background: var(--ink);
}

.business {
  position: relative;
  padding: 50px 0 150px;
  overflow: hidden;
  background: #fdfdfd;
}

.business__visual {
  position: relative;
  min-height: clamp(650px, 50.486111vw, 727px);
  margin-top: clamp(66px, 5.833333vw, 112px);
}

.business__panel {
  position: absolute;
  top: clamp(34px, 2.361111vw, 46px);
  right: 0;
  left: clamp(200px, calc(17.083333vw + 36px), 282px);
  height: clamp(620px, 50.486111vw, 727px);
  overflow: hidden;
  background: var(--blue);
}

.business__panel span {
  position: absolute;
  right: -82px;
  bottom: -34px;
  color: rgb(255 255 255 / 10%);
  font-family: var(--font-en);
  font-size: clamp(142px, 13.541667vw, 195px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.95px;
  white-space: nowrap;
}

.business__photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: clamp(620px, 48.611111vw, 700px);
  height: clamp(532px, 41.666667vw, 600px);
  margin: 0;
  overflow: hidden;
  background: #ddd;
}

.js-image-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000a15;
  transform: translateX(-101%);
  pointer-events: none;
}

.js-image-reveal.is-revealed::after {
  animation: image-reveal-mask 1s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.js-image-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.js-image-reveal.is-revealed img {
  animation: image-reveal-content 0.66s cubic-bezier(0.19, 1, 0.22, 1) 0.46s both;
}

@keyframes image-reveal-mask {
  0% {
    transform: translateX(-101%);
  }

  46% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(103%);
  }
}

@keyframes image-reveal-content {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.js-text-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.78s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.78s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--text-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-text-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-image-reveal::after {
    animation: none;
    opacity: 0;
  }

  .js-image-reveal img,
  .js-image-reveal.is-revealed img,
  .js-text-reveal,
  .js-text-reveal.is-revealed {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.business__content {
  position: relative;
  z-index: 3;
  width: min(100% - 40px, 666px);
  margin-left: clamp(690px, calc(14.166667vw + 554px), 826px);
  padding-top: clamp(110px, 7.638889vw, 146px);
  color: #fff;
}

.business__content h3 {
  display: grid;
  gap: 0;
  margin: 0 0 43px;
  font-size: clamp(29px, 2.291667vw, 33px);
  font-weight: 500;
  line-height: 1.61;
  letter-spacing: 0;
}

.business__content h3 span {
  white-space: nowrap;
}

.business__content p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.34px;
}

.business__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  margin: 47px 0 0;
  padding: 0;
  list-style: none;
}

.business__services li {
  display: grid;
  place-items: center;
  min-height: 47px;
  border: 1.5px solid #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.business__button {
  position: absolute;
  right: 0;
  bottom: clamp(-128px, calc(-6.25vw - 8px), -98px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 33px;
  width: 269px;
  height: 70px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2.4px;
}

.about {
  position: relative;
  padding: 0 0 clamp(134px, 10.416667vw, 200px);
  overflow: hidden;
  background: #fdfdfd;
}

.about__map {
  position: absolute;
  top: clamp(0px, calc(12.5vw - 180px), 60px);
  left: clamp(494px, calc(15vw + 278px), 566px);
  z-index: 0;
  width: clamp(448px, 23.333333vw, 448px);
  height: 560px;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}

.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(590px, 1fr) minmax(520px, 676px);
  column-gap: clamp(52px, 5vw, 80px);
  align-items: start;
  width: min(100% - 120px, 1400px);
  margin: 0 auto;
}

.about__copy {
  padding-top: 20px;
}

.about__label {
  margin: 0 0 24px;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.about__copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 5.4px;
}

.about__line {
  display: block;
  width: 66px;
  height: 1px;
  margin: 34px 0 54px;
  background: var(--ink);
}

.about__copy h3 {
  margin: 0 0 45px;
  color: var(--blue);
  font-size: 36px;
  font-weight: 500;
  line-height: 55px;
  letter-spacing: 1.08px;
  white-space: nowrap;
}

.about__text {
  display: grid;
  gap: 28px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.34px;
}

.about__text p {
  margin: 0;
}

.about__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  width: 444px;
  height: 81px;
  margin-top: 58px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2.4px;
}

.about__photo {
  position: relative;
  width: min(100%, 676px);
  height: 520px;
  margin: 228px 0 0;
  overflow: hidden;
  background: #ddd;
}

.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

@media (min-width: 1441px) {
  .about__inner {
    grid-template-columns: minmax(590px, 644px) 676px;
  }
}

.works {
  position: relative;
  padding: 0 0 clamp(142px, 8.333333vw, 160px);
  overflow: hidden;
  background: #fdfdfd;
}

.works__heading .section-heading p,
.works__heading p {
  margin-bottom: 24px;
}

.works__lead {
  margin: 60px 0 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2.4px;
  text-align: center;
}

.works__list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 600px));
  gap: clamp(72px, 6.944444vw, 100px);
  justify-content: center;
  width: min(100% - 140px, 1300px);
  margin: 38px auto 0;
}

.works__slider {
  position: relative;
}

.works__arrow {
  display: none;
}

.works__item {
  min-width: 0;
}

.works__photo {
  position: relative;
  width: 100%;
  height: 340px;
  margin: 0;
  overflow: hidden;
  background: #ddd;
}

.works__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works__description {
  min-height: 56px;
  margin: 35px 0 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 2.04px;
}

.works__meta {
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  margin: 18px 0 0 22px;
}

.works__meta div {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 38px;
  align-items: center;
  min-height: 35px;
}

.works__meta dt,
.works__meta dd {
  margin: 0;
  font-size: 16px;
  line-height: 35px;
  letter-spacing: 2.04px;
}

.works__meta dt {
  display: grid;
  place-items: center;
  height: 35px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.works__meta dd {
  min-width: 0;
  padding-left: 0;
  border-bottom: 1px solid rgb(52 53 56 / 72%);
  color: var(--ink);
  font-weight: 500;
}

.works__silhouette {
  position: absolute;
  left: max(calc((100vw - 1440px) / 2), 0px);
  bottom: 0;
  z-index: 1;
  width: 616px;
  height: 350px;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

.works__button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 82px;
  width: 347px;
  height: 81px;
  margin: 121px max(calc((100vw - 1440px) / 2 + 72px), 72px) 0 auto;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2.4px;
}

.contact {
  position: relative;
  min-height: 0;
  padding: 50px 0;
  overflow: hidden;
  background: var(--section-gray);
}

.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(410px, 520px) minmax(560px, 880px);
  column-gap: clamp(78px, 7.8125vw, 150px);
  align-items: start;
  width: min(100% - 140px, 1440px);
  margin: 0 auto;
}

.contact__label {
  margin: 0 0 24px;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.contact__copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 5.4px;
}

.contact__line {
  display: block;
  width: 66px;
  height: 1px;
  margin: 34px 0 55px;
  background: var(--ink);
}

.contact__lead {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.7px;
  white-space: nowrap;
}

.contact__lead br {
  display: none;
}

.contact__panel {
  --contact-button-width: 360px;

  display: grid;
  justify-items: center;
  min-height: 254px;
  margin-top: 14px;
  padding: 45px 52px 38px;
  background: #fff;
  text-align: center;
}

.contact__panel-title {
  margin: 0 0 24px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 2.04px;
}

.contact__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(100%, var(--contact-button-width));
  height: 58px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 2.04px;
}

.contact__button-icon {
  position: relative;
  order: -1;
  flex: 0 0 auto;
  width: 22px;
  height: 16px;
  border: 2px solid currentColor;
}

.contact__button-icon::before,
.contact__button-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 12px;
  height: 2px;
  background: currentColor;
}

.contact__button-icon::before {
  left: 0;
  transform: rotate(32deg);
  transform-origin: left center;
}

.contact__button-icon::after {
  right: 0;
  transform: rotate(-32deg);
  transform-origin: right center;
}

.contact__note {
  margin: 21px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 1.5px;
}

.contact__bg-text {
  position: absolute;
  left: max(calc((100vw - 1440px) / 2 - 28px), -10px);
  bottom: -26px;
  z-index: 0;
  color: rgb(52 53 56 / 3.5%);
  font-family: var(--font-en);
  font-size: clamp(130px, calc(12.5vw - 20px), 220px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.hero__nav a.hero__contact,
.lower-nav__contact,
.form-submit,
.form-back,
.works-page__button,
.business__button,
.about__button,
.works__button,
.contact__button {
  font-weight: 500;
  min-width: max-content;
  white-space: nowrap;
}

.hero__nav a.hero__contact span,
.lower-nav__contact span,
.form-submit span,
.form-back span,
.works-page__button span,
.business__button span,
.about__button span,
.works__button span,
.contact__button span {
  white-space: nowrap;
}

.hero__nav a.hero__contact,
.lower-nav__contact {
  width: auto;
  min-width: 140px;
  padding-inline: var(--button-inline-padding);
}

.hero__nav a.hero__contact {
  padding-inline: calc(var(--button-inline-padding) - 35px);
}

.lower-nav__contact {
  padding-inline: calc(var(--button-inline-padding) - 32px);
}

.form-submit,
.form-back,
.contact__button {
  padding-inline: var(--button-inline-padding);
}

.works-page__button,
.business__button,
.about__button,
.works__button {
  justify-content: space-between;
  gap: 0;
  padding-inline: var(--button-inline-padding);
}

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(38 102 186 / 86%), rgb(38 102 186 / 90%)),
    url("./assets/footer-construction.jpg") center 54% / cover no-repeat;
  opacity: 0.9;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  column-gap: clamp(92px, 10.416667vw, 150px);
  width: min(100% - 160px, 1440px);
  margin: 0 auto;
  padding: clamp(76px, 4.6875vw, 90px) 0 clamp(62px, 3.958333vw, 76px);
}

.site-footer__brand {
  display: block;
  margin-bottom: 40px;
  font-size: 29px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 3.48px;
}

.site-footer__office {
  margin: 0 0 17px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2.4px;
}

.site-footer address {
  margin: 0;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 2.04px;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: clamp(38px, 3.333333vw, 64px);
  justify-content: space-between;
  align-self: start;
  padding-top: 24px;
}

.site-footer__nav a {
  display: grid;
  gap: 13px;
  min-width: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2.88px;
  white-space: nowrap;
}

.site-footer__nav .site-footer__privacy {
  display: none;
}

.site-footer__nav span {
  color: rgb(255 255 255 / 72%);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  width: min(100% - 160px, 1440px);
  margin: 0 auto;
  padding: 28px 0 35px;
  border-top: 1px solid rgb(255 255 255 / 22%);
  text-align: center;
}

.site-footer__bottom a {
  position: absolute;
  top: -47px;
  right: 0;
  color: rgb(255 255 255 / 68%);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.5px;
}

.site-footer__bottom p {
  margin: 0;
  color: rgb(255 255 255 / 82%);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.3px;
}

@media (max-width: 1200px) {
  .section-heading h2,
  .about__copy h2,
  .contact__copy h2 {
    font-size: 40px;
  }

  .page-hero--business {
    height: 330px;
  }

  .page-hero--works {
    height: 330px;
  }

  .page-hero--contact {
    height: 360px;
  }

  .page-hero--privacy {
    height: 360px;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  .business {
    padding: 132px 0 150px;
  }

  .business__visual {
    display: grid;
    min-height: 0;
    margin-top: 72px;
  }

  .business__panel {
    position: absolute;
    top: 360px;
    right: 0;
    left: clamp(44px, 6vw, 72px);
    height: calc(100% - 280px);
  }

  .business__photo {
    position: relative;
    top: auto;
    left: auto;
    width: min(100% - 72px, 760px);
    height: 520px;
    margin: 0 auto;
  }

  .business__content {
    width: min(100% - 96px, 760px);
    margin: 0 auto;
    padding: 72px 0 110px;
  }

  .business__content h3 span {
    white-space: normal;
  }

  .business__button {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 56px 0 0 auto;
  }

  .about {
    padding: 64px 0 150px;
  }

  .about__inner {
    grid-template-columns: 1fr;
    row-gap: 72px;
    width: min(100% - 96px, 860px);
  }

  .about__copy {
    padding-top: 0;
  }

  .about__copy h3 {
    white-space: normal;
  }

  .about__photo {
    width: 100%;
    height: 520px;
    margin: 0;
  }

  .works {
    padding-bottom: 150px;
  }

  .works__list {
    grid-template-columns: 1fr;
    gap: 76px;
    width: min(100% - 96px, 760px);
  }

  .works__photo {
    height: 420px;
  }

  .works__button {
    margin: 96px clamp(48px, 8vw, 96px) 0 auto;
  }

  .works__silhouette {
    width: 520px;
    height: 296px;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    row-gap: 56px;
    width: min(100% - 96px, 860px);
  }

  .contact__panel {
    width: min(100%, 720px);
    justify-self: start;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    row-gap: 56px;
    width: min(100% - 96px, 860px);
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    gap: 34px 84px;
  }

  .site-footer__bottom {
    width: min(100% - 96px, 860px);
  }

  .works-page {
    padding: 96px 0 132px;
  }

  .works-page__grid {
    grid-template-columns: 1fr;
    gap: 76px;
    width: min(100% - 96px, 760px);
  }

  .work-card__media {
    height: 420px;
  }

  .work-card__text {
    min-height: 0;
  }

  .works-page__button {
    margin-top: 88px;
  }

  .faq-page {
    padding: 104px 0 124px;
  }

  .faq-page__list,
  .faq-page__lead,
  .contact-form-section__lead,
  .form-errors {
    width: min(100% - 80px, 860px);
  }

  .contact-form,
  .confirm-table {
    width: min(100% - 80px, 860px);
  }

  .confirm-table__row {
    grid-template-columns: 168px 58px minmax(0, 1fr);
    gap: 28px;
  }

  .privacy-policy__inner {
    width: min(100% - 80px, 860px);
  }

  .privacy-policy__body {
    padding: 56px 48px;
  }

  .form-row {
    grid-template-columns: 168px 58px minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 840px;
  }

  .hero__header {
    padding: 28px 28px 0;
  }

  .hero__brand {
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 2.3px;
  }

  .hero__nav,
  .lower-nav {
    display: none;
  }

  .hero__photo {
    top: 132px;
    left: 28px;
    width: calc(100% - 56px);
    height: 560px;
  }

  .hero__photo img.hero__slide--main {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-position: center center;
  }

  .hero__title {
    top: 498px;
    left: 78px;
    width: min(560px, calc(100% - 124px));
  }

  .hero__title h1 {
    font-size: 48px;
    line-height: 76px;
  }

  .hero__title p {
    top: 95px;
    left: 184px;
  }

  .hero__blue-block {
    top: 600px;
    right: 28px;
    width: 300px;
    height: 215px;
  }

  .hero__scroll {
    display: none;
  }

  .section-heading p {
    margin-bottom: 18px;
    font-size: 18px;
  }

  .about__label,
  .contact__label {
    margin-bottom: 18px;
  }

  .section-heading h2,
  .about__copy h2,
  .contact__copy h2 {
    font-size: 34px;
    letter-spacing: 3.4px;
  }

  .section-heading span {
    margin-top: 28px;
  }

  .about__line,
  .contact__line {
    margin-top: 28px;
  }

  .page-hero--business {
    height: 290px;
  }

  .page-hero--works {
    height: 290px;
  }

  .page-hero--contact {
    height: 300px;
  }

  .page-hero--privacy {
    height: 300px;
  }

  .page-hero__label {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .page-hero h1 {
    font-size: 30px;
    letter-spacing: 3px;
  }

  .page-hero__line {
    margin-top: 14px;
  }

  .business,
  .about,
  .works {
    padding-bottom: 116px;
  }

  .business {
    padding-top: 108px;
  }

  .business__visual {
    margin-top: 56px;
  }

  .business__panel {
    top: 300px;
    left: 28px;
    height: calc(100% - 240px);
  }

  .business__panel span {
    right: -46px;
    bottom: -16px;
    font-size: 118px;
  }

  .business__photo,
  .business__content,
  .about__inner,
  .works__list,
  .contact__inner,
  .site-footer__inner,
  .site-footer__bottom {
    width: min(100% - 48px, 680px);
  }

  .business__photo {
    height: 420px;
    margin: 0 auto;
  }

  .business__content {
    padding: 56px 0 92px;
  }

  .business__content h3 {
    font-size: 24px;
  }

  .business__services {
    grid-template-columns: 1fr;
  }

  .about__copy h3 {
    font-size: 28px;
    line-height: 1.6;
  }

  .about__photo,
  .works__photo {
    height: 360px;
  }

  .works__lead {
    width: min(100% - 48px, 680px);
    margin-inline: auto;
    line-height: 34px;
  }

  .works__button {
    width: min(100% - 48px, 360px);
    margin: 78px 24px 0 auto;
  }

  .works__silhouette {
    width: 430px;
    height: 244px;
  }

  .contact {
    padding: 50px 0;
  }

  .contact__panel {
    padding-inline: 28px;
  }

  .works-page {
    padding: 78px 0 112px;
  }

  .works-page__intro {
    width: min(100% - 48px, 680px);
  }

  .works-page__intro h2 {
    font-size: 25px;
    letter-spacing: 2px;
  }

  .works-page__grid {
    width: min(100% - 48px, 680px);
  }

  .work-card__media {
    height: 330px;
  }

  .work-card__meta {
    margin-left: 0;
  }

  .faq-page {
    padding: 82px 0 104px;
  }

  .faq-page__list,
  .faq-page__lead,
  .contact-form-section__lead,
  .contact-form,
  .form-errors,
  .confirm-table,
  .thanks-section__body {
    width: min(100% - 48px, 680px);
  }

  .faq-page__lead,
  .contact-form-section__lead {
    text-align: left;
  }

  .privacy-policy {
    padding: 82px 0 112px;
  }

  .privacy-policy__inner {
    width: min(100% - 48px, 680px);
  }

  .privacy-policy__body {
    margin-top: 52px;
    padding: 40px 28px;
  }

  .faq-item {
    padding: 15px 24px;
  }

  .contact-form-section__inner {
    padding: 88px 0 112px;
  }

  .form-row {
    grid-template-columns: 1fr auto;
    gap: 12px 18px;
  }

  .form-row__label {
    grid-column: 1;
  }

  .form-row__badge {
    grid-column: 2;
    justify-self: end;
  }

  .form-row input,
  .form-row textarea {
    grid-column: 1 / -1;
  }

  .form-submit {
    width: min(100%, 360px);
  }

  .contact-form-section--confirm .contact-form-section__inner,
  .thanks-section {
    padding: 88px 0 112px;
  }

  .confirm-table__row {
    grid-template-columns: 1fr auto;
    gap: 12px 18px;
  }

  .confirm-table dt {
    grid-column: 1;
  }

  .confirm-table__badge {
    grid-column: 2;
    justify-self: end;
  }

  .confirm-table dd {
    grid-column: 1 / -1;
    padding-top: 18px;
  }

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    width: min(100% - 48px, 360px);
  }

  .form-actions form,
  .form-back,
  .form-actions .form-submit {
    width: 100%;
  }

  .site-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 30px 44px;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 760px;
  }

  .hero__bg-copy {
    font-size: 56px;
    letter-spacing: 4px;
  }

  .hero__bg-track span {
    padding-right: 44px;
  }

  .hero__bg-copy--top {
    top: 118px;
  }

  .hero__bg-copy--bottom {
    top: 640px;
  }

  .hero__header {
    padding: 22px 20px 0;
  }

  .hero__brand {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 1.8px;
  }

  .hero__nav {
    display: none;
  }

  .hero__photo {
    top: 118px;
    left: 20px;
    width: calc(100% - 40px);
    height: 520px;
  }

  .hero__photo img.hero__slide--main {
    top: 0;
    left: 50%;
    width: 925px;
    height: 520px;
    transform: translateX(-52%);
  }

  .hero__title {
    top: 448px;
    left: 36px;
    width: calc(100% - 72px);
  }

  .hero__title h1 {
    font-size: clamp(34px, 10vw, 45px);
    line-height: 1.55;
    letter-spacing: 2.4px;
  }

  .hero__title h1 .hero__copy-line::after {
    height: 2px;
    bottom: 5px;
  }

  .hero__title h1 .hero__copy-line {
    padding-bottom: 5.5px;
  }

  .hero__title p {
    top: 95px;
    left: min(54vw, 210px);
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.5px;
  }

  .hero__blue-block {
    top: 572px;
    right: 0;
    width: 42vw;
    height: 150px;
  }

  .hero__scroll {
    display: none;
  }

  .lower-nav {
    display: none;
  }

  .business {
    padding: 96px 0 120px;
  }

  .section-heading p {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .section-heading h2 {
    font-size: 32px;
    letter-spacing: 3px;
  }

  .page-hero h1 {
    font-size: 28px;
    letter-spacing: 3px;
  }

  .page-hero--business {
    height: 260px;
  }

  .page-hero--works {
    height: 260px;
  }

  .page-hero--contact {
    height: 260px;
  }

  .page-hero--privacy {
    height: 260px;
  }

  .section-heading span {
    margin-top: 24px;
  }

  .about__label,
  .contact__label {
    margin-bottom: 14px;
  }

  .about__line,
  .contact__line {
    margin-top: 24px;
  }

  .page-hero__line {
    margin-top: 12px;
  }

  .business__visual {
    display: grid;
    min-height: 0;
    margin-top: 48px;
  }

  .business__panel {
    position: absolute;
    top: 220px;
    left: 20px;
    right: 0;
    height: calc(100% - 170px);
  }

  .business__panel span {
    right: -40px;
    bottom: -8px;
    font-size: 82px;
  }

  .business__photo {
    position: relative;
    top: auto;
    left: 0;
    width: calc(100% - 40px);
    height: 360px;
  }

  .business__content {
    width: calc(100% - 40px);
    margin: 0 20px;
    padding: 52px 0 90px;
  }

  .business__content h3 {
    margin-bottom: 28px;
    font-size: 21px;
    line-height: 1.65;
  }

  .business__content h3 span {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .business__content p {
    font-size: 14px;
    line-height: 26px;
  }

  .business__services {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 32px;
  }

  .business__services li {
    min-height: 42px;
    font-size: 14px;
  }

  .business__button {
    right: 0;
    bottom: 0;
    width: 230px;
    height: 58px;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .subpage .lower-nav--page {
    display: flex;
    height: 76px;
    padding: 0 24px;
  }

  .subpage .lower-nav__brand {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 2px;
  }

  .subpage .lower-nav__links {
    gap: 24px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.4px;
  }

  .subpage .lower-nav__contact {
    width: 116px;
    height: 44px;
    font-size: 14px;
  }

  .subpage__main {
    padding-top: 76px;
  }
}

@media (max-width: 767px) {
  .subpage .lower-nav--page {
    display: flex;
    height: 70px;
  }

  .subpage .lower-nav__links a:not(.lower-nav__contact) {
    display: none;
  }

  .subpage__main {
    padding-top: 70px;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 48px;
  }

  .hero {
    min-height: calc(186.1538vw + 15px);
  }

  .hero__bg-copy {
    color: rgb(38 102 186 / 5%);
    font-size: 80px;
    font-weight: 700;
    letter-spacing: 4px;
  }

  .hero__bg-copy--top {
    top: calc(26.6667vw - 40px);
  }

  .hero__bg-copy--bottom {
    top: 149.7436vw;
  }

  .hero__header {
    align-items: center;
    min-height: calc(20vw + 15px);
    padding: 12px 5.1282vw 0;
    transform: translateY(-20px);
  }

  .hero__header::after,
  .lower-nav::after {
    content: "";
    width: 8.9744vw;
    height: 3.7179vw;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 8.9744vw 0.641vw no-repeat,
      linear-gradient(currentColor, currentColor) 0 1.5385vw / 8.9744vw 0.641vw
        no-repeat,
      linear-gradient(currentColor, currentColor) 0 3.0769vw / 8.9744vw 0.641vw
        no-repeat;
  }

  .hero__brand {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2821vw;
  }

  .hero__photo {
    top: calc(27.1795vw + 15px);
    left: 4.359vw;
    width: calc(100% - 8.718vw);
    height: 121.7949vw;
  }

  .hero__photo img,
  .hero__photo img.hero__slide--main {
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center;
  }

  .hero__shade {
    background: rgb(0 0 0 / 10%);
  }

  .hero__title {
    top: 45.8974vw;
    left: 9.7436vw;
    width: 76.9231vw;
  }

  .hero__title h1 {
    font-size: 8.7179vw;
    line-height: 1.36;
    letter-spacing: 0.3846vw;
  }

  .hero__title h1 .hero__copy-line::after {
    left: 0.2564vw;
    bottom: 5px;
    width: calc(100% - 0.2564vw);
    height: 0.3846vw;
  }

  .hero__title h1 .hero__copy-line {
    padding-bottom: calc(0.3846vw + 1.5px);
  }

  .hero__title p {
    top: calc(13.2vw + 3px);
    left: 31vw;
    font-size: 2.6vw;
    line-height: 3.65vw;
    letter-spacing: 0.359vw;
  }

  .hero__blue-block {
    top: calc(90.5128vw + 15px);
    right: 2.0513vw;
    width: 51.5385vw;
    height: 63.0769vw;
  }

  .hero__scroll {
    display: block;
    top: calc(162.8205vw + 15px);
    right: 4.359vw;
    width: 6.8vw;
    height: 23.0769vw;
    overflow: hidden;
  }

  .hero__scroll::before,
  .hero__scroll::after {
    right: 4.4vw;
    height: 23.0769vw;
  }

  .hero__scroll::after {
    height: 6.6667vw;
    transform: translateY(-7.6923vw);
    animation-name: scroll-line-sp;
  }

  .hero__scroll span {
    top: 0;
    right: 0;
    font-size: clamp(12px, 2.0513vw, 14px);
    letter-spacing: 0.2051vw;
  }

  @keyframes scroll-line-sp {
    0% {
      opacity: 0;
      transform: translateY(-7.6923vw);
    }

    14% {
      opacity: 1;
    }

    78% {
      opacity: 1;
      transform: translateY(24.359vw);
    }

    100% {
      opacity: 0;
      transform: translateY(24.359vw);
    }
  }

  .lower-nav {
    display: flex;
    height: 47px;
    padding: 0 9px;
  }

  .lower-nav__brand {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.6px;
  }

  .lower-nav__links {
    display: none;
  }

  .section-heading p,
  .about__label,
  .contact__label {
    margin-bottom: 11px;
    font-size: 12px;
    line-height: 1;
  }

  .section-heading h2,
  .about__copy h2,
  .contact__copy h2 {
    font-size: 26px;
    line-height: 1;
    letter-spacing: 1.8px;
  }

  .section-heading span,
  .about__line,
  .contact__line {
    width: 34px;
    margin-top: 13px;
  }

  .mobile-break {
    display: block;
  }

  .business {
    padding: 25px 0;
  }

  .business__visual {
    margin-top: 35px;
  }

  .business__panel {
    top: 30px;
    left: 16px;
    right: 0;
    height: calc(100% + 4px);
  }

  .business__panel span {
    right: -19px;
    bottom: -6px;
    font-size: 72px;
    letter-spacing: 0.7px;
  }

  .business__photo {
    left: 0;
    width: calc(100% - 34px);
    height: 260px;
    margin: 0;
  }

  .business__content {
    width: calc(100% - 50px);
    margin: 0 17px 0 25px;
    padding: 42px 0 36px;
  }

  .business__content h3 {
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.72;
    letter-spacing: 0.45px;
  }

  .business__content p {
    font-size: 13px;
    line-height: 26px;
    letter-spacing: 0.1px;
  }

  .business__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 6px;
    margin-top: 25px;
  }

  .business__services li {
    min-height: 30px;
    font-size: 12px;
    line-height: 1.45;
  }

  .business__button {
    width: 189px;
    height: 44px;
    margin: 37px 0 0 auto;
    gap: 18px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1.2px;
  }

  .about {
    padding: 50px 0 25px;
  }

  .about__map {
    top: 0;
    left: 227px;
    width: 188px;
    height: auto;
    opacity: 0.12;
  }

  .about__inner {
    row-gap: 72px;
    width: calc(100% - 42px);
  }

  .about__copy h3 {
    width: 280px;
    margin: 0 0 26px;
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.7px;
  }

  .about__line {
    margin-bottom: 27px;
  }

  .about__text {
    gap: 22px;
    font-size: 13px;
    line-height: 27px;
    letter-spacing: 0.1px;
  }

  .about__button {
    width: 286px;
    height: 43px;
    margin-top: 31px;
    gap: 16px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.6px;
  }

  .about__photo {
    width: 100%;
    height: 230px;
    margin: 0;
  }

  .about__photo img {
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center 46%;
  }

  .works {
    padding: 25px 0 165px;
  }

  .works__heading p {
    margin-bottom: 11px;
  }

  .works__lead {
    width: calc(100% - 60px);
    margin: 29px auto 0;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 1px;
  }

  .works__slider {
    margin-top: 34px;
  }

  .works__list {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 22px;
    width: 100%;
    margin-top: 0;
    padding: 0 24px 8px 40px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 40px;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .works__arrow {
    position: absolute;
    top: 86px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(38 102 186 / 42%);
    color: #fff;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    appearance: none;
  }

  .works__arrow--prev {
    left: 19px;
  }

  .works__arrow--next {
    right: 19px;
  }

  .works__list::-webkit-scrollbar {
    display: none;
  }

  .works__item {
    flex: 0 0 300px;
    scroll-snap-align: start;
  }

  .works__photo {
    height: 190px;
  }

  .works__description {
    min-height: 44px;
    margin-top: 18px;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.4px;
  }

  .works__meta {
    gap: 6px;
    width: 100%;
    margin: 15px 0 0;
  }

  .works__meta div {
    grid-template-columns: 82px 1fr;
    column-gap: 18px;
    min-height: 25px;
  }

  .works__meta dt,
  .works__meta dd {
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 0.4px;
  }

  .works__meta dt {
    height: 25px;
  }

  .works__silhouette {
    left: 0;
    bottom: 0;
    width: 250px;
    height: 142px;
  }

  .works__button {
    width: 200px;
    height: 43px;
    margin: 58px auto 0;
    gap: 36px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1.2px;
  }

  .works .js-image-reveal::after {
    opacity: 0;
    animation: none;
  }

  .works .js-image-reveal img,
  .works .js-image-reveal.is-revealed img,
  .works .js-text-reveal,
  .works .js-text-reveal.is-revealed {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .contact {
    min-height: 0;
    padding: 50px 0;
  }

  .contact__inner {
    row-gap: 28px;
    width: calc(100% - 40px);
  }

  .contact__line {
    margin-bottom: 25px;
  }

  .contact__lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.6px;
    white-space: normal;
  }

  .contact__lead br {
    display: initial;
  }

  .contact__panel {
    --contact-button-width: 258px;

    justify-self: stretch;
    min-height: 0;
    margin-top: 0;
    padding: 25px 17px 23px;
  }

  .contact__panel-title {
    margin-bottom: 17px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.6px;
  }

  .contact__button {
    width: min(100%, var(--contact-button-width));
    height: 42px;
    gap: 11px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.8px;
  }

  .contact__button-icon {
    width: 16px;
    height: 12px;
    border-width: 1.5px;
  }

  .contact__button-icon::before,
  .contact__button-icon::after {
    top: 2px;
    width: 9px;
    height: 1.5px;
  }

  .contact__note {
    margin-top: 16px;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.35px;
  }

  .contact__bg-text {
    left: 34px;
    bottom: -8px;
    font-size: 72px;
  }

  .site-footer__inner {
    row-gap: 26px;
    width: calc(100% - 40px);
    padding: 30px 0 24px;
  }

  .site-footer__brand {
    margin-bottom: 20px;
    font-size: 23px;
    line-height: 1.4;
    letter-spacing: 1.1px;
  }

  .site-footer__office {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.8px;
  }

  .site-footer address {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.7px;
  }

  .site-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 17px 50px;
    padding-top: 0;
  }

  .site-footer__nav a {
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.9px;
  }

  .site-footer__nav .site-footer__privacy {
    display: block;
    grid-column: 1 / 2;
    margin: 20px 0;
    color: rgb(255 255 255 / 62%);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  .site-footer__nav span {
    font-size: 12px;
    font-weight: 400;
  }

  .site-footer__bottom {
    width: calc(100% - 40px);
    padding: 14px 0 16px;
    text-align: center;
  }

  .site-footer__bottom a {
    display: none;
    position: static;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  .site-footer__bottom p {
    font-family: var(--font-ja);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  body.subpage--business .lower-nav--page {
    height: 55px;
    padding: 0 22px 0 19px;
    background: var(--blue);
    color: #fff;
  }

  body.subpage--business .lower-nav__brand {
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.85px;
  }

  body.subpage--business .lower-nav::after {
    width: 35px;
    height: 16px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 7px / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 14px / 35px 2px no-repeat;
  }

  body.subpage--business .subpage__main {
    padding-top: 55px;
  }

  body.subpage--business .page-hero--business {
    height: 147px;
  }

  body.subpage--business .page-hero__title {
    top: 48px;
    width: 100%;
    transform: translateX(-50%);
  }

  body.subpage--business .page-hero__label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1;
  }

  body.subpage--business .page-hero h1 {
    font-size: 26px;
    line-height: 1.42;
    letter-spacing: 3.12px;
  }

  body.subpage--business .business-intro {
    min-height: 410px;
    padding: 47px 0 38px;
    background:
      linear-gradient(180deg, rgb(253 253 253 / 18%) 0%, #fdfdfd 100%),
      url("./assets/business-intro-bg.jpg") center top / auto 250px no-repeat,
      #fdfdfd;
  }

  body.subpage--business .business-intro__inner {
    width: calc(100% - 32px);
  }

  body.subpage--business .business-intro h2 {
    margin: 0 0 29px;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 1.8px;
  }

  body.subpage--business .business-intro p {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
  }

  body.subpage--business .business-intro p + p {
    margin-top: 22px;
  }

  body.subpage--business .business-service {
    padding: 22px 0 41px;
  }

  body.subpage--business .business-service .section-heading p,
  body.subpage--business .business-reason .section-heading p,
  body.subpage--business .business-greeting .section-heading p {
    margin-bottom: 9px;
    font-size: 12px;
    line-height: 1;
  }

  body.subpage--business .business-service .section-heading h2,
  body.subpage--business .business-reason .section-heading h2,
  body.subpage--business .business-greeting .section-heading h2 {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 1.3px;
  }

  body.subpage--business .business-service .section-heading span,
  body.subpage--business .business-reason .section-heading span,
  body.subpage--business .business-greeting .section-heading span {
    width: 20px;
    margin-top: 12px;
  }

  body.subpage--business .business-service__grid {
    display: grid;
    row-gap: 25px;
    width: calc(100% - 32px);
    margin: 24px auto 0;
  }

  body.subpage--business .service-card {
    min-height: 390px;
    padding: 15px 11px 18px;
    border-width: 3px;
  }

  body.subpage--business .service-card:nth-child(5) {
    min-height: 355px;
  }

  body.subpage--business .service-card:nth-child(6) {
    min-height: 378px;
  }

  body.subpage--business .service-card__media {
    height: 200px;
    aspect-ratio: auto;
  }

  body.subpage--business .service-card__body {
    padding: 0 8px;
  }

  body.subpage--business .service-card__title {
    margin-top: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 55px;
    letter-spacing: 0.6px;
  }

  body.subpage--business .service-card__type {
    min-height: 0;
    margin: -10px -8px 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.28px;
  }

  body.subpage--business .service-card__text {
    margin-top: 9px;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.26px;
  }

  body.subpage--business .business-reason {
    padding: 22px 0 51px;
  }

  body.subpage--business #service-title,
  body.subpage--business #reason-title,
  body.subpage--business #greeting-title,
  body.subpage--business #concept-title,
  body.subpage--business #company-title {
    scroll-margin-top: 70px;
  }

  body.subpage--business .business-reason__list {
    gap: 27px;
    margin-top: 24px;
  }

  body.subpage--business .reason-item,
  body.subpage--business .reason-item--reverse {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    min-height: 0;
  }

  body.subpage--business .reason-item__bg,
  body.subpage--business .reason-item--reverse .reason-item__bg {
    top: 35px;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
  }

  body.subpage--business .reason-item__media {
    order: -1;
    width: 260px;
    height: 167px;
    margin: 0 auto;
    aspect-ratio: auto;
  }

  body.subpage--business .reason-item__copy,
  body.subpage--business .reason-item--reverse .reason-item__copy {
    position: relative;
    padding: 17px 24px 27px;
  }

  body.subpage--business .reason-item__number,
  body.subpage--business .reason-item--reverse .reason-item__number {
    top: 13px;
    right: auto;
    left: 24px;
    z-index: 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 40px;
  }

  body.subpage--business .reason-item h3,
  body.subpage--business .reason-item--reverse h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    text-align: center;
    letter-spacing: 1.1px;
  }

  body.subpage--business .reason-item__text {
    position: relative;
    z-index: 1;
    margin-top: 12px;
  }

  body.subpage--business .reason-item__text p {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0;
  }

  body.subpage--business .business-greeting {
    padding: 0 0 64px;
  }

  body.subpage--business .business-greeting__catch {
    width: calc(100% - 32px);
    margin-top: 15px;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 0.72px;
  }

  body.subpage--business .business-greeting__body {
    width: calc(100% - 32px);
    gap: 22px;
    margin-top: 15px;
    text-align: left;
  }

  body.subpage--business .business-greeting__body p {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0;
  }

  body.subpage--business .business-greeting__signature {
    width: calc(100% - 32px);
    gap: 8px;
    margin: 31px auto 0;
    font-size: 14px;
    line-height: 1.7;
    align-items: flex-end;
    text-align: right;
  }

  body.subpage--business .business-greeting__signature span {
    font-size: 14px;
    letter-spacing: 1.12px;
  }

  body.subpage--business .business-greeting__signature .business-greeting__name {
    font-size: 24px;
    letter-spacing: 2.4px;
  }

  body.subpage--business .business-greeting__marquee {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 42px;
    font-size: 48px;
    line-height: 1.15;
  }

  body.subpage--business .business-concept {
    margin-top: 0;
    padding: 2px 0 0;
  }

  body.subpage--business .business-concept__inner {
    display: block;
    width: calc(100% - 32px);
  }

  body.subpage--business .business-concept .section-heading p,
  body.subpage--business .business-company .section-heading p {
    margin-bottom: 9px;
    font-size: 12px;
    line-height: 1;
  }

  body.subpage--business .business-concept .section-heading h2,
  body.subpage--business .business-company .section-heading h2 {
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: 3.12px;
  }

  body.subpage--business .business-concept .section-heading span,
  body.subpage--business .business-company .section-heading span {
    width: 20px;
    margin-top: 12px;
  }

  body.subpage--business .business-concept__catch {
    margin-top: 17px;
    font-size: 26px;
    line-height: 35px;
    letter-spacing: 0;
  }

  body.subpage--business .business-concept__text {
    gap: 22px;
    margin-top: 36px;
  }

  body.subpage--business .business-concept__text p {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0;
  }

  body.subpage--business .business-concept__media {
    width: 326px;
    max-width: calc(100% - 16px);
    margin: 36px 0 0 auto;
    aspect-ratio: 326 / 223;
    order: initial;
  }

  body.subpage--business .business-concept__media::before {
    top: -12px;
    right: 17px;
    bottom: 12px;
    left: -17px;
  }

  body.subpage--business .business-concept__image img {
    object-position: center 30%;
  }

  body.subpage--business .business-company {
    margin-top: 36px;
    padding: 66px 0 30px;
    background: #fdfdfd !important;
  }

  body.subpage--business .business-company::before {
    height: 410px;
    background-image: url("./assets/business-company-bg-sp.jpg");
    background-position: center top;
    background-size: 100% auto;
    mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgb(0 0 0 / 58%) 52%, transparent 82%);
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 30%,
      rgb(0 0 0 / 58%) 52%,
      transparent 82%
    );
  }

  body.subpage--business .business-company__stripe {
    height: 20px;
  }

  body.subpage--business .business-company__stripe span {
    width: 140px;
  }

  body.subpage--business .business-company__inner {
    width: calc(100% - 32px);
  }

  body.subpage--business .company-profile {
    margin-top: 17px;
  }

  body.subpage--business .company-profile__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 13px 0 12px;
    border-bottom-width: 1px;
  }

  body.subpage--business .company-profile__row:first-child {
    padding-top: 0;
  }

  body.subpage--business .company-profile dt,
  body.subpage--business .company-profile dd {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 1.12px;
  }

  body.subpage--business .business-photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 120px;
  }

  body.subpage--business .business-photo-strip__item {
    height: 120px;
  }

  body.subpage--business .business-photo-strip__item:nth-child(1) {
    display: none;
  }

  body.subpage--business .business-photo-strip__item:nth-child(2) {
    order: 1;
  }

  body.subpage--business .business-photo-strip__item:nth-child(3) {
    display: block;
    order: 2;
  }
}

@media (max-width: 767px) {
  body.subpage--works .lower-nav--page {
    height: 55px;
    padding: 0 22px 0 19px;
    background: var(--blue);
    color: #fff;
  }

  body.subpage--works .lower-nav__brand {
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.85px;
  }

  body.subpage--works .lower-nav::after {
    width: 35px;
    height: 16px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 7px / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 14px / 35px 2px no-repeat;
  }

  body.subpage--works .subpage__main {
    padding-top: 55px;
  }

  body.subpage--works .page-hero--works {
    height: 147px;
  }

  body.subpage--works .page-hero__title {
    top: 48px;
    width: 100%;
    transform: translateX(-50%);
  }

  body.subpage--works .page-hero__label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1;
  }

  body.subpage--works .page-hero h1 {
    font-size: 26px;
    line-height: 1.42;
    letter-spacing: 3.12px;
  }

  body.subpage--works .page-hero--works .page-hero__overlay {
    background: rgb(1 62 141 / 20%);
  }

  body.subpage--works .works-page {
    padding: 43px 0 198px;
    background:
      linear-gradient(180deg, rgb(253 253 253 / 18%) 0%, #fdfdfd 100%),
      url("./assets/works-page-bg.jpg") center top / auto 410px no-repeat,
      #fdfdfd;
  }

  body.subpage--works .works-page__intro {
    width: calc(100% - 32px);
    text-align: center;
  }

  body.subpage--works .works-page__intro h2 {
    margin: 0 0 31px;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 1.8px;
  }

  body.subpage--works .works-page__intro p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 1.56px;
    text-align: left;
  }

  body.subpage--works .works-page__intro p + p {
    margin-top: 0;
  }

  body.subpage--works .works-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
    width: calc(100% - 32px);
    margin: 50px auto 0;
  }

  body.subpage--works .work-card {
    width: 100%;
  }

  body.subpage--works .work-card__media {
    height: 220px;
  }

  body.subpage--works .work-card__media img {
    width: 111.5%;
    max-width: none;
    height: 133%;
    object-fit: cover;
  }

  body.subpage--works .work-card:nth-child(1) .work-card__media img {
    object-position: center 14%;
  }

  body.subpage--works .work-card:nth-child(4) .work-card__media img {
    object-position: center 23%;
  }

  body.subpage--works .work-card__text {
    min-height: 0;
    margin: 11px 0 0;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0;
  }

  body.subpage--works .work-card__meta {
    gap: 14px;
    width: 100%;
    margin: 18px 0 0;
  }

  body.subpage--works .work-card__meta div {
    grid-template-columns: 91px minmax(0, 1fr);
    column-gap: 22px;
    min-height: 25px;
  }

  body.subpage--works .work-card__meta dt,
  body.subpage--works .work-card__meta dd {
    font-size: 13px;
    line-height: 25px;
    letter-spacing: 1.56px;
  }

  body.subpage--works .work-card__meta dt {
    height: 25px;
  }

  body.subpage--works .work-card__meta dd {
    height: 25px;
  }

  body.subpage--works .works-page__button {
    width: 260px;
    height: 48px;
    gap: 36px;
    margin: 65px auto 0;
    font-size: 14px;
    line-height: 48px;
    letter-spacing: 1.68px;
  }

  body.subpage--works .works-page__button span:last-child {
    font-size: 20px;
    letter-spacing: 2.4px;
  }

  body.subpage--works .works-page__silhouette {
    right: 0;
    bottom: -9px;
    width: 210px;
  }
}

@media (max-width: 767px) {
  body.subpage--contact .lower-nav--page {
    height: 55px;
    padding: 0 22px 0 19px;
    background: var(--blue);
    color: #fff;
  }

  body.subpage--contact .lower-nav__brand {
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.85px;
  }

  body.subpage--contact .lower-nav::after {
    width: 35px;
    height: 16px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 7px / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 14px / 35px 2px no-repeat;
  }

  body.subpage--contact .subpage__main {
    padding-top: 55px;
  }

  body.subpage--contact .page-hero--contact {
    height: 147px;
  }

  body.subpage--contact .page-hero__title {
    top: 48px;
    width: 100%;
    transform: translateX(-50%);
  }

  body.subpage--contact .page-hero__label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1;
  }

  body.subpage--contact .page-hero h1 {
    font-size: 26px;
    line-height: 1.42;
    letter-spacing: 3.12px;
  }

  body.subpage--contact .page-hero--contact .page-hero__overlay {
    background: rgb(1 62 141 / 20%);
  }

  body.subpage--contact .faq-page {
    padding: 52px 0 60px;
    background: #f0f0f0;
  }

  body.subpage--contact .section-heading p {
    margin-bottom: 9px;
    font-size: 12px;
    line-height: 1;
  }

  body.subpage--contact .section-heading h2 {
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: 1.3px;
  }

  body.subpage--contact .section-heading span {
    width: 20px;
    margin-top: 12px;
  }

  body.subpage--contact .faq-page__lead,
  body.subpage--contact .faq-page__list,
  body.subpage--contact .contact-form-section__lead,
  body.subpage--contact .contact-form,
  body.subpage--contact .form-errors {
    width: calc(100% - 32px);
  }

  body.subpage--contact .faq-page__lead {
    margin: 22px auto 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: 0.26px;
    text-align: center;
  }

  body.subpage--contact .faq-page__lead p {
    margin: 0;
  }

  body.subpage--contact .faq-page__lead p + p {
    margin-top: 0;
  }

  body.subpage--contact .faq-page__list {
    gap: 18px;
    margin: 26px auto 0;
  }

  body.subpage--contact .faq-item {
    padding: 13px 16px 14px;
  }

  body.subpage--contact .faq-item__row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  body.subpage--contact .faq-item__row + .faq-item__row {
    margin-top: 6px;
    padding-top: 6px;
  }

  body.subpage--contact .faq-item__row + .faq-item__row::before {
    left: 44px;
  }

  body.subpage--contact .faq-item__mark {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  body.subpage--contact .faq-item h3 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.7px;
  }

  body.subpage--contact .faq-item p {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.26px;
  }

  body.subpage--contact .contact-form-section__stripe {
    grid-template-columns: 1fr 128px;
    height: 20px;
  }

  body.subpage--contact .contact-form-section__inner {
    padding: 58px 0 88px;
  }

  body.subpage--contact .contact-form-section__lead {
    margin: 30px auto 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: 0.26px;
    text-align: left;
  }

  body.subpage--contact .contact-form-section--confirm .contact-form-section__lead {
    font-weight: 600;
    text-align: center;
  }

  body.subpage--contact .contact-form-section__lead p {
    margin: 0;
  }

  body.subpage--contact .contact-form-section__lead p + p {
    margin-top: 0;
  }

  body.subpage--contact .contact-form {
    gap: 0;
    margin: 34px auto 0;
  }

  body.subpage--contact .form-row {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 10px 10px;
    padding: 18px 0;
    border-bottom: 0;
  }

  body.subpage--contact .form-row__label {
    grid-column: 1;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1.12px;
  }

  body.subpage--contact .form-row__badge {
    grid-column: 2;
    justify-self: start;
    width: 40px;
    height: 24px;
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  body.subpage--contact .form-row input,
  body.subpage--contact .form-row textarea {
    grid-column: 1 / -1;
    border-width: 1.5px;
    font-size: 14px;
    letter-spacing: 0.56px;
  }

  body.subpage--contact .form-row input {
    height: 48px;
    padding: 0 12px;
  }

  body.subpage--contact .form-row textarea {
    min-height: 130px;
    padding: 12px;
    line-height: 1.75;
  }

  body.subpage--contact .form-privacy {
    gap: 10px;
    margin: 30px auto 0;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.52px;
  }

  body.subpage--contact .form-privacy input {
    width: 22px;
    height: 22px;
    border-width: 1px;
  }

  body.subpage--contact .form-submit {
    width: 230px;
    height: 52px;
    margin: 34px auto 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.68px;
  }

  body.subpage--contact .contact-form-section--confirm .contact-form-section__inner {
    padding: 58px 0 88px;
  }

  body.subpage--contact .confirm-table {
    gap: 0;
    width: calc(100% - 32px);
    margin: 34px auto 0;
    border-top: 0;
  }

  body.subpage--contact .confirm-table__row {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 10px 10px;
    padding: 18px 0;
    border-bottom: 0;
  }

  body.subpage--contact .confirm-table dt {
    grid-column: 1;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1.12px;
  }

  body.subpage--contact .confirm-table__badge {
    grid-column: 2;
    justify-self: start;
    width: 40px;
    height: 24px;
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  body.subpage--contact .confirm-table dd {
    grid-column: 1 / -1;
    padding-top: 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.56px;
    overflow-wrap: anywhere;
  }

  body.subpage--contact .form-privacy--confirm {
    justify-content: center;
    width: calc(100% - 32px);
  }

  body.subpage--contact .form-actions {
    flex-direction: column-reverse;
    align-items: center;
    gap: 18px;
    width: calc(100% - 32px);
    margin: 34px auto 0;
  }

  body.subpage--contact .form-actions form {
    width: 230px;
  }

  body.subpage--contact .form-back,
  body.subpage--contact .form-actions .form-submit {
    width: 230px;
    height: 52px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.68px;
  }

  body.subpage--contact .thanks-section {
    padding: 58px 0 88px;
    background: #fdfdfd;
  }

  body.subpage--contact .thanks-section__body {
    width: calc(100% - 32px);
    margin: 30px auto 0;
    text-align: center;
  }

  body.subpage--contact .thanks-section__body p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0.26px;
    text-align: center;
  }

  body.subpage--contact .thanks-section__body .form-submit {
    width: 230px;
    height: 52px;
    margin: 34px auto 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.68px;
  }
}

@media (max-width: 767px) {
  body.subpage--privacy .lower-nav--page {
    height: 55px;
    padding: 0 22px 0 19px;
    background: var(--blue);
    color: #fff;
  }

  body.subpage--privacy .lower-nav__brand {
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.85px;
  }

  body.subpage--privacy .lower-nav::after {
    width: 35px;
    height: 16px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 7px / 35px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 14px / 35px 2px no-repeat;
  }

  body.subpage--privacy .subpage__main {
    padding-top: 55px;
  }

  body.subpage--privacy .page-hero--privacy {
    height: 140px;
  }

  body.subpage--privacy .page-hero__title {
    top: 42px;
    width: 100%;
    transform: translateX(-50%);
  }

  body.subpage--privacy .page-hero__label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
  }

  body.subpage--privacy .page-hero h1 {
    font-size: 26px;
    line-height: 1.42;
    letter-spacing: 3.12px;
  }

  body.subpage--privacy .privacy-policy {
    padding: 41px 0 54px;
    background: #fdfdfd;
  }

  body.subpage--privacy .privacy-policy__inner {
    width: calc(100% - 44px);
  }

  body.subpage--privacy .privacy-policy__body {
    margin: 0;
    padding: 0;
  }

  body.subpage--privacy .privacy-policy__lead,
  body.subpage--privacy .privacy-policy__section p,
  body.subpage--privacy .privacy-policy__section ul {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 1.12px;
  }

  body.subpage--privacy .privacy-policy__section {
    margin-top: 38px;
  }

  body.subpage--privacy .privacy-policy__section h3 {
    margin: 0 0 21px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.2px;
  }

  body.subpage--privacy .privacy-policy__section:nth-of-type(1) h3,
  body.subpage--privacy .privacy-policy__section:nth-of-type(2) h3 {
    font-weight: 700;
  }

  body.subpage--privacy .privacy-policy__section ul {
    margin: 17px 0 0;
    padding: 0;
    list-style: none;
  }

  body.subpage--privacy .privacy-policy__section li::before {
    content: "・";
    margin-right: 4px;
  }

  body.subpage--privacy .privacy-policy__back {
    width: 188px;
    height: 49px;
    margin: 48px auto 0;
    font-size: 14px;
    line-height: 49px;
    letter-spacing: 1.68px;
  }

  body.is-mobile-menu-open {
    overflow: hidden;
  }

  .hero__header::after,
  .lower-nav::after {
    display: none !important;
  }

  .menu-toggle {
    position: relative;
    z-index: 1301;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
  }

  .menu-toggle__lines {
    position: relative;
    display: grid;
    gap: 5px;
    width: 35px;
  }

  .menu-toggle__lines span {
    display: block;
    width: 35px;
    height: 2px;
    background: currentColor;
    transition:
      transform 0.28s ease,
      opacity 0.2s ease;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(1) {
    transform: translateY(7px) rotate(35deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(3) {
    transform: translateY(-7px) rotate(-35deg);
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: block;
    background: #f0f0f0;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition:
      opacity 0.32s ease,
      visibility 0.32s ease;
  }

  .mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .mobile-menu__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding: 0 16px 34px;
    overflow: hidden;
  }

  .mobile-menu__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 0 2px 0 5px;
  }

  .mobile-menu__brand {
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.85px;
  }

  .mobile-menu__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .mobile-menu__close span {
    grid-area: 1 / 1;
    display: block;
    width: 38px;
    height: 2px;
    background: currentColor;
  }

  .mobile-menu__close span:first-child {
    transform: rotate(35deg);
  }

  .mobile-menu__close span:last-child {
    transform: rotate(-35deg);
  }

  .mobile-menu__nav {
    position: relative;
    z-index: 1;
    width: min(100%, 334px);
    margin: 30px auto 0;
  }

  .mobile-menu__section {
    border-bottom: 1px dashed rgb(52 53 56 / 55%);
  }

  .mobile-menu__section-main {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 28px;
    align-items: center;
    width: 100%;
    min-height: 89px;
    padding: 16px 0 14px;
    border: 0;
    border-bottom: 1px dashed rgb(52 53 56 / 55%);
    background: transparent;
    appearance: none;
    box-sizing: border-box;
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  .mobile-menu__section-main:focus {
    outline: none;
  }

  .mobile-menu__section-main--split {
    cursor: default;
  }

.mobile-menu__section--business .mobile-menu__section-main {
  border-bottom: 0;
}

.mobile-menu__section--contact .mobile-menu__section-main {
  border-bottom: 0;
}

  .mobile-menu__section-link {
    grid-column: 1;
    display: grid;
    align-content: center;
    row-gap: 6px;
    min-height: 59px;
    color: inherit;
  }

  .mobile-menu__section-link .mobile-menu__ja {
    margin-top: 0;
  }

  .mobile-menu__accordion-toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    justify-self: end;
    width: 36px;
    height: 36px;
    margin: 0 -10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    color: inherit;
    cursor: pointer;
  }

  .mobile-menu__accordion-toggle:focus {
    outline: none;
  }

  .mobile-menu__accordion-toggle .mobile-menu__icon {
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
  }

  .mobile-menu__en,
  .mobile-menu__ja {
    grid-column: 1;
    display: block;
  }

  .mobile-menu__en {
    color: var(--blue);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-menu__ja {
    margin-top: -11px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 1.2px;
  }

  .mobile-menu__icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
  }

  .mobile-menu__icon::before,
  .mobile-menu__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1px;
    background: var(--ink);
    transform: translate(-50%, -50%);
  }

  .mobile-menu__icon--plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .mobile-menu__section--business:not(.is-open) .mobile-menu__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .mobile-menu__subnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 13px;
    max-height: 170px;
    padding: 2px 0 24px;
    overflow: hidden;
    opacity: 1;
    transition:
      max-height 0.35s ease,
      padding 0.35s ease,
      opacity 0.25s ease;
  }

.mobile-menu__section--business:not(.is-open) .mobile-menu__subnav {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.mobile-menu__section--contact:not(.is-open) .mobile-menu__subnav {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.mobile-menu__section--contact .mobile-menu__subnav {
  grid-template-columns: 1fr;
}

.mobile-menu__section--contact.is-open .mobile-menu__icon::after {
  transform: translate(-50%, -50%);
}

  .mobile-menu__subnav a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.52px;
    white-space: nowrap;
  }

  .mobile-menu__subnav span {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--blue);
  }

  .mobile-menu__marquee {
    position: relative;
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 0;
    flex: 0 0 auto;
    width: 100vw;
    margin: 64px 0 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .mobile-menu__marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: mobileMenuMarqueeLeft 30s linear infinite;
    will-change: transform;
  }

  .mobile-menu__marquee-set {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-right: 18px;
    white-space: nowrap;
  }

  .mobile-menu__marquee-text {
    color: rgb(38 102 186 / 5%);
    font-family: var(--font-en);
    font-size: 55px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-menu__marquee-image {
    display: inline-block;
    width: 120px;
    height: 72px;
    overflow: hidden;
    vertical-align: middle;
  }

  .mobile-menu__marquee-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @keyframes mobileMenuMarqueeLeft {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }
}

@media (width >= 769px) {
  body.subpage--contact .faq-page__lead p:first-child,
  body.subpage--contact .faq-page__lead p:nth-child(2) {
    display: inline;
  }

  body.subpage--contact .faq-page__lead p:first-child::after {
    content: "";
  }

  body.subpage--contact .faq-page__lead p:nth-child(3) {
    display: block;
  }

  @media (width >= 1600px) {
    body:not(.subpage) .business__photo {
      width: 820px;
    }

    body:not(.subpage) .business__content {
      width: 760px;
      margin-left: 940px;
    }
  }

  body:not(.subpage) .business__button,
  body:not(.subpage) .about__button,
  body:not(.subpage) .works__button {
    justify-content: center;
    gap: 32px;
    padding-inline: 0;
  }

  body:not(.subpage) .business__button {
    width: 275px;
  }

  body:not(.subpage) .about__button {
    width: 453px;
  }

  body.subpage--works .works-page__button {
    justify-content: center;
    gap: clamp(40px, 3.125vw, 60px);
  }

  body.subpage--works .works-page__button span {
    transform: translateX(10px);
  }

  .hero__nav a.hero__contact {
    width: 130px;
    min-width: 130px;
    padding-inline: 0;
  }

  .hero__scroll {
    height: 240px;
  }

  .hero__scroll::before {
    height: 240px;
  }

  .hero__scroll::after {
    height: 58px;
    transform: translateY(-64px);
    animation-name: scroll-line;
  }
}

.section-heading p,
.about__label,
.contact__label {
  margin-bottom: 24px !important;
}

.section-heading span,
.about__line,
.contact__line {
  margin-top: 34px !important;
}

@media (max-width: 767px) {
  .section-heading p,
  .about__label,
  .contact__label {
    margin-bottom: 9px !important;
  }

  .section-heading span,
  .about__line,
  .contact__line {
    margin-top: 12px !important;
  }
}

.reason-item__copy {
  transform: translateY(-20px);
}