/* サイト共通のフッターに関するスタイルを記述します。 */
/* フッター全体の文字色と背景グラデーション */
.site-footer {
  color: #2f2f2f;
  background: linear-gradient(112deg, #fff0c8 0%, #ffb9a1 58%, #ff958f 100%);
}

/* PC版の完成イメージ（横幅1440px・高さ564px）を基準にした表示領域 */
.site-footer__inner {
  position: relative;
  width: min(100%, 144rem);
  height: 60.4rem;
  margin-inline: auto;
  overflow: hidden;
}

/* TOP・お問い合わせボタンの配置 */
.site-footer__nav {
  position: absolute;
  top: 13.9rem;
  left: 23.45%;
  right: 24.9%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 8rem);
}

/* PC版のボタンは画面幅に合わせて最大262pxまで可変 */
.site-footer__nav-link {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(15.5rem, 18.2vw, 26.2rem);
  height: clamp(4.8rem, 4.45vw, 6.4rem);
  min-width: 0;
  padding: clamp(0.8rem, 0.7vw, 1rem) clamp(0.4rem, 1.95vw, 2.8rem);
  color: #fff;
  font-size: clamp(1.4rem, 1.39vw, 2rem);
  line-height: 1.3;
  white-space: nowrap;
  background: #3edb61;
  border-radius: 2.5rem;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.site-footer__nav-link:first-child {
  font-family: "Gugi", sans-serif;
  font-size: clamp(1.6rem, 1.67vw, 2.4rem);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
  opacity: 0.75;
}

.site-footer__nav-link:focus-visible {
  outline: 0.3rem solid #16652c;
  outline-offset: 0.3rem;
}

/* 人物画像とTOP案内用の吹き出し */
.site-footer__character {
  position: absolute;
  z-index: 1;
}

.site-footer__speech {
  position: absolute;
  top: -0.7rem;
  left: min(10.555556vw, 15.2rem);
  z-index: 2;
  width: min(13.888889vw, 20rem);
}

.site-footer__speech img {
  margin-top: min(3.472222vw, 5rem);
  width: 100%;
}

.site-footer__character--pc {
  top: 16.4rem;
  left: min(4.583333vw, 6.6rem);
  width: min(15.902778vw, 22.9rem);
}

.site-footer__character--sp {
  display: none;
}

/* 3事業所のロゴと住所をPC版では横並びに配置 */
.site-footer__groups {
  position: absolute;
  top: 27.7rem;
  left: 3.65%;
  right: 5.8%;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1fr;
  align-items: start;
  gap: min(5.208333vw, 7.5rem);
}

.site-footer__group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

/* 3事業所のロゴを重なり回避のため少し下へ移動 */
.site-footer__group > a {
  margin-bottom: 0.5rem;
  transform: translateY(2.5rem) translateX(-1.5rem);
}

/* 1440px時のPCデザインサイズを上限に、画像を画面幅に合わせて縮める */
.site-footer__logo--kanto {
  width: min(28.819444vw, 41.5rem);
}

.site-footer__logo--seta {
  width: min(18.055556vw, 26rem);
}

.site-footer__logo--utari {
  width: min(24.791667vw, 35.7rem);
}

.site-footer__address {
  width: 100%;
  /* 下へ移動したロゴと住所が詰まって見えないよう、PC版の間隔を確保 */
  margin-top: 4rem;
  font-style: normal;
  text-align: center;
}

.site-footer__group--kanto .site-footer__address {
  width: fit-content;
  text-align: left;
}

.site-footer__address p {
  font-family: serif;
  font-size: 1.5rem;
  line-height: 1.8;
}

.site-footer__address p + p {
  margin-top: 1.2rem;
}

.site-footer__copyright {
  position: absolute;
  /* コピーライトをデザイン上の余白に合わせて少し下へ配置 */
  bottom: 2.2rem;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  font-family: serif;
  font-size: 1.4rem;
  text-align: center;
}

.site-footer__copyright small {
  font-size: inherit;
}

/* PC版ボタンのホバー時に光が左から右へ流れる演出 */
@media (min-width: 700px) {
  /* 通常時はフッターのピンクになじむローズ色と白系文字で読みやすくする */
  .site-footer__nav-link {
    color: #fffaf7;
    background: #925965;
    /* 内側の枠にして、ボタン寸法や文字の表示領域を変えない */
    box-shadow: inset 0 0 0 0.2rem #ffe4e7;
    transition:
      background-color 0.25s ease,
      color 0.25s ease;
  }

  .site-footer__nav-link:hover,
  .site-footer__nav-link:focus-visible {
    color: #fff;
    background-color: #185c34;
    opacity: 1;
  }

  /* 高さの異なるロゴを共通エリアの中央に置き、住所の開始位置も揃える */
  .site-footer__group > a {
    display: flex;
    width: 100%;
    height: min(9.513889vw, 13.7rem);
    align-items: center;
    justify-content: center;
  }

  .site-footer__nav-link::before {
    position: absolute;
    top: -50%;
    left: -35%;
    width: 18%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgb(255 255 255 / 80%),
      transparent
    );
    content: "";
    transform: skewX(-20deg);
    pointer-events: none;
  }

  .site-footer__nav-link:hover::before {
    animation: site-footer-shine 0.7s ease-out;
  }
}

/* 光がボタン上を横切るキラリアニメーション */
@keyframes site-footer-shine {
  from {
    left: -35%;
  }

  to {
    left: 120%;
  }
}

/* 動きを減らす端末設定ではアニメーションを停止 */
@media (prefers-reduced-motion: reduce) {
  .site-footer__nav-link:hover::before {
    animation: none;
  }

  .site-footer__nav-link::after {
    transition: none;
  }
}

/* 横幅699.98px以下はSP版の縦並びレイアウトへ切り替え */
@media (max-width: 699.98px) {
  .site-footer {
    background: linear-gradient(160deg, #fff0c8 0%, #ffb39d 50%, #ff908d 100%);
  }

  .site-footer__inner {
    width: 100%;
    /* Seta・UTARIの住所表示分を確保し、著作権表示との間隔を保つ */
    height: 105.5rem;
  }

  .site-footer__nav {
    top: 6.8rem;
    right: 2.4rem;
    left: 2.4rem;
    align-items: center;
  }

  .site-footer__nav-link {
    display: grid;
    width: 14.2rem;
    height: 6.4rem;
    min-width: 0;
    min-height: 0;
    place-items: center;
    padding: 0;
    color: #fffaf7;
    font-family: inherit;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    -webkit-text-stroke: 0;
    text-shadow: none;
    background: #9b6071;
    border: 0.2rem solid #ffe4e7;
    border-radius: 2.5rem;
    /* 下側に濃い影を作り、タッチ前はボタンが浮いて見えるようにする */
    box-shadow:
      0 0.5rem 0 #6f3f4d,
      0 0.8rem 1.2rem rgb(83 48 62 / 25%);
    overflow: hidden;
    transform: translateY(0);
    transition:
      color 0.25s ease,
      background-color 0.25s ease,
      box-shadow 0.12s ease,
      transform 0.12s ease;
  }

  /* PC版と同じく、ホバー・フォーカス時に色を変えて光を横切らせる */
  .site-footer__nav-link:hover,
  .site-footer__nav-link:focus-visible {
    color: #fff;
    background-color: #185c34;
    opacity: 1;
  }

  /* タップ中は影を短くして本体を沈め、押した感触を視覚的に伝える */
  .site-footer__nav-link:active {
    box-shadow:
      0 0.15rem 0 #6f3f4d,
      0 0.35rem 0.6rem rgb(83 48 62 / 18%);
    transform: translateY(0.35rem);
  }

  .site-footer__nav-link::before {
    position: absolute;
    top: -50%;
    left: -35%;
    width: 18%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgb(255 255 255 / 80%),
      transparent
    );
    content: "";
    transform: skewX(-20deg);
    pointer-events: none;
  }

  .site-footer__nav-link:hover::before,
  .site-footer__nav-link:focus-visible::before {
    animation: site-footer-shine 0.7s ease-out;
  }

  .site-footer__nav-link::after {
    display: none;
  }

  .site-footer__nav-link:first-child {
    width: 14.2rem;
    font-family: "Gugi", sans-serif;
    font-size: 2.4rem;
  }

  .site-footer__character--pc {
    display: none;
  }

  .site-footer__speech {
    display: none;
  }

  .site-footer__character--sp {
    top: 15.7rem;
    left: 50%;
    display: block;
    width: min(47.435897vw, 18.5rem);
    transform: translateX(-50%);
  }

  .site-footer__groups {
    inset: 0;
    display: block;
  }

  .site-footer__group {
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
  }

  .site-footer__group--kanto {
    top: 28.7rem;
  }

  .site-footer__group--seta {
    top: 50.5rem;
  }

  .site-footer__group--utari {
    top: 72.8rem;
  }

  /* SP画像は390px時の指定サイズを上限にする */
  .site-footer__logo--kanto {
    width: min(80.512821vw, 31.4rem);
  }

  .site-footer__logo--seta {
    width: min(62.820513vw, 24.5rem);
  }

  .site-footer__logo--utari {
    width: min(73.846154vw, 28.8rem);
    margin-top: 0;
  }

  .site-footer__address {
    margin-top: 3.2rem;
    padding-inline: 2rem;
  }

  .site-footer__address p {
    font-size: 1.5rem;
    line-height: 1.65;
  }

  .site-footer__address p + p {
    margin-top: 1rem;
  }

  .site-footer__address-phone {
    display: none;
  }

  .site-footer__copyright {
    bottom: 11.2rem;
    color: #fff;
    font-size: 1.3rem;
    white-space: nowrap;
  }
}