/* フッター：寺院情報・補助ナビゲーション・著作権表示 */

.site-footer {
 --footer-join-color: #fff8f2;
 position: relative;
 box-sizing: border-box;
 min-height: 410px;
 margin-top: -1px;
 color: var(--color-text);
 background-color: var(--footer-join-color);
 background-image: url('../images/footer-bg.webp');
 background-position: center top;
 background-size: cover;
 background-repeat: no-repeat;
 word-break: normal;
}

/* 直前のセクション色をフッター背景へ引き継ぎ、境目をなじませる。 */
.home-main + .site-footer {
 --footer-join-color: var(--color-accent-pink-surface);
}

.standard-page + .site-footer {
 --footer-join-color: var(--color-surface-cream);
 background-position: center top;
}

.site-footer::before {
 content: '';
 position: absolute;
 z-index: 0;
 inset: 0 0 auto;
 height: clamp(110px, 8vw, 154px);
 background: linear-gradient(to bottom, var(--footer-join-color) 0%, var(--footer-join-color) 12%, transparent 100%);
 pointer-events: none;
}

.site-footer__inner {
 position: relative;
 z-index: 1;
 box-sizing: border-box;
 width: min(100%, var(--content-width-1920));
 min-height: 410px;
 margin-inline: auto;
 padding: 145px 40px 25px;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.site-footer a {
 color: inherit;
 text-decoration: none;
}

.site-footer a:focus-visible {
 outline: 2px solid var(--color-focus);
 outline-offset: 4px;
}

.site-footer__logo {
 width: 230px;
 margin: 0;
 font-size: var(--font-size-14);
 font-weight: 400;
}

.site-footer__brand {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
}

.site-footer__logo img {
 display: block;
 flex: 0 0 auto;
 width: 58px;
 height: 58px;
 object-fit: contain;
}

.site-footer__brand-text {
 display: flex;
 flex: 1;
 min-width: 0;
 flex-direction: column;
 gap: .3em;
 margin-top: 5px;
 white-space: nowrap;
}

.site-footer__brand-caption {
 display: block;
 padding: .15em 1em;
 color: var(--color-white);
 background: var(--color-brand-gold);
 font-size: .8em;
 font-weight: var(--font-weight-bold);
 line-height: 1.45;
 letter-spacing: .12em;
 text-align: center;
}

.site-footer__brand-name {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: .4em;
 font-weight: var(--font-weight-bold);
 line-height: 1.2;
}

.site-footer__brand-name strong {
 font-size: 1.5em;
 font-weight: var(--font-weight-bold);
 letter-spacing: .06em;
}

.site-footer__address {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1.2em;
 margin-top: 11px;
 font-size: var(--font-size-16);
 font-style: normal;
 letter-spacing: .08em;
}

.site-footer__nav {
 margin-top: 32px;
}

.site-footer__nav ul {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: clamp(36px, 4vw, 72px);
 margin: 0;
 padding: 0;
 list-style: none;
}

.site-footer__nav a {
 font-size: var(--font-size-16);
 font-weight: var(--font-weight-bold);
 letter-spacing: .05em;
 transition: color .25s ease;
}

.site-footer__nav a:hover {
 color: var(--color-accent-pink);
 text-decoration: none;
}

.site-footer__copyright {
 margin: auto 0 0;
 font-size: var(--font-size-14);
 letter-spacing: .08em;
}

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

@media (min-width: 768px) and (max-width: 1199px) {
 .site-footer,
 .site-footer__inner {
  min-height: 440px;
 }

 .site-footer__inner {
  padding: 155px 30px 25px;
 }
}

@media (max-width: 767px) {
 .site-footer,
 .site-footer__inner {
  min-height: 520px;
 }

 .site-footer {
  background-position: center top;
 }

 .site-footer__inner {
  padding: 90px 20px calc(108px + env(safe-area-inset-bottom, 0px));
 }

 .site-footer__address {
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
  font-size: var(--font-size-14);
  text-align: center;
 }

 .site-footer__nav {
  margin-top: 24px;
 }

 .site-footer__nav ul {
  flex-direction: column;
  gap: 10px;
 }

 .site-footer__nav a {
  font-size: var(--font-size-14);
 }

 .site-footer__copyright {
  margin-top: 28px;
  font-size: var(--font-size-12);
 }
}

@media (max-width: 480px) {
 .site-footer {
  background-image: url('../images/footer-sp-bg.webp');
  background-position: center top;
 }

 .site-footer::before {
  height: 120px;
 }
}

@media (max-width: 399px) {
 .site-footer__logo {
  width: 210px;
  font-size: var(--font-size-14);
 }

 .site-footer__logo img {
  width: 54px;
  height: 54px;
 }

}