@charset "UTF-8";
/* =========================================
   PuPu COLLECTION - サービス一覧ページ v2.0
   ========================================= */


/* =========================================
   ヒービジュアル
   ========================================= */
.sv-hero {
  position: relative;
  height: max(420px, 60vh);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sv-hero__bg {
  position: absolute;
  inset: 0;
}

.sv-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.sv-hero__overlay {
  position: absolute;
  inset: 0;
  background: none;
}

.sv-hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  text-align: center;
  width: 100%;
}

.sv-hero__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, 0.6);
  margin-bottom: 10px;
  text-shadow: none;
}

.sv-hero__title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  font-family: var(--font-serif);
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 12px;
}

.sv-hero__catch {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-serif);
}


/* =========================================
   サービスナビ（スティッキー）
   ========================================= */
.sv-nav {
  background: var(--c-bg-light);
  border-bottom: 1px solid var(--c-border-light);
  position: sticky;
  top: var(--header-h);
  z-index: 100;
}

.sv-nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0;
}

.sv-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-text-muted-on-light);
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.sv-nav__link:hover {
  color: var(--c-accent-on-light);
  border-bottom-color: var(--c-accent-on-light);
}

.sv-nav__new {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  background: var(--c-jiyugaoka-bg);
  border: 1px solid var(--c-jiyugaoka);
  color: var(--c-jiyugaoka);
  border-radius: 2px;
}


/* =========================================
   リード
   ========================================= */
.sv-lead {
  padding: 56px 0;
  background: var(--c-bg-light);
  border-bottom: 1px solid rgba(26, 22, 20, 0.12);
}

.sv-lead .sv-lead__text {
  color: var(--c-text-muted-on-light);
}

.sv-lead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.sv-lead__text {
  font-size: clamp(0.88rem, 1.2vw, 0.96rem);
  color: var(--c-text-muted);
  line-height: 2;
  max-width: 680px;
}

.sv-lead__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(0, 112, 74, 0.06);
  border: 1px solid var(--c-accent-on-light);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-accent-on-light);
  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* =========================================
   サービスセクション
   ========================================= */
.sv-service {
  padding: var(--sp-section) 0;
  background: var(--c-bg-light);
}

.sv-service--alt {
  background: var(--c-bg-card-light);
}

.sv-service--new {
  position: relative;
}

.sv-service__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.sv-service__inner--reverse {
  direction: rtl;
}

.sv-service__inner--reverse > * {
  direction: ltr;
}

/* 画像 */
.sv-service__img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* サブ画像3点 */
.sv-service__img-sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0 24px;
}

.sv-service__img-sub img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* ヘッダー */
.sv-service__header {
  margin-bottom: 24px;
}

.sv-service__num {
  display: block;
  font-size: 3rem;
  font-weight: 300;
  font-family: var(--font-serif);
  color: rgba(26, 22, 20, 0.12);
  line-height: 1;
  margin-bottom: 6px;
}

.sv-service__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent-on-light);
  margin-bottom: 10px;
}

.sv-service__name {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--c-text-on-light);
  line-height: 1.35;
  margin-bottom: 12px;
}

/* 店舗バッジ */
.sv-store-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sv-store-badge--all {
  background: rgba(58, 158, 138, 0.08);
  border: 1px solid var(--c-accent-mid);
  color: var(--c-accent-mid);
}

.sv-store-badge--new {
  background: var(--c-jiyugaoka-bg);
  border: 1px solid var(--c-jiyugaoka);
  color: var(--c-jiyugaoka);
}

/* 本文 */
.sv-service__desc {
  font-size: 0.9rem;
  color: var(--c-text-muted-on-light);
  line-height: 2;
  margin-bottom: 24px;
}

/* ポイントリスト */
.sv-service__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.sv-service__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--c-text-on-light);
}

.sv-service__points li i {
  color: var(--c-accent-on-light);
  flex-shrink: 0;
  margin-top: 3px;
}

/* CTA */
.sv-service__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sv-btn--shiba {
  background: #81d8d0 !important;
  border-color: #81d8d0 !important;
  color: #0a2e2d !important;
  box-shadow: 0 4px 16px rgba(129, 216, 208, 0.3) !important;
}

.sv-btn--shiba:hover {
  background: #6bc4bc !important;
  border-color: #6bc4bc !important;
  color: #fff !important;
}

.sv-btn--jiyugaoka {
  background: #00704a !important;
  border-color: #00704a !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 112, 74, 0.3) !important;
}

.sv-btn--jiyugaoka:hover {
  background: #005a3b !important;
  border-color: #005a3b !important;
  color: #fff !important;
}


/* =========================================
   NanoPet バナー
   ========================================= */
.sv-nanopet {
  padding: var(--sp-section) 0;
  background: var(--c-bg-light);
  border-top: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light);
}

.sv-nanopet .sv-nanopet__title {
  color: var(--c-text-on-light);
}

.sv-nanopet .sv-nanopet__desc {
  color: var(--c-text-muted-on-light);
}

.sv-nanopet__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.sv-nanopet__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sv-nanopet__imgs img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.sv-nanopet__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent-on-light);
  margin-bottom: 10px;
}

.sv-nanopet__title {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--c-text);
  line-height: 1.5;
  margin-bottom: 16px;
}

.sv-nanopet__desc {
  font-size: 0.88rem;
  color: var(--c-text-muted);
  line-height: 2;
  margin-bottom: 24px;
}


/* =========================================
   予約 CTA
   ========================================= */
.sv-reserve-cta {
  padding: var(--sp-section) 0;
  background: var(--c-bg-light);
}

.sv-reserve-cta .sv-reserve-cta__title {
  color: var(--c-text-on-light);
}

.sv-reserve-cta .sv-reserve-cta__desc {
  color: var(--c-text-muted-on-light);
}

.sv-reserve-cta .sv-reserve-cta__btn--tel {
  border-color: rgba(26, 22, 20, 0.2);
  color: var(--c-text-on-light);
}

.sv-reserve-cta .sv-reserve-cta__btn--tel span {
  color: var(--c-text-muted-on-light);
}

.sv-reserve-cta .sv-reserve-cta__btn--tel:hover {
  border-color: rgba(26, 22, 20, 0.4);
}

.sv-reserve-cta__inner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.sv-reserve-cta__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent-on-light);
  margin-bottom: 10px;
}

.sv-reserve-cta__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--c-text);
  margin-bottom: 16px;
}

.sv-reserve-cta__desc {
  font-size: 0.88rem;
  color: var(--c-text-muted);
  line-height: 2;
  margin-bottom: 32px;
}

.sv-reserve-cta__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.sv-reserve-cta__btns--stores {
  margin-top: 12px;
}

.sv-reserve-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: var(--ease);
}

.sv-reserve-cta__btn--main {
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-on-light) 100%);
  color: #ffffff;
}

.sv-reserve-cta__btn--main:hover {
  background: linear-gradient(135deg, var(--c-accent-hover) 0%, var(--c-accent-on-light-h) 100%);
  color: #ffffff;
}

.sv-reserve-cta__btn--tel {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.sv-reserve-cta__btn--tel span {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}

.sv-reserve-cta__btn--tel:hover {
  border-color: var(--c-text-muted);
}


/* =========================================
   レスポンシブ
   =========================================
   PC      : 1025px〜
   Tablet  : 600px〜1024px
   Mobile  : 〜599px
   ========================================= */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .sv-service__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .sv-service__inner--reverse {
    direction: ltr;
  }

  .sv-service__img img {
    height: 280px;
  }

  .sv-nanopet__inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .sv-lead__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ---- Mobile ---- */
@media (max-width: 599px) {
  .sv-nav__list {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sv-nav__list::-webkit-scrollbar {
    display: none;
  }

  .sv-nav__link {
    padding: 14px 16px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .sv-hero {
    height: 340px;
  }

  .sv-hero__content {
    padding-bottom: 36px;
  }

  .sv-service__img-sub {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .sv-service__img-sub img {
    height: 72px;
  }

  .sv-nanopet__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sv-reserve-cta__btns {
    flex-direction: column;
    align-items: stretch;
  }

  .sv-reserve-cta__btn {
    justify-content: center;
  }

  .sv-reserve-cta__desc br {
    display: none;
  }
}