@charset "UTF-8";

:root {
  --color-bg: #fff;
  --color-text: #050505;
  --color-muted: #c0c0c0;
  --color-reflection: rgba(192,192,192,.2);
  --color-footer: rgba(192,192,192,.2);
  --content-width: 1120px;
  --contact-content-width: 520px;
  --side-padding: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  color: var(--color-text);
  background-color: #F3F7F9;
  font-family: "Inter", sans-serif;
  font-feature-settings: "palt";
}

img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { color: inherit; font: inherit; }

.section { padding-inline: var(--side-padding); }
.section-inner { width: min(100%, var(--content-width)); margin-inline: auto; }
.section-inner--contact { max-width: var(--contact-content-width); }

/* Header */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  width: 100%;
  padding: 24px 20px;
}

.header-nav { display: flex; justify-content: flex-end; gap: 20px; }

.header-nav a {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color .25s ease;
}

.header-nav a:hover,
.header-nav a[aria-current="page"] { color: #8d8d8d; }

/* Heading */
.contact-heading { padding-top: 122px; padding-bottom: 44px; }

.section-title {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  font-size: clamp(36px,10vw,50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.section-title::after {
  content: attr(data-reflection);
  position: absolute;
  top: 76%;
  left: 0;
  color: var(--color-reflection);
  transform: scaleY(-1);
  transform-origin: center;
  pointer-events: none;
}

/* Image */
.contact-image {
  width: 100%;
  height: 138px;
  overflow: hidden;
  background: #c4c4c4;
}

.contact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
.contact-body { padding-top: 54px; padding-bottom: 56px; }

.contact-introduction {
  display: grid;
  gap: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
}

/* Form */
.contact-form {
  display: grid;
  gap: 56px;
  margin-top: 42px;
}

.form-field { display: grid; gap: 7px; }

.form-field label {
  color: #929292;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .12em;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid #767676;
  border-radius: 0;
  background-color: #F3F7F9;
  outline: none;
}

.form-field input { height: 30px; padding: 5px 8px; }

.form-field textarea {
  min-height: 160px;
  padding: 10px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: #050505;
  box-shadow: 0 0 0 1px #050505;
}

.form-submit {
  justify-self: center;
  min-width: 140px;
  padding: 12px 24px;
  border: 1px solid #050505;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
}

/* Logo / Footer */
.site-logo {
  --logo-arai-size: 24px;
  --logo-works-size: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  line-height: 1;
}

.site-logo-main,
.site-logo-reflection {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-logo-arai {
  font-size: var(--logo-arai-size);
  font-weight: 900;
  line-height: .9;
  letter-spacing: .08em;
}

.site-logo-works {
  margin-top: 3px;
  font-size: var(--logo-works-size);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .08em;
}

.site-logo-reflection {
  position: absolute;
  top: 88%;
  left: 50%;
  color: var(--color-reflection);
  transform: translateX(-50%) scaleY(-1);
  pointer-events: none;
}

.footer {
  padding: 62px 20px 68px;
  background: var(--color-footer);
  text-align: center;
}
.footer-copy {
  margin-top: 42px;
  color: #777;
  font-size: 8px;
  letter-spacing: 0.08em;
}
/* =========================
   Fade Up
========================= */

.fade-up {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* =========================
   Slide In Left
========================= */

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.slide-in-left.is-show {
  opacity: 1;
  transform: translateX(0);
}
@media (min-width: 768px) {
  :root {
    --side-padding: 40px;
    --contact-content-width: 680px;
  }

  .header { padding: 30px 48px; }
  .header-nav { gap: 34px; }
  .header-nav a { font-size: 15px; }

  .contact-heading { padding-top: 160px; padding-bottom: 58px; }
  .section-title { font-size: 52px; }

  .contact-image { height: 240px; }

  .contact-body { padding-top: 76px; padding-bottom: 90px; }
  .contact-introduction { gap: 18px; font-size: 15px; }

  .contact-form { gap: 68px; margin-top: 58px; }
  .form-field label { font-size: 18px; }
  .form-field input { height: 42px; padding-inline: 12px; }
  .form-field textarea { min-height: 230px; padding: 14px; }

  .site-logo--footer {
    --logo-arai-size: 32px;
    --logo-works-size: 20px;
  }

  .footer { padding: 84px 40px 92px; }
}


.header-nav a {
  display: inline-block;

  opacity: 0;
  transform: translateY(-20px);

  animation: nav-slide-down 0.8s ease forwards;
}

/* price */
.header-nav a:nth-child(1) {
  animation-delay: 0.2s;
}

/* about */
.header-nav a:nth-child(2) {
  animation-delay: 0.4s;
}

/* contact */
.header-nav a:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes nav-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}