/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  position: relative;

  background:
    url("https://sufure-headspa.com/wp-content/uploads/2026/10/9jdk-9.webp")
    center / cover
    no-repeat;
}

.site-footer::before {
  content: "";

  position: absolute;
  inset: 0;

  background: rgba(55, 51, 49, 0.12);

  pointer-events: none;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

/* =========================================================
   INNER
========================================================= */

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(80px, 8vw, 140px);

  width: 100%;
  max-width: 1400px;

  margin: 0 auto;
  padding-top: 70px;

  border-top: 1px solid rgba(69, 65, 63, 0.22);
}


/* =========================================================
   BRAND
========================================================= */

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
}


/* =========================================================
   LOGO
========================================================= */

.site-footer__logo {
  display: block;

  width: clamp(300px, 32vw, 520px);

  color: inherit;
  text-decoration: none;
}


.site-footer__logo img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   BRAND INFO AREA
========================================================= */

.site-footer__brand-info {
  display: grid;
  grid-template-columns:
    minmax(190px, 0.8fr)
    minmax(330px, 1.2fr);

  align-items: start;

  gap: clamp(65px, 7vw, 120px);

  width: 100%;

  margin-top: 55px;
}


/* =========================================================
   COPY
========================================================= */

.site-footer__brand-copy {
  min-width: 0;
}


.site-footer__copy {
  margin: 0;

  color: #514c49;

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

  font-size: 14px;
  font-weight: 400;

  line-height: 2.1;

  letter-spacing: 0.12em;
}


/* =========================================================
   LOCATION / ENGLISH
========================================================= */

.site-footer__location {
  margin: 70px 0 0;

  color: #8a8380;

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

  font-size: 10px;

  line-height: 2;

  letter-spacing: 0.16em;
}


/* =========================================================
   INFORMATION
========================================================= */

.site-footer__info {
  padding-top: 2px;
}


.site-footer__info-title {
  margin: 0 0 28px;

  color: #77716e;

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

  font-size: 12px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.2em;
}


.site-footer__info-list {
  margin: 0;
}


/* =========================================================
   INFORMATION ROW
========================================================= */

.site-footer__info-row {
  display: grid;

  grid-template-columns: 80px minmax(0, 1fr);

  gap: 20px;

  margin-bottom: 18px;
}


.site-footer__info-row:last-child {
  margin-bottom: 0;
}


.site-footer__info-row dt,
.site-footer__info-row dd {
  margin: 0;

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

  font-size: 12px;
  font-weight: 400;

  line-height: 1.85;

  letter-spacing: 0.07em;
}


.site-footer__info-row dt {
  color: #8a8380;
}


.site-footer__info-row dd {
  color: #5e5957;
}


.site-footer__info-row small {
  display: block;

  margin-top: 3px;

  color: #96908d;

  font-size: 10px;
  font-weight: 400;

  line-height: 1.7;

  letter-spacing: 0.05em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-footer__navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding-top: 15px;

  min-width: 0;
}


.site-footer__nav {
  display: grid;

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

  gap: 30px 55px;

  width: 100%;
}


.site-footer__nav a {
  position: relative;

  color: #4b4644;

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

  font-size: 14px;

  line-height: 1;

  letter-spacing: 0.13em;

  text-decoration: none;

  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(.22, 1, .36, 1);
}


@media (hover: hover) {

  .site-footer__nav a:hover {
    opacity: 0.55;
    transform: translateX(4px);
  }

}


/* =========================================================
   SOCIAL
========================================================= */

.site-footer__social {
  margin-top: 80px;
}


.site-footer__social a {
  display: inline-flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 7px;

  border-bottom:
    1px solid rgba(69, 65, 63, 0.4);

  color: #4b4644;

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

  font-size: 13px;

  line-height: 1;

  letter-spacing: 0.18em;

  text-decoration: none;
}


/* =========================================================
   BOTTOM
========================================================= */

.site-footer__bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: 1400px;

  margin: 90px auto 0;
  padding-top: 25px;

  border-top:
    1px solid rgba(69, 65, 63, 0.14);
}


.site-footer__copyright,
.site-footer__privacy {
  margin: 0;

  color: #918a87;

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

  font-size: 10px;

  line-height: 1;

  letter-spacing: 0.15em;
}


.site-footer__privacy {
  text-decoration: none;
}


/* =========================================================
   TABLET
========================================================= */

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

  .site-footer {
    padding:
      90px
      5%
      30px;
  }


  .site-footer__inner {
    grid-template-columns:
      minmax(0, 1fr)
      240px;

    gap: 55px;
  }


  .site-footer__logo {
    width: min(100%, 420px);
  }


  .site-footer__brand-info {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .site-footer__location {
    margin-top: 40px;
  }


  .site-footer__nav {
    gap:
      28px
      30px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 767px) {

  .site-footer {
    padding:
      65px
      24px
      25px;
  }


  /* -----------------------------------------
     全体
  ----------------------------------------- */

  .site-footer__inner {
    display: block;

    width: 100%;
    max-width: 500px;

    margin: 0 auto;

    padding-top: 55px;
  }


  /* -----------------------------------------
     BRAND
  ----------------------------------------- */

  .site-footer__brand {
    align-items: center;

    width: 100%;

    text-align: center;
  }


  /* -----------------------------------------
     LOGO
  ----------------------------------------- */

  .site-footer__logo {
    width: min(82vw, 390px);

    margin: 0 auto;
  }


  /* -----------------------------------------
     COPY + INFORMATION
     SPでは縦並びに変更
  ----------------------------------------- */

  .site-footer__brand-info {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0;

    width: 100%;

    margin-top: 55px;
  }


  .site-footer__brand-copy {
    width: 100%;

    text-align: center;
  }


  .site-footer__copy {
    font-size: 14px;

    line-height: 2.15;

    letter-spacing: 0.12em;
  }


  .site-footer__location {
    margin-top: 35px;

    font-size: 9px;

    line-height: 2;

    letter-spacing: 0.13em;
  }


  /* -----------------------------------------
     INFORMATION
  ----------------------------------------- */

  .site-footer__info {
    width: 100%;
    max-width: 330px;

    margin-top: 60px;
    padding-top: 0;

    text-align: center;
  }


  .site-footer__info-title {
    margin-bottom: 30px;

    font-size: 11px;

    letter-spacing: 0.18em;
  }


  .site-footer__info-row {
    display: block;

    margin-bottom: 25px;
  }


  .site-footer__info-row:last-child {
    margin-bottom: 0;
  }


  .site-footer__info-row dt {
    margin-bottom: 5px;

    font-size: 11px;

    line-height: 1.7;

    letter-spacing: 0.08em;
  }


  .site-footer__info-row dd {
    font-size: 13px;

    line-height: 1.8;

    letter-spacing: 0.06em;
  }


  .site-footer__info-row small {
    margin-top: 4px;

    font-size: 10px;

    line-height: 1.7;
  }


  /* -----------------------------------------
     NAVIGATION
  ----------------------------------------- */

  .site-footer__navigation {
    align-items: center;

    width: 100%;

    margin-top: 75px;
    padding-top: 0;
  }


  .site-footer__nav {
    width: 100%;
    max-width: 330px;

    margin: 0 auto;

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

    gap:
      32px
      45px;

    text-align: center;
  }


  .site-footer__nav a {
    font-size: 13px;

    letter-spacing: 0.12em;
  }


  /* -----------------------------------------
     INSTAGRAM
  ----------------------------------------- */

  .site-footer__social {
    margin-top: 65px;

    text-align: center;
  }


  .site-footer__social a {
    justify-content: center;

    font-size: 12px;

    padding:
      0
      12px
      7px;
  }


  /* -----------------------------------------
     BOTTOM
  ----------------------------------------- */

  .site-footer__bottom {
    width: 100%;
    max-width: 500px;

    margin:
      70px
      auto
      0;

    padding-top: 22px;
  }


  .site-footer__copyright,
  .site-footer__privacy {
    font-size: 8.5px;

    letter-spacing: 0.12em;
  }

}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media (max-width: 420px) {

  .site-footer {
    padding:
      60px
      20px
      22px;
  }


  .site-footer__inner {
    padding-top: 48px;
  }


  .site-footer__logo {
    width: min(86vw, 350px);
  }


  .site-footer__brand-info {
    margin-top: 48px;
  }


  .site-footer__copy {
    font-size: 13px;
  }


  .site-footer__info {
    max-width: 300px;

    margin-top: 52px;
  }


  .site-footer__info-row dd {
    font-size: 12.5px;
  }


  .site-footer__navigation {
    margin-top: 65px;
  }


  .site-footer__nav {
    max-width: 300px;

    gap:
      29px
      30px;
  }

}