/* ==========================
   Footer（共通）
========================== */
.site-footer{
  margin-top: 48px;
  padding: 32px 16px;
  background: #fcdcc7;
  color: #1d1a1a;
}

.footer-inner{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.footer-section{
  min-width: 180px;
}

.footer-title{
  font-size: 16px;
  margin: 0 0 12px;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li{
  margin: 8px 0;
}

.footer-links a{
  color: #1d1a1a;
  text-decoration: none;
}

.footer-links a:hover{
  text-decoration: underline;
}

/* プロフィールエリア */
.footer-profile{
  flex: 1;
  min-width: 260px;
}

.footer-profile-main{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.footer-profile-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-profile-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.footer-profile-links{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.footer-sns-link{
  color: #1d1a1a;
  font-weight: 600;
  text-decoration: underline;
}

.footer-line-qr{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-line-label{
  font-size: 12px;
  font-weight: 600;
}

.footer-line-img{
  width: 110px;   /* ←これがないと巨大になる */
  height: auto;
  display: block;
}
/* フッター内の画像が暴れない保険 */
.site-footer img{
  max-width: 100%;
  height: auto;
}

/* プロフアイコンが巨大化しない */
.footer-profile-icon{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}
/* フッター内の画像が暴れない保険 */
.site-footer img{
  max-width: 100%;
  height: auto;
}

/* QRは固定幅にする（ここが効く） */
.footer-line-img{
  width: 140px;
  height: auto;
  display: block;
}
/* LINE公式：リンク版 */
.footer-line{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-line-label{
  font-size: 12px;
  font-weight: 600;
}

.footer-line-link{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ffffff;
  color: #1d1a1a;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.12);
}

.footer-line-link:hover{
  text-decoration: underline;
}
/* =========================
   SNS CTA ボタン（Instagram / LINE）
========================= */
.footer-cta-row{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.footer-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}

.footer-btn-icon{
  font-size: 16px;
}

.footer-btn-text{
  white-space: nowrap;
}

/* Instagramっぽい（グラデ） */
.footer-btn-instagram{
  color: #fff;
  background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

/* LINEっぽい（緑） */
.footer-btn-line{
  color: #fff;
  background: #06c755;
}
/* =========================
   Footer Responsive
========================= */
@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    gap: 18px;
  }

  .footer-section,
  .footer-profile {
    min-width: auto;
  }

  .footer-profile-main {
    align-items: flex-start;
  }

  .footer-cta-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .footer-btn {
    width: 100%;
    justify-content: center;
  }
}
.btn-reserve{
  text-align: center;
  line-height: 1.2;
}
/* =========================
   Footer: hoverで下線
========================= */
.site-footer a:hover{
  text-decoration: underline;
  text-underline-offset: 3px; /* 下線を少し離して上品に */
}
/* ボタンは下線を出さない（見た目維持） */
.site-footer .footer-btn:hover{
  text-decoration: none;
}
/* =========================
   Footer: 文字色を少し薄く
========================= */
.site-footer{
  color: rgba(29, 26, 26, 0.78); /* ←全体テキストを少し薄く */
}

/* フッターのリンク文字（通常時） */
.site-footer a{
  color: rgba(29, 26, 26, 0.72); /* ←リンクも少し薄く */
}
