@charset "UTF-8";

/* ==========================================================================
   Dog Salon Puppy - common.css
   biophilia型 1カラム縦スクロール構成（2026-04-15 全面刷新）
   - 命名: .block-element / 状態は .is-*
   - 全てrem / clamp、CSS変数必須
   - BP: 767px（SP）
   ========================================================================== */

/* ==========================================================================
   1. Reset / Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* リキッドコア: 全remがビューポート幅に連動して自動スケール */
html {
  font-size: 62.5%;         /* 1440px以上 → 10px固定 */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 1440px) {
  html {
    font-size: 0.6944vw;    /* 1440→10px、1000→6.94px 線形縮小 */
  }
}

@media (max-width: 767px) {
  html {
    font-size: 2.6667vw;    /* 375→10px、320→8.53px 線形縮小 */
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing), opacity var(--duration-fast) var(--easing);
}

a:hover {
  opacity: 0.75;
}

a:focus-visible,
button:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.3rem;
  border-radius: var(--radius-sm);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Skip link — keyboard only */
.skip-link {
  position: absolute;
  top: -10rem;
  left: 0;
  padding: 0.8rem 1.6rem;
  background: var(--color-text);
  color: var(--color-bg);
  z-index: 999;
}
.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   2. Layout Primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--pad-side-pc);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--pad-side-pc);
}

@media (max-width: 767px) {
  .container,
  .container-narrow {
    padding-inline: var(--pad-side-sp);
  }
}

.section {
  padding-block: var(--section-py-pc);
}

.section-alt {
  background: var(--color-bg-soft);
}

/* 圧縮版 / 拡張版（#6 News・#7 Access・#8 End CTA 用） */
.section-compact {
  padding-block: var(--sp-10);
}

@media (max-width: 767px) {
  .section-compact {
    padding-block: var(--sp-8);
  }
}

/* ==========================================================================
   3. Typography helpers
   ========================================================================== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-2);
}

.section-title {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}

.section-lead {
  font-size: 1.6rem;
  line-height: var(--lh-body);
  color: var(--color-text-sub);
}

.section-head {
  margin-bottom: var(--sp-8);
}

.section-head.is-centered {
  text-align: center;
}

.section-head.is-centered .section-lead {
  margin-inline: auto;
}

/* biophilia 型：英字大見出し + 日本語サブタイトル */
.section-title-en {
  font-family: var(--font-jp-serif);
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04rem;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}

.section-subtitle {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}

@media (max-width: 767px) {
  .section-title-en {
    font-size: 4.2rem;
  }
}

/* ==========================================================================
   4. Buttons / Links
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 5.2rem;
  padding: 1.2rem 3.2rem;
  font-family: var(--font-jp-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  line-height: 1.3;
  border-radius: var(--radius-pill);
  transition: color var(--duration-base) var(--easing);
  text-align: center;
}

.btn:hover {
  opacity: 1;
}

/* Skew sweep overlay — match header pill */
/* z-index: -1 にすることでテキストノード（inline step5）がスウィープより上に来る */
.btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: skew(-20deg) translate3d(-100%, 0, 0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: -1;
}

.btn:hover::before {
  transform: skew(-20deg) translate3d(0, 0, 0);
}

.btn > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border: 0.15rem solid var(--color-accent);
}
.btn-primary::before {
  background: #fff;
}
.btn-primary:hover {
  color: var(--color-accent);
}


.btn-line {
  background: var(--color-line);
  color: #fff;
  border: 0.15rem solid var(--color-line);
}
.btn-line::before {
  background: #fff;
}
.btn-line:hover {
  color: var(--color-line);
}

/* outline: 透明bg＋黒テキスト → 黒スウィープ → 白テキスト（ヘッダーピルと同パターン） */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 0.15rem solid var(--color-text);
}
.btn-outline::before {
  background: var(--color-text);
}
.btn-outline:hover {
  color: #fff;
}

.btn-icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
}

/* External link icon — auto-added to target="_blank" anchors (excluding pills/btn) */
a[target="_blank"]:not(.btn):not(.header-pill):not(.mv-scroll):not(.site-footer-ig-link)::after,
a.btn-primary[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.35rem;
  vertical-align: -0.05rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 4h7v7M12 4L4 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 4h7v7M12 4L4 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  opacity: 0.85;
}

/* text link with arrow — biophilia流「詳しく見る →」 */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  letter-spacing: var(--ls-body);
  padding: 0.4rem 0;
  border-bottom: 0.1rem solid var(--color-text);
  transition: gap var(--duration-base) var(--easing),
              color var(--duration-fast) var(--easing),
              border-color var(--duration-fast) var(--easing);
}

.link-more::after {
  content: "→";
  font-family: var(--font-en);
  transition: transform var(--duration-base) var(--easing);
}

.link-more:hover {
  opacity: 1;
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .link-more,
  .link-more::after {
    transition: none;
  }
}

/* ==========================================================================
   5. Header / Global Nav
   ========================================================================== */
/* Fixed vertical copyright on left edge */
.site-copyright {
  position: fixed;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-jp-serif);
  font-size: 1.4rem;
  letter-spacing: 0.32rem;
  color: var(--color-text);
  z-index: 50;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .site-copyright {
    display: none;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  border-bottom: none;
  z-index: var(--z-header);
  pointer-events: none;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  pointer-events: none;
}

/* ヘッダーロゴ — スクロール前は非表示、後にぴょんっ */
@keyframes header-logo-in {
  0%   { opacity: 0; transform: translateY(-2.4rem) scale(0.85); }
  55%  { opacity: 1; transform: translateY(0.6rem) scale(1.04); }
  75%  { transform: translateY(-0.3rem) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.site-header-logo {
  font-family: var(--font-jp-serif);
  font-size: 3.2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08rem;
  color: var(--color-text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2.4rem) scale(0.85);
  transition: none;
}

.site-header.is-scrolled .site-header-logo {
  pointer-events: auto;
  animation: header-logo-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  pointer-events: auto;
}

/* Header pill (icon + label) — unified for tel / LINE / MENU */
.header-pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1.6rem 0.4rem 0.4rem;
  border-radius: 99rem;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: 1.4rem;
  letter-spacing: 0.08rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.18);
  transition: color 0.4s var(--easing);
}

/* Solid sweep overlay — fully covers including corners, not transparent */
.header-pill::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--color-accent);
  transform: skew(-20deg) translate3d(-100%, 0, 0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: 0;
}

.header-pill:hover::before {
  transform: skew(-20deg) translate3d(0, 0, 0);
}

.header-pill:hover {
  color: var(--color-bg);
  opacity: 1;
}

.header-pill-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  flex-shrink: 0;
  transition: background 0.4s var(--easing),
              color 0.4s var(--easing);
}

.header-pill-icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

.header-pill-text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.header-pill:hover .header-pill-icon {
  background: var(--color-bg);
  color: var(--color-accent);
}

.header-pill:hover .nav-toggle-bars span {
  background: var(--color-accent);
}

/* LINE brand color override */
.header-pill-line {
  background: var(--color-bg);
  color: var(--color-text);
}

.header-pill-line::before {
  background: #06C755;
}

.header-pill-line .header-pill-icon {
  background: #06C755;
  color: #FFFFFF;
}

.header-pill-line:hover {
  color: #FFFFFF;
}

.header-pill-line:hover .header-pill-icon {
  background: #FFFFFF;
  color: #06C755;
}

.header-pill-line:hover .nav-toggle-bars span {
  background: #06C755;
}

/* Hamburger bars inside .header-pill-icon (which is also .nav-toggle-bars) */
.nav-toggle-bars {
  position: relative;
}

/* バーは円の中央に収める（円 4.2rem に対し幅 1.8rem） */
.nav-toggle-bars span {
  position: absolute;
  left: 50%;
  width: 1.8rem;
  margin-left: -0.9rem;
  height: 0.25rem;
  background: var(--color-bg);
  border-radius: 0.2rem;
  transition: transform 0.3s var(--easing),
              opacity 0.2s var(--easing),
              top 0.3s var(--easing),
              background 0.3s var(--easing);
}

.nav-toggle-bars span:nth-child(1) { top: 1.3rem; }
.nav-toggle-bars span:nth-child(2) { top: 50%; margin-top: -0.125rem; }
.nav-toggle-bars span:nth-child(3) { top: auto; bottom: 1.3rem; }

/* × 変形（CSSのみ・JSでSVG差し替えしない） */
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1) {
  top: 50%;
  margin-top: -0.125rem;
  transform: rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3) {
  top: 50%;
  bottom: auto;
  margin-top: -0.125rem;
  transform: rotate(-45deg);
}

.site-logo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-jp-serif);
  font-size: 2.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06rem;
  color: var(--color-text);
  line-height: 1.1;
}

.site-logo-sub {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.16rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.global-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.global-nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.global-nav-list a {
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  padding: 0.6rem 0;
  position: relative;
}

.global-nav-list a[aria-current="page"]::after,
.global-nav-list a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 0.2rem;
  background: var(--color-accent);
}

.global-nav-contact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 0.1rem solid var(--color-border);
}

.global-nav-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  color: var(--color-text-sub);
}

.global-nav-contact svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-accent);
}

/* (legacy .nav-toggle solo button removed — header now uses .header-pill) */

/* Nav drawer (PC: 右1/4パネル + オーバーレイ / SP: 全画面) */
.sp-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(36rem, 28vw);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
  z-index: var(--z-nav);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.4s var(--easing),
              opacity 0.4s var(--easing),
              visibility 0s 0.4s;
  overflow-y: auto;
  padding: var(--sp-10) var(--pad-side-sp) var(--sp-10);
  box-shadow: -1.6rem 0 4rem rgba(0, 0, 0, 0.12);
}

/* オーバーレイ（PCで画面左側を暗く） */
.sp-nav::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: min(36rem, 28vw);
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--easing),
              visibility 0s 0.4s;
  pointer-events: none;
}

.sp-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition: transform 0.4s var(--easing),
              opacity 0.4s var(--easing),
              visibility 0s 0s;
}

.sp-nav.is-open::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--easing),
              visibility 0s 0s;
  pointer-events: auto;
}

/* MENUボタンは常にドロワーより前面（閉じるボタンとして機能させる） */
.nav-toggle {
  position: relative;
  z-index: calc(var(--z-nav) + 10);
}

.sp-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sp-nav-list a {
  display: inline-block;
  margin: 0 auto;
  padding: 1.8rem 0.4rem;
  font-size: 1.8rem;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  border-bottom: 0.1rem solid transparent;
  transition: color var(--duration-fast) var(--easing),
              border-bottom-color var(--duration-fast) var(--easing);
}

.sp-nav-list li {
  text-align: center;
}

.sp-nav-list a:hover,
.sp-nav-list a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  opacity: 1;
}

.sp-nav-list a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.sp-nav-contact {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

@media (prefers-reduced-motion: reduce) {
  .sp-nav {
    transition: none;
  }
}

@media (max-width: 767px) {
  .site-header-inner {
    min-height: var(--header-h-sp);
    padding: 0 var(--pad-side-sp);
  }
  /* ロゴのフォントサイズをSP用に縮小（非表示でもレイアウト空間を消費するため） */
  .site-header-logo {
    font-size: 1.8rem;
  }
  /* スクロール後のロゴ最終状態をSPでも確実に固定（animation不発時の保険） */
  .site-header.is-scrolled .site-header-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* 電話・LINEは画面下固定CTAバーにあるので非表示 */
  .site-header-actions .header-pill:not(.header-pill-menu) {
    display: none;
  }
  /* MENUボタンはSPで必ず表示 + 視認性のため赤ピルに */
  .header-pill-menu {
    display: inline-flex;
    background: var(--color-accent);
    color: #fff;
  }
  .header-pill-menu .header-pill-icon {
    background: #fff;
  }
  .header-pill-menu .nav-toggle-bars span {
    background: var(--color-accent);
  }
  /* MENUテキストはSPで非表示（ハンバーガーアイコンのみ） */
  .header-pill-menu .header-pill-text {
    display: none;
  }
  /* パディングをコンパクトに + メニューより上に配置 */
  .header-pill-menu {
    padding: 0.4rem;
    position: fixed;
    top: 0.8rem;
    right: var(--pad-side-sp);
    z-index: calc(var(--z-nav) + 10);
  }
  /* ヘッダーロゴもメニューより上に */
  .site-header {
    z-index: calc(var(--z-nav) + 5);
  }
  .site-logo {
    font-size: 1.8rem;
  }
  .site-logo-sub {
    display: none;
  }
  .global-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  /* SPではドロワーを全画面 + ふわっとフェード表示 */
  .sp-nav {
    width: 100vw;
    left: 0;
    padding-bottom: calc(var(--sp-cta-h) + var(--sp-5));
    box-shadow: none;
    transform: none;
    transition: opacity 0.4s var(--easing),
                visibility 0s 0.4s;
  }
  .sp-nav.is-open {
    transform: none;
    transition: opacity 0.4s var(--easing),
                visibility 0s 0s;
  }
  .sp-nav::before {
    display: none;
  }
  .sp-nav-list a {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   6. MV Section (text-led hero)
   ========================================================================== */
.mv {
  background: var(--color-bg);
  color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  position: relative;
  text-align: center;
  gap: var(--sp-4);
  overflow: hidden;
}

.mv-bg {
  position: absolute;
  inset: 4rem;
  z-index: 0;
  overflow: hidden;
}

.mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.mv-slide.is-active {
  opacity: 1;
}

.mv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: center center;
}

/* ケンバーンズ: スライドごとに違うズーム+パン */
@media (prefers-reduced-motion: no-preference) {
  .mv-slide:nth-child(1).is-active img {
    animation: kb-1 5500ms ease-out forwards;
  }
  .mv-slide:nth-child(2).is-active img {
    animation: kb-2 5500ms ease-out forwards;
  }
  .mv-slide:nth-child(3).is-active img {
    animation: kb-3 5500ms ease-out forwards;
  }
}

@keyframes kb-1 {
  from { transform: scale(1.08) translateX(1.5%); }
  to   { transform: scale(1.0)  translateX(0); }
}
@keyframes kb-2 {
  from { transform: scale(1.08) translateX(-1.5%); }
  to   { transform: scale(1.0)  translateX(0); }
}
@keyframes kb-3 {
  from { transform: scale(1.08) translateY(1.5%); }
  to   { transform: scale(1.0)  translateY(0); }
}

.mv-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.mv-indicators {
  position: absolute;
  right: 5.6rem;
  bottom: 5.6rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  z-index: 5;
}

.mv-indicator {
  width: 1rem;
  height: 1rem;
  border-radius: 99rem;
  background: transparent;
  border: 0.15rem solid var(--color-bg);
  padding: 0;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.3, 1, 0.8, 1),
              background var(--duration-fast) var(--easing);
}

.mv-indicator.is-active {
  width: 3.6rem;
  background: var(--color-bg);
}

.mv-indicator:hover {
  background: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  .mv-slide { transition: none; }
}

.mv-stage {
  display: none;
}

.mv-blob {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
}

.mv-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mv-blob-1 {
  width: 38rem;
  aspect-ratio: 3 / 4;
  top: 2%;
  left: -3%;
}
.mv-blob-1 img {
  object-position: 38% center;
}

.mv-blob-2 {
  width: 30rem;
  aspect-ratio: 4 / 5;
  top: 4%;
  right: 2%;
}

.mv-blob-3 {
  width: 24rem;
  aspect-ratio: 5 / 6;
  bottom: -8%;
  right: 22%;
  transform: rotate(-6deg);
}

.mv-center {
}

.mv-center {
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  color: var(--color-bg);
}

.mv-center .mv-logo {
  color: var(--color-bg);
  text-shadow: 0 0.2rem 2.0rem rgba(0,0,0,0.3);
}

.mv-center .mv-tag {
  color: var(--color-bg);
  font-style: italic;
  letter-spacing: 0.14rem;
  opacity: 0.95;
}

@media (max-width: 767px) {
  .mv-stage {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .mv-blob-1 { width: 32vw; top: 2%; left: 2%; }
  .mv-blob-2 { width: 32vw; top: 2%; right: 2%; }
  .mv-blob-3 { width: 32vw; bottom: -2%; left: 50%; transform: translateX(-50%) rotate(-3deg); }
}

.mv-logo {
  font-family: var(--font-jp-serif, "Shippori Mincho", serif);
  font-weight: var(--fw-bold);
  font-size: 7.2rem;
  letter-spacing: 0.04rem;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
}

.mv-tag {
  font-size: 2.0rem;
  letter-spacing: 0.18rem;
  color: var(--color-text-sub);
  margin: 0;
}

.mv-scroll {
  position: absolute;
  bottom: 5.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-bg);
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  z-index: 5;
}

.mv-scroll-mouse {
  display: block;
  width: 2.4rem;
  height: 4rem;
  border: 0.15rem solid currentColor;
  border-radius: 99rem;
  position: relative;
}

.mv-scroll-dot {
  position: absolute;
  left: 50%;
  top: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: -0.2rem;
  border-radius: 50%;
  background: currentColor;
  animation: mv-scroll-dot 1.8s ease-in-out infinite;
}

@keyframes mv-scroll-dot {
  0%   { transform: translateY(0);   opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(1.6rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-scroll-dot { animation: none; }
}

/* MV テキスト ページロードアニメーション */
@keyframes mv-char-in {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mv-tag-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* JS実行前にテキストを非表示にしてFOUCを防ぐ */
.mv-logo {
  opacity: 0;
}

/* JS が span.mv-char を生成して animation-delay を付与する */
.mv-char {
  display: inline-block;
  opacity: 0;
  animation: mv-char-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* tagline はロゴ完了後にフェードアップ */
.mv-tag {
  opacity: 0;
  animation: mv-tag-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  .mv-char { animation: none; opacity: 1; }
  .mv-tag  { animation: none; opacity: 1; }
}

.mv-legacy-unused {
  padding-block: 11.2rem 12.8rem;
  background: var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}

.mv-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--pad-side-pc);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6.4rem;
  align-items: center;
}

.mv-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.mv-eyebrow {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.mv-title {
  font-family: var(--font-jp-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0.04rem;
  color: var(--color-text);
}

.mv-title-small {
  display: block;
  font-size: 2.64rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
  margin-top: 0.6rem;
  letter-spacing: 0.1rem;
}

.mv-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text-sub);
}

.mv-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.mv-visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #E8E4DE 0%, #D9D4CC 100%);
  border-radius: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-muted);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .mv {
    padding: var(--sp-1);
  }
  .mv-bg {
    inset: var(--sp-1);
  }
  .mv-logo {
    font-size: 5.0rem;
    max-width: 100%;
  }
  .mv-scroll {
    bottom: var(--sp-8);
  }
  .mv-inner {
    grid-template-columns: 1fr;
    padding-inline: var(--pad-side-sp);
  }
  .mv-visual {
    aspect-ratio: 4 / 3;
    order: -1;
  }
}

/* ==========================================================================
   7. #1 IG Alert Section — 薄赤帯 / narrow / 左3px 赤バー
   ========================================================================== */
.ig-alert {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-4);
  padding-inline: var(--pad-side-pc);
  background: transparent;
}

/* コンテナ内で使うinline版（セクション内に配置する場合） */
.ig-alert--inline {
  padding: 0;
  margin-top: var(--sp-8);
}

/* 白背景・赤罫線版 */
.ig-alert--bordered {
  padding: 0;
  margin-top: var(--sp-4);
  background: #fff;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.ig-alert--bordered .ig-alert-inner {
  display: block;
  padding: var(--sp-6) var(--sp-5);
  background: transparent;
}

.ig-alert--bordered .ig-alert-title {
  margin-bottom: var(--sp-4);
}

.ig-alert--bordered .c-list li {
  padding-left: 2rem;
}

.ig-alert--bordered .c-list--check li::before {
  left: 0;
  top: 0.6em;
  transform: rotate(-45deg);
}
.ig-alert--inline .ig-alert-inner {
  max-width: none;
}

.ig-alert-inner {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: var(--color-accent-soft);
  border-radius: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  position: relative;
}

.ig-alert-label {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 0.4rem;
  font-family: var(--font-jp-serif);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.ig-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

.ig-alert-icon svg {
  width: 2.8rem;
  height: 2.8rem;
}

.ig-alert-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ig-alert-title {
  font-family: var(--font-jp-serif);
  font-size: 2.0rem;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  letter-spacing: var(--ls-heading);
  line-height: 1.5;
  margin: 0;
}

.ig-alert-desc {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

@media (max-width: 767px) {
  .ig-alert {
    padding-block: var(--sp-3);
  }
  .ig-alert-label {
    position: static;
    align-self: center;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .ig-alert-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--pad-side-sp);
  }
  .ig-alert--bordered .ig-alert-inner {
    padding: var(--sp-2) var(--sp-3);
  }
  .ig-alert--bordered .ig-alert-title::before {
    display: none;
  }
  .ig-alert-icon {
    display: none;
  }
  .ig-alert-title {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    word-break: break-word;
  }
  .ig-alert-title::before {
    content: '';
    display: inline-block;
    width: 2.0rem;
    height: 2.0rem;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23EF454A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
  }
  .ig-alert-inner .btn {
    align-self: flex-start;
  }
}

/* ==========================================================================
   8. #2 Feature Section — 2カラム（左: スナップ画像 / 右: カードリスト）
   ========================================================================== */
.section-feature {
  background: var(--color-bg);
}

/* 2カラムグリッド */
.feature-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

/* 左: スナップ写真風2枚重ね */
.feature-images {
  position: relative;
  height: 54rem;
}

.feature-images::before {
  content: '';
  position: absolute;
  top: 9.4rem;
  left: -100vw;
  right: 8.6rem;
  bottom: 6rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  z-index: 0;
}

/* ブロークングリッドあしらいバリエーション
   ─ 四角の位置・サイズを変えて、画像2カラム+あしらい四角の配置をずらせる。
   ─ 単体使用: .feature-images--tr / --br / --tl / --bl
   ─ サイズ: .feature-images--sq-sm / --sq-lg を併用可
   ─ 追加の小四角（::after）: .feature-images--sq-dual
*/

/* ── 四角位置の上書き（::before） ── */

/* 右上ずらし（bleedを右に） */
.feature-images--tr::before {
  top: -2.4rem;
  left: 8.6rem;
  right: -100vw;
  bottom: 12rem;
}

/* 右下ずらし（bleedを右に・下寄り） */
.feature-images--br::before {
  top: 12rem;
  left: 8.6rem;
  right: -100vw;
  bottom: -2.4rem;
}

/* 左上ずらし（bleedを左に・上寄り） */
.feature-images--tl::before {
  top: -2.4rem;
  left: -100vw;
  right: 8.6rem;
  bottom: 12rem;
}

/* 左下ずらし（bleedを左に・下寄り、デフォルトに近いがより下） */
.feature-images--bl::before {
  top: 12rem;
  left: -100vw;
  right: 8.6rem;
  bottom: -2.4rem;
}

/* ── 四角サイズの上書き ── */

/* 小さめ（bleedせず内側にコンパクト） */
.feature-images--sq-sm::before {
  top: 14rem;
  left: 6rem;
  right: 14rem;
  bottom: 10rem;
}

/* 大きめ（bleedを両側・広め） */
.feature-images--sq-lg::before {
  top: 4rem;
  left: -100vw;
  right: -4rem;
  bottom: 2rem;
}

/* ── 追加小四角（::after） ── */

/* 対角位置にもう1枚、別カラーの小四角を配置（真のブロークングリッド感） */
.feature-images--sq-dual::after {
  content: '';
  position: absolute;
  width: 16rem;
  height: 16rem;
  background: var(--color-accent-bg);
  border-radius: var(--radius-md);
  z-index: 0;
  top: 0;
  right: -4rem;
}

.feature-images--sq-dual.feature-images--br::after {
  top: auto;
  bottom: -2rem;
  right: auto;
  left: -4rem;
  background: var(--color-accent-soft);
}

.feature-images--sq-dual.feature-images--tr::after {
  top: auto;
  bottom: 0;
  right: auto;
  left: -4rem;
  background: var(--color-accent-soft);
}

.feature-img {
  position: absolute;
  width: 64%;
  height: 38rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-img--back {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  z-index: 1;
}

.feature-img--front {
  bottom: 0;
  right: 0;
  transform: rotate(3deg);
  z-index: 2;
}

/* 右: 見出し + リード */
.feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 下段: 3カラムカード（段落ち） */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* カード: 薄いベージュ背景 */
.feature-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
}

/* カード内: タグ上・見出し下 縦並び */
.feature-item-header {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2.0rem;
}

/* タグ風数字バッジ（明朝・赤背景・ピル） */
.feature-item-num {
  align-self: flex-start;
}

.feature-item-title {
  font-family: var(--font-jp-serif);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.feature-item-desc {
  font-size: 1.4rem;
  line-height: var(--lh-body);
  color: var(--color-text-sub);
}

/* ボタン群: カード下に配置 */
.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-6);
}

@media (max-width: 767px) {
  .section-feature .section-head {
    margin-bottom: var(--sp-4);
  }
  .feature-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .feature-images {
    height: 40rem;
  }
  /* SP時はbleedを抑えてコンテナ内に収める（横スクロール防止） */
  .feature-images--tr::before,
  .feature-images--br::before,
  .feature-images--sq-lg::before {
    right: -2rem;
  }
  .feature-images--tl::before,
  .feature-images--bl::before {
    left: -2rem;
  }
  /* SP時はサブ四角も画面内に収める */
  .feature-images--sq-dual::after {
    width: 10rem;
    height: 10rem;
    right: -1rem;
  }
  .feature-images--sq-dual.feature-images--br::after,
  .feature-images--sq-dual.feature-images--tr::after {
    left: -1rem;
  }
  .feature-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }
  .feature-item {
    padding: var(--sp-3) var(--sp-2);
  }
  .feature-item-title {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   9. #3 Service Section — 背景画像 + カードオーバーラップ
   ========================================================================== */

.section-service {
  background: var(--color-bg-soft);
  padding-bottom: var(--section-py-pc);
}

/* ヒーロー: 背景画像エリア */
.service-hero {
  position: relative;
  height: 52rem;
}

.service-hero-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
}

.service-hero-img img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* 暗めグラデオーバーレイ */
.service-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
}

/* 見出し + リード */
.service-hero-body {
  position: absolute;
  top: var(--sp-6);
  left: 0;
  right: 0;
  z-index: 2;
}

/* ヒーロー内テキストは白 */
.service-title-en {
  color: #fff !important;
  text-shadow: 0 0.2rem 1.6rem rgba(0,0,0,0.3);
}

.service-subtitle {
  color: rgba(255,255,255,0.9) !important;
}

.service-lead {
  color: rgba(255,255,255,0.8) !important;
}

/* カードエリア: 画像の下半分に重なる */
.service-cards-wrap {
  position: relative;
  z-index: 2;
  margin-top: -24rem;
  padding-top: var(--sp-6);
}

/* 3カラム */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* 各カード */
.service-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--easing);
}

.service-card:hover .service-card-img img {
  transform: scale(1.04);
}

.service-card-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 1.0rem;
  flex: 1;
}

.service-card-num {
  align-self: flex-start;
}

.service-card-title {
  font-family: var(--font-jp-serif);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin: 0;
}

.service-card-desc {
  font-size: 1.4rem;
  line-height: var(--lh-body);
  color: var(--color-text-sub);
  margin: 0;
}

.service-card-btn {
  margin-top: auto;
  align-self: flex-start;
  min-height: auto;
  font-size: 1.3rem;
  padding: 0.7rem 1.6rem;
}

@media (max-width: 767px) {
  .service-hero {
    height: 40rem;
  }
  .service-hero-body {
    top: var(--sp-8);
  }
  .service-cards-wrap {
    margin-top: -12rem;
  }
  .service-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .section-service {
    padding-bottom: var(--section-py-pc);
  }
}

/* ==========================================================================
   10. #4 Works Section — 白・8タイル 1:1
   ========================================================================== */
/* ::before の right:-100vw が右にはみ出すので section レベルでクリップ */
.section-works {
  overflow: hidden;
}

/* 左テキスト + 右グリッドの2カラム */
.works-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-10);
  align-items: start;
}

.works-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  align-items: flex-start;
}

/* section-title-en / section-subtitle のマージンをworks内で上書き */
.works-text .section-title-en {
  margin-bottom: 1.0rem;
}

.works-text .section-subtitle {
  margin-bottom: 1.2rem;
}

.works-text .section-lead {
  margin-bottom: 0;
}

.works-more {
  margin-top: var(--sp-4);
  text-align: left;
}

/* ずらし背景ラッパー */
.works-grid-wrap {
  position: relative;
  padding-bottom: 2.4rem;
}

/* グリッドの右にブリードするずらし背景 */
.works-grid-wrap::before {
  content: '';
  position: absolute;
  top: 9.4rem;
  left: 8.6rem;
  right: -100vw;
  bottom: -1rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  z-index: 0;
}

.works-grid-wrap .works-grid {
  position: relative;
  z-index: 1;
}

/* 4列×2行グリッド（8枚均等） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
}

.works-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-muted);
}

.works-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--easing);
}

.works-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(239, 69, 74, 0);
  transition: background var(--duration-base) var(--easing);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .works-item:hover img {
    transform: scale(1.03);
  }
  .works-item:hover::after {
    background: rgba(239, 69, 74, 0.06);
  }
}

.works-more {
  margin-top: var(--sp-8);
  text-align: center;
}

@media (max-width: 767px) {
  .works-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .works-text {
    position: static;
  }
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
  .works-more {
    text-align: center;
  }
}

/* ==========================================================================
   11. #5 About Section — 2カラム（左: テキスト / 右: 受賞カード）
   ========================================================================== */

/* 2カラムレイアウト */
.about-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

/* 上段：見出し + リード + ボタン（中央寄せ） */
.about-head-wrap {
  text-align: center;
  width: 100%;
}

.about-head-wrap .section-head {
  margin-bottom: var(--sp-4);
}

.about-lead {
  font-size: 1.6rem;
  line-height: var(--lh-body);
  color: var(--color-text-sub);
  margin-bottom: var(--sp-5);
}

.about-btn-wrap {
  display: flex;
  justify-content: center;
}

/* 下段：受賞カード3カラムグリッド */
.awards-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
  margin: 0;
  width: 100%;
}

/* 受賞カード（縦積みレイアウト） */
.award-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-3);
}

.award-crown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  flex-shrink: 0;
}

.award-crown svg {
  width: 2.8rem;
  height: 2.2rem;
}

.award-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.award-year {
  font-family: var(--font-en); /* award-yearのみ欧文フォント */
  align-self: center;
}

.award-name {
  font-family: var(--font-jp-serif);
  font-size: 2.0rem;
  line-height: 1.6;
  color: var(--color-text);
  font-weight: var(--fw-bold);
}


@media (max-width: 767px) {
  .awards-list {
    grid-template-columns: 1fr;
  }
  .award-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-3) var(--sp-4);
  }
  .award-year {
    align-self: center;
  }
}

/* ==========================================================================
   12. #6 News Section — Instagram フィード（全幅・中央3枚＋左右見切れ）
   ========================================================================== */

.section-news {
  overflow: hidden;
}

/* 背景ブロック＋グリッドの相対コンテナ */
.ig-feed-area {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) 0;
  margin-bottom: var(--sp-8);
}

/* 中央に敷く背景色ブロック（3枚分の幅・上下はpaddingで広げる） */
.ig-feed-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(60vw - 1.6rem);
  background: var(--color-accent-soft);
  z-index: 0;
}

/* 5枚横並び・左右見切れ＋横スクロール可能 */
.ig-feed-grid {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: 12.5vw;
}

.ig-feed-grid::-webkit-scrollbar {
  display: none;
}

.ig-feed-card {
  position: relative;
  flex: 0 0 calc(25vw - 0.8rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-muted);
  scroll-snap-align: center;
}

.ig-feed-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--easing);
}

.ig-feed-card:hover {
  opacity: 1;
}

.ig-feed-card:hover img {
  transform: scale(1.05);
}


/* ホバーオーバーレイ（Instagramアイコン） */
.ig-feed-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing);
}

.ig-feed-card:hover .ig-feed-hover {
  opacity: 1;
}

.ig-feed-hover svg {
  width: 4.0rem;
  height: 4.0rem;
}

/* 右下Viewボタン */
.ig-feed-view {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  padding: 0.4rem 1.0rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08rem;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.news-more {
  display: flex;
  justify-content: center;
}

/* news page: 4-column grid */
.ig-news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 767px) {
  .ig-news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .section-news .section-head {
    margin-bottom: var(--sp-4);
  }
  .ig-feed-bg {
    width: 90vw;
  }
  .ig-feed-grid {
    flex-wrap: nowrap;
    gap: 0.8rem;
    justify-content: flex-start;
    padding-inline: 15vw;
  }
  .ig-feed-grid .ig-feed-card {
    flex: 0 0 70vw;
  }
}

/* ==========================================================================
   Shop Info 2カラム（PC: テーブル左 / 外観画像右）
   ========================================================================== */
.shopinfo-cols {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.shop-exterior {
  border-radius: 0.8rem;
  overflow: hidden;
  margin: 0;
}

.shop-exterior img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width: 768px) {
  .shopinfo-cols {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-8);
  }

  .shopinfo-col-table {
    flex: 1 1 0;
    min-width: 0;
  }

  .shopinfo-col-img {
    flex: 0 0 40%;
    max-width: 40%;
  }
}

/* ==========================================================================
   13. #7 Access Section — オフ白 / 2カラム（左テキスト+ボタン / 右地図）
   ========================================================================== */
.section-access .section-head {
  margin-bottom: var(--sp-4);
}

.access-wrap {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 6.4rem;
  align-items: stretch;
}

.access-info-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.access-info-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-6);
}

.access-info-row {
  display: block;
  padding: 0 0 var(--sp-2) 0;
}

.access-info-term {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-text-sub);
  letter-spacing: var(--ls-body);
  margin-bottom: 0.4rem;
  padding-top: 0.2rem;
}

.access-info-desc {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.7;
}

.access-info-note {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

.access-tel {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  font-size: 2.0rem;
  letter-spacing: 0.04rem;
}

.access-tel:hover {
  text-decoration: underline;
  opacity: 1;
}

.access-btn-wrap {
  margin-top: auto;
}

.access-map {
  min-height: 36rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-muted);
  border: 0.1rem solid var(--color-border);
}

.access-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  .access-wrap {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .access-btn-wrap {
    text-align: center;
  }
  .access-map {
    min-height: 28rem;
  }
}

/* ==========================================================================
   14. #8 End CTA Section — フルブリード薄赤 / 大型ピル2本
   ========================================================================== */
.end-cta {
  background-color: #FAF5EE;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(210, 180, 140, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 70%, rgba(200, 170, 130, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 10%, rgba(230, 205, 175, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 30% 90%, rgba(220, 190, 155, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 35% 35% at 70% 40%, rgba(200, 175, 145, 0.10) 0%, transparent 45%);
  padding-block: var(--sp-6);
}

/* ボックスカード */
.end-cta-box {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* CTA独自見出し */
.cta-heading {
  margin-bottom: var(--sp-8);
  text-align: center;
}

/* ─── Reservation ─── デコライン */
.cta-heading-en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-4);
}

.cta-heading-en::before,
.cta-heading-en::after {
  content: '';
  display: block;
  width: 4.0rem;
  height: 0.1rem;
  background: var(--color-accent);
  opacity: 0.6;
  flex-shrink: 0;
}

.cta-heading-ja {
  font-family: var(--font-jp-serif);
  font-size: 4.0rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1rem;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}

.cta-heading-lead {
  font-size: var(--fs-lead);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
}

.end-cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  width: 100%;
}

.end-cta-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 8.0rem;
  padding: 1.6rem 3.2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-jp-sans);
  transition: color var(--duration-base) var(--easing);
}

.end-cta-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: skew(-20deg) translate3d(-100%, 0, 0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: -1;
}

.end-cta-btn:hover::before {
  transform: skew(-20deg) translate3d(0, 0, 0);
}

.end-cta-btn:hover {
  opacity: 1;
}

.end-cta-btn > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .end-cta-btn::before { transition: none; }
}

.end-cta-btn-phone {
  background: #fff;
  color: var(--color-accent);
  border: 0.2rem solid var(--color-accent);
}
.end-cta-btn-phone::before {
  background: var(--color-accent);
}
.end-cta-btn-phone:hover {
  color: #fff;
}

.end-cta-btn-line {
  background: var(--color-line, #06C755);
  color: #fff;
  border: 0.2rem solid var(--color-line, #06C755);
}
.end-cta-btn-line::before {
  background: #fff;
}
.end-cta-btn-line:hover {
  color: var(--color-line, #06C755);
}

.end-cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.end-cta-btn-icon svg {
  width: 2.4rem;
  height: 2.4rem;
}

.end-cta-btn-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.end-cta-btn-label {
  font-size: 1.2rem;
  letter-spacing: var(--ls-body);
  opacity: 0.9;
}

.end-cta-btn-main {
  font-size: 2.0rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04rem;
}

.end-cta-note {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}


@media (max-width: 767px) {
  .end-cta {
    padding-block: var(--sp-4);
  }
  .end-cta-box {
    padding: var(--sp-6) var(--pad-side-sp);
  }
  .end-cta-inner {
    padding-inline: var(--pad-side-sp);
  }
  .end-cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .end-cta-btn {
    width: 100%;
    min-width: 0;
    min-height: 7.2rem;
  }
  .end-cta-btn-main {
    font-size: 1.8rem;
  }
  .cta-heading-ja {
    font-size: 3.2rem;
  }
  .cta-heading {
    margin-bottom: var(--sp-4);
  }
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: 8rem 6rem;
}

.site-footer-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--pad-side-pc);
}

/* ボディ: ロゴ左・ナビ右 */
.site-footer-body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16rem;
}

/* 左: ブランド列 */
.site-footer-brand-col {
  flex-shrink: 0;
  max-width: 48rem;
}

.site-footer-brand {
  font-family: var(--font-jp-serif);
  font-size: 3.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06rem;
  color: #fff;
  margin-bottom: var(--sp-5);
}

/* 住所行 */
.site-footer-address-row {}

.site-footer-address {
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--color-footer-text);
  margin-bottom: var(--sp-2);
}

.site-footer-address a {
  color: var(--color-footer-text);
}

.site-footer-address a:hover {
  color: #fff;
  opacity: 1;
}

.site-footer-license {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04rem;
}

/* Instagramアイコン */
.site-footer-ig-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.0rem;
  height: 4.0rem;
  background: #fff;
  border-radius: 50%;
  color: var(--color-footer-bg);
  transition: opacity var(--duration-base);
}

.site-footer-ig-link svg {
  width: 1.8rem;
  height: 1.8rem;
}

.site-footer-ig-link:hover {
  opacity: 0.8;
}

/* 右エリア: ナビ + 住所をまとめるラッパー */
.site-footer-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1;
}

/* 右: ナビ3列 */
.site-footer-nav {
  display: flex;
  gap: 6rem;
  align-items: flex-start;
  flex-shrink: 0;
}

.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.site-footer-list a {
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--color-footer-text);
  letter-spacing: 0.03rem;
  white-space: nowrap;
}

.site-footer-list a:hover {
  color: #fff;
  opacity: 1;
}

/* SP専用改行：PCではbr非表示、SPで有効化 */
.br-sp { display: none; }

@media (max-width: 767px) {
  .site-footer {
    padding-block: 6rem calc(var(--sp-cta-h) + var(--sp-6));
  }
  .site-footer-inner {
    padding-inline: var(--pad-side-sp);
  }
  .site-footer-body {
    flex-direction: column;
    gap: var(--sp-8);
  }
  .site-footer-brand-col {
    max-width: none;
    text-align: center;
    margin: 0 auto;
  }
  .site-footer-brand {
    font-size: 2.8rem;
  }
  /* ナビは全リンク統合の縦1列フラットリストに */
  .site-footer-nav {
    flex-direction: column;
    gap: 0;
  }
  .site-footer-list {
    gap: 0;
  }
  .site-footer-list a {
    white-space: normal;
    overflow-wrap: anywhere;
    display: block;
    padding: 1.4rem 0;
  }
  /* 住所：<br class="br-sp">で改行 + 長い英数字の溢れ防止 */
  .site-footer-address {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .br-sp { display: block; }
}

/* ==========================================================================
   15. SP Fixed Bottom CTA Bar
   ========================================================================== */
.sp-cta-bar {
  display: none;
}

@media (max-width: 767px) {
  .sp-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sp-cta-h);
    z-index: var(--z-fab);
    background: var(--color-bg);
    border-top: 0.1rem solid var(--color-border);
    box-shadow: 0 -0.4rem 1.2rem rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.35s var(--easing);
  }
  .sp-cta-bar.is-visible {
    transform: translateY(0);
  }

  .sp-cta-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 100%;
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    color: #fff;
    letter-spacing: 0.06rem;
  }

  .sp-cta-bar a:hover {
    opacity: 1;
  }

  .sp-cta-bar .sp-cta-phone {
    background: var(--color-accent);
  }

  .sp-cta-bar .sp-cta-line {
    background: var(--color-line);
  }

  .sp-cta-bar svg {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   16. Fade-up animation (IntersectionObserver 用)
   ========================================================================== */
.fadeup {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
  will-change: opacity, transform;
}

.fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fadeup {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── A. フェードアップ（汎用） ── */
.anim-fadeup {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
  will-change: opacity, transform;
}
.anim-fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── B. スタガーグループ ── */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(2.0rem);
  transition: opacity 0.6s var(--easing), transform 0.6s var(--easing);
  will-change: opacity, transform;
}
.anim-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.anim-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.anim-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.anim-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.anim-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.anim-stagger.is-visible > *:nth-child(n+5) { transition-delay: 0.3s; }

/* ── C. フェードのみ（帯状要素用） ── */
.anim-fade {
  opacity: 0;
  transition: opacity 0.6s var(--easing);
  will-change: opacity;
}
.anim-fade.is-visible {
  opacity: 1;
}

/* ── 遅延バリアント ── */
.anim-delay-1 { transition-delay: 0.15s; }
.anim-delay-2 { transition-delay: 0.30s; }

/* ── prefers-reduced-motion: 全て即表示 ── */
@media (prefers-reduced-motion: reduce) {
  .anim-fadeup,
  .anim-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .anim-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   18. Components（下層ページ共通）
   ========================================================================== */

/* ── 18-0. c-tag（赤タグラベル共通） ── */
.c-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.0rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-jp-sans);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  line-height: 1;
}

/* ── 18-1. Table ── */
.c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* SP: 右端にスクロールヒント（巻物風グラデーション） */
@media (max-width: 767px) {
  .c-table-wrap {
    background:
      linear-gradient(to right, var(--color-bg) 3rem, transparent),
      linear-gradient(to left, var(--color-bg) 3rem, transparent),
      linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent 3rem),
      linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent 3rem);
    background-position: left, right, left, right;
    background-size: 4rem 100%, 4rem 100%, 4rem 100%, 4rem 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

.c-table {
  width: 100%;
  min-width: 60rem;
  border-collapse: collapse;
}

.c-table caption {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  margin-bottom: var(--sp-1);
}

.c-table th {
  background: var(--color-bg-soft);
  text-align: left;
  font-weight: var(--fw-bold);
  padding: 1.2rem 1.6rem;
  white-space: nowrap;
}

.c-table td {
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--color-border);
  white-space: nowrap;
}

/* 左ヘッドバリエーション: 1列目がヘッダー */
.c-table--side-head th {
  background: var(--color-bg-soft);
  white-space: nowrap;
  vertical-align: top;
  border-bottom: 0.1rem solid var(--color-border);
}

/* 2カラム 1:3比率（ペットホテル料金等） */
.c-table--simple {
  min-width: auto;
}

.c-table--simple th {
  width: 25%;
  background: var(--color-bg-soft);
  vertical-align: middle;
  border-bottom: 0.1rem solid var(--color-border);
}

.c-table--simple td {
  width: 75%;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .c-table--simple th {
    width: 40%;
  }
  .c-table--simple td {
    width: 60%;
  }
}

/* ── 18-2. Box ── */
.c-box {
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  border: 0.1rem solid var(--color-border);
}

.c-box-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  margin-bottom: var(--sp-2);
}

.c-box-desc {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
}

.c-box--accent {
  border: 0.1rem solid var(--color-accent);
  background: var(--color-accent-soft);
}

.c-box--outline {
  background: var(--color-bg);
  border: 0.1rem solid var(--color-border);
}

/* ── 18-3. Image Card ── */
.c-img-card {
  background: var(--color-bg);
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--easing);
}

.c-img-card:hover {
  box-shadow: var(--shadow-md);
}

.c-img-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-muted);
}

.c-img-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing);
}

.c-img-card:hover .c-img-card-img img {
  transform: scale(1.04);
}

.c-img-card-body {
  padding: var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

.c-img-card-title {
  font-family: var(--font-jp-serif);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.c-img-card-desc {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
}

/* ── 18-4. Accordion ── */
.c-accordion-item {
  border-bottom: 0.1rem solid var(--color-border);
}

.c-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.6rem 0;
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}

.c-accordion-trigger::-webkit-details-marker {
  display: none;
}

.c-accordion-trigger::marker {
  display: none;
}

.c-accordion-trigger::after {
  content: "+";
  flex-shrink: 0;
  margin-left: var(--sp-2);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-text-sub);
  transition: transform var(--duration-base) var(--easing);
}

[open] > .c-accordion-trigger::after {
  content: "+";
  transform: rotate(45deg);
}

@keyframes accordion-slide-in {
  from {
    opacity: 0;
    transform: translateY(-0.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c-accordion-body {
  color: var(--color-text-sub);
  padding: 0 0 1.6rem;
}

[open] > .c-accordion-body {
  animation: accordion-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 18-4. Modal ── */
.c-modal {
  max-width: 90vw;
  max-height: 90vh;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.3s var(--easing),
              transform 0.3s var(--easing),
              display 0.3s allow-discrete,
              overlay 0.3s allow-discrete;
}

.c-modal[open] {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .c-modal[open] {
    opacity: 0;
    transform: translateY(1.6rem);
  }
}

.c-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s var(--easing),
              display 0.3s allow-discrete,
              overlay 0.3s allow-discrete;
}

.c-modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .c-modal[open]::backdrop {
    opacity: 0;
  }
}

.c-modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-muted);
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--easing);
}

.c-modal-close:hover {
  background: var(--color-border);
}

.c-modal-body {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .c-modal,
  .c-modal::backdrop {
    transition: none;
  }
  .c-accordion-trigger::after {
    transition: none;
  }
  [open] > .c-accordion-body {
    animation: none;
  }
}

/* ── 18-5. List ── */
.c-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.c-list li {
  padding-left: 2rem;
  position: relative;
  line-height: var(--lh-body);
}

/* disc */
.c-list--disc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* check */
.c-list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.8rem;
  height: 0.5rem;
  border-left: 0.2rem solid var(--color-accent);
  border-bottom: 0.2rem solid var(--color-accent);
  transform: translateY(-50%) rotate(-45deg);
}

/* num */
.c-list--num {
  counter-reset: c-list-counter;
}

.c-list--num li {
  counter-increment: c-list-counter;
}

.c-list--num li::before {
  content: counter(c-list-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

/* ── 18 SP対応 ── */
@media (max-width: 767px) {
  /* テーブル: セル余白を詰め、左ヘッドのnowrap解除 */
  .c-table th,
  .c-table td {
    padding: 1.0rem 1.2rem;
  }
  .c-table--side-head th {
    white-space: normal;
  }

  /* ボックス: 余白を詰める */
  .c-box {
    padding: var(--sp-3);
  }

  /* アコーディオン: タッチ領域確保 */
  .c-accordion-trigger {
    padding: var(--sp-3) 0;
  }

  /* モーダル: 余白を詰める */
  .c-modal {
    padding: var(--sp-4);
    max-width: 95vw;
  }
}

/* ── 18-6. Text Link ── */
.c-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  transition: text-decoration-color var(--duration-fast) var(--easing);
}

.c-link:hover {
  text-decoration-color: transparent;
  opacity: 1;
}

.c-link--external::after {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.35rem;
  vertical-align: -0.05rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 4h7v7M12 4L4 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 4h7v7M12 4L4 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  opacity: 0.85;
}

/* ==========================================================================
   17. Utilities
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.br-pc { display: inline; }
@media (max-width: 767px) {
  .br-pc { display: none; }
}

.text-center { text-align: center; }

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

/* ==========================================================================
   19. Sub Section Head — 下層ページ用セクション見出し
   ========================================================================== */

.sub-head {
  margin-bottom: var(--sp-6);
}

.sub-head--center {
  text-align: center;
}

.sub-head-en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-1);
}

.sub-head-title {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}

.sub-head-title + .section-lead {
  margin-top: var(--sp-3);
}

@media (max-width: 767px) {
  .sub-head-title { font-size: var(--fs-h3); }
}

/* ==========================================================================
   20. Sub Page Hero — 下層ページ共通ヘッダーバナー
   ========================================================================== */

.page-hero {
  padding-top: calc(var(--header-h-pc) + var(--sp-3));
  padding-bottom: calc(var(--header-h-pc) + var(--sp-3));
  background: var(--color-bg-soft);
  text-align: center;
}

.page-hero-en {
  font-family: var(--font-jp-serif);
  font-size: 7.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.page-hero-title {
  font-family: var(--font-jp-sans);
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  color: var(--color-text-sub);
}

.page-hero-lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
}

@media (max-width: 767px) {
  .page-hero {
    padding-top: calc(var(--header-h-sp) + var(--sp-2));
    padding-bottom: calc(var(--header-h-sp) + var(--sp-2));
  }
  .page-hero-en {
    font-size: 4.8rem;
  }
  .page-hero-title {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   20. Notes Grid — 料金ページ ご利用にあたって 3カラム
   ========================================================================== */

.section-anchor-nav {
  padding-top: var(--sp-6);
  padding-bottom: 0;
}

.section-anchor-nav-box {
  background: #F5F0EA;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  align-items: center;
}

.section-anchor-nav-heading {
  font-family: var(--font-en);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-sub);
  padding-right: var(--sp-5);
  border-right: 0.1rem solid var(--color-border);
  white-space: nowrap;
  line-height: 1.3;
}

.section-anchor-nav-heading small {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: var(--fw-normal);
  color: var(--color-text-sub);
  margin-top: 0.2rem;
}

.section-anchor-nav-box .c-anchor-nav {
  padding-left: var(--sp-5);
}

@media (max-width: 767px) {
  .section-anchor-nav-box {
    grid-template-columns: 1fr;
    padding: var(--sp-3) var(--sp-2);
  }

  .section-anchor-nav-heading {
    padding-right: 0;
    padding-bottom: var(--sp-2);
    border-right: none;
    border-bottom: none;
  }

  .section-anchor-nav-box .c-anchor-nav {
    padding-left: 0;
    padding-top: 0;
  }
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 767px) {
  .notes-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   21. Option Grid — 料金ページ オプション一覧
   ========================================================================== */

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.option-card {
  background: var(--color-bg);
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--easing);
}

.option-card:hover {
  box-shadow: var(--shadow-md);
}

.option-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-muted);
}

.option-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing);
}

.option-card:hover .option-card-img img {
  transform: scale(1.04);
}

.option-card-img-empty {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.option-card-body {
  padding: var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.option-card-name {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.option-card-price {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.option-card-desc {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
  margin-top: var(--sp-1);
}

.option-card-note {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  color: var(--color-text-sub);
  margin-top: 0.2em;
}

.option-card-sub {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  color: var(--color-text-sub);
}


@media (max-width: 767px) {
  .option-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* ==========================================================================
   21. Step List — ペットホテル ご利用の流れ
   ========================================================================== */

.step-list {
  display: flex;
  flex-direction: column;
}

.step-item {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  position: relative;
}

.step-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 2.8rem;
  top: 5.6rem;
  bottom: 0;
  width: 0.2rem;
  background: var(--color-border);
  transform: translateX(-50%);
}

.step-num {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.step-body {
  padding-top: 1.2rem;
}

.step-title {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-1);
}

.step-desc {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
}

/* ==========================================================================
   22. Facility Gallery — ペットホテル 施設写真
   ========================================================================== */

.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.facility-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-muted);
}

.facility-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing);
}

.facility-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 767px) {
  .facility-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   23. Hotel Gallery + Flow — ペットホテル専用
   ========================================================================== */

.hotel-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.hotel-gallery-item {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-muted);
  aspect-ratio: 1 / 1;
}

.hotel-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing);
}

.hotel-gallery-item:hover img {
  transform: scale(1.04);
}

.hotel-gallery--3col {
  grid-template-columns: repeat(3, 1fr);
}

.hotel-gallery--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .hotel-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .hotel-gallery--3col {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ── c-flow（横並びフローコンポーネント） ── */
.c-flow {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-flow-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: var(--sp-3);
  background: #F5F0EA;
  border-radius: var(--radius-md);
}

.c-flow-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 0.9rem solid var(--color-accent);
  transform: translate(50%, -50%);
  z-index: 2;
}

.c-flow-item:last-child::after {
  display: none;
}


.c-flow-num {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.c-flow-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
}

.c-flow-num.c-tag {
  color: #fff;
  font-size: 1.1rem;
}

.c-flow-title {
  font-family: var(--font-jp-serif);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.c-flow-desc {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  line-height: var(--lh-body);
}

@media (max-width: 767px) {
  .c-flow {
    flex-direction: column;
    gap: var(--sp-6);
  }
  .c-flow-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-2);
    row-gap: var(--sp-2);
    padding: var(--sp-4);
    text-align: left;
    border-bottom: none;
  }
  .c-flow-item:last-child {
    border-bottom: none;
  }
  .c-flow-body {
    display: contents;
  }
  .c-flow-num {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.1rem;
    width: auto;
    flex-shrink: unset;
    margin-bottom: 0;
    align-self: center;
  }
  .c-flow-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: left;
  }
  .c-flow-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }
  .c-flow-item::after {
    top: auto;
    bottom: calc(-1 * var(--sp-6) / 2);
    left: 50%;
    right: auto;
    border-left: 0.7rem solid transparent;
    border-right: 0.7rem solid transparent;
    border-top: 0.9rem solid var(--color-accent);
    border-bottom: none;
    transform: translate(-50%, 50%);
    z-index: 2;
  }
  .c-flow-item:last-child::after {
    display: none;
  }
}

/* ==========================================================================
   24. Works Page Grid — 実績ページ 全量ギャラリー
   ========================================================================== */

.works-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-3);
}

.works-page-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.works-page-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-muted);
}

.works-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-page-caption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 0.2rem;
}

.works-page-caption p {
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.works-page-breed {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.works-page-cut {
  font-size: 1.3rem;
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .works-page-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================================
   25. Greeting Page
   ========================================================================== */

/* Section: 背景装飾 — ソフトオーブ + 大型英字ウォーターマーク */
.greeting-section {
  position: relative;
  overflow: hidden;
}

.greeting-section::before,
.greeting-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}

.greeting-section::before {
  top: 8%;
  left: 4%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(239, 69, 74, 0.14) 0%, rgba(239, 69, 74, 0) 70%);
  animation: greetingOrb 14s ease-in-out infinite;
}

.greeting-section::after {
  bottom: 10%;
  right: 4%;
  width: 36rem;
  height: 36rem;
  background: radial-gradient(circle, rgba(255, 199, 180, 0.28) 0%, rgba(255, 199, 180, 0) 70%);
  animation: greetingOrb 18s ease-in-out infinite reverse;
  animation-delay: -6s;
}

.greeting-section > .container {
  position: relative;
  z-index: 1;
}

@keyframes greetingOrb {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50%      { transform: translate(2rem, -1.5rem) scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .greeting-section::before,
  .greeting-section::after { animation: none; }
}

@media (max-width: 767px) {
  .greeting-section::before { width: 22rem; height: 22rem; }
  .greeting-section::after  { width: 26rem; height: 26rem; }
}

.greeting-message-wrap {
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
}

.greeting-headline {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: var(--sp-8);
}

@media (max-width: 767px) {
  .greeting-headline {
    font-size: var(--fs-h3);
  }
}

.greeting-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 0;
  position: relative;
}

.greeting-body::before {
  content: "";
  display: block;
  width: 4rem;
  height: 0.1rem;
  background: var(--color-accent);
  margin: 0 auto var(--sp-5);
}

.greeting-img-wrap {
  max-width: 60%;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.greeting-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .greeting-img-wrap {
    max-width: 85%;
  }
}

.greeting-text {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-text-sub);
}

/* 受賞歴 h3 — greeting ページ専用 */
.greeting-awards-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-6);
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.greeting-awards-heading::before {
  content: "Awards";
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.greeting-awards-heading::after {
  content: "";
  width: 3.2rem;
  height: 0.2rem;
  margin-top: 0.6rem;
  background: var(--color-accent);
  border-radius: 0.2rem;
}

.greeting-works-btn,
.price-works-btn {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}


/* 資格一覧 */
.greeting-qualifications {
  margin-top: var(--sp-10);
  padding: var(--sp-8) var(--sp-6);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  text-align: left;
}

.greeting-qualifications-title {
  font-family: var(--font-jp-serif);
  font-size: var(--fs-h3);
  letter-spacing: 0.25em;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--sp-6);
  position: relative;
}

.greeting-qualifications-title::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--color-accent);
  margin: var(--sp-3) auto 0;
}

.greeting-qualifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-6);
}

.greeting-qualifications-list li {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-sub);
  padding-left: 1.8em;
  position: relative;
}

.greeting-qualifications-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF454A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8 14l-4 8h16l-4-8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 767px) {
  .greeting-qualifications {
    padding: var(--sp-8) var(--sp-4);
  }
  .greeting-qualifications-list {
    grid-template-columns: 1fr;
  }
}

/* greeting ページ内の受賞カードは背景なし */
.greeting-section .award-card {
  background: transparent;
}

/* ==========================================================================
   26. Anchor Nav — ページ内アンカーリンク群（1〜4カラム対応）
   ========================================================================== */

.c-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
}

.c-anchor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
  border-bottom: 0.1rem solid var(--color-text-sub);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing);
  white-space: nowrap;
}

.c-anchor-btn:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  opacity: 1;
}

.c-anchor-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--easing);
}

.c-anchor-btn:hover svg {
  transform: translateY(0.2rem);
}

@media (max-width: 767px) {
  .c-anchor-nav {
    gap: var(--sp-1) var(--sp-4);
  }
}