/* =========================================================================
   COCO — ペットトータルケア / 共通スタイル
   生成り × 墨 × キャラメル / 上質ホテル × 温かみ
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Shippori+Mincho+B1:wght@500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: rgba(184,131,90,.22); }

/* ---------- Tokens ---------- */
:root {
  --cream:       #f7f2e9;
  --cream-deep:  #efe7d6;
  --cream-card:  #fdfaf4;
  --ink:         #2a2622;
  --ink-soft:    #5d544a;
  --ink-faint:   #8a8073;
  --line:        #e3d9c6;

  --caramel:       #b8835a;
  --caramel-deep:  #9a6a44;
  --caramel-soft:  rgba(184,131,90,.12);
  --caramel-glow:  rgba(184,131,90,.30);

  /* service accents (warm-harmonized) */
  --hotel:    #b8835a;   /* キャラメル */
  --trim:     #c2877e;   /* ダスティローズ */
  --daycare:  #8f9469;   /* 温かみのオリーブ */

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 26px;
  --radius-s: 16px;
  --shadow-s: 0 4px 18px rgba(80,60,40,.07);
  --shadow-m: 0 14px 40px rgba(80,60,40,.10);
  --shadow-l: 0 30px 80px rgba(80,60,40,.14);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-soft:   cubic-bezier(.16,1,.3,1);

  --head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --mincho: "Shippori Mincho B1", serif;
  --body: "Noto Sans JP", sans-serif;
  --latin: "Fraunces", serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.95;
  font-weight: 400;
  letter-spacing: .02em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* 禁則・改行品質 */
  line-break: strict;
  word-break: normal;            /* fallback */
  word-break: auto-phrase;       /* 文節単位で改行（Chrome/Edge）— 単語途中の泣き別れを防ぐ */
  overflow-wrap: break-word;     /* 長い英数字/URLのみ折る（anywhereは1字ごとに切るのでNG） */
}

/* 禁則・改行の品質 */
h1, h2, h3, h4, p { text-wrap: pretty; }
.nb { white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding: clamp(72px, 11vw, 150px) 0; }
.section--cream { background: var(--cream); }
.section--deep  { background: var(--cream-deep); }
.section--ink   { background: var(--ink); color: var(--cream); }
.section--ink .ovr, .section--ink p { color: #e9e1d3; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--mincho);
  font-size: 13px;
  letter-spacing: .34em;
  color: var(--caramel-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: var(--caramel);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 30px; height: 1px; background: var(--caramel); display: inline-block;
}

.latin-label {
  font-family: var(--latin);
  font-style: italic;
  font-weight: 400;
  color: var(--caramel);
  letter-spacing: .01em;
}

.h-sec {
  font-family: var(--head);
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--ink);
}
.h-sec .accent { color: var(--caramel); }

.lead {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--ink-soft);
  line-height: 2.1;
  font-weight: 400;
}

.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head--center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--head); font-weight: 700; font-size: 15px;
  letter-spacing: .04em;
  padding: 17px 34px;
  border-radius: 999px;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-soft), background .3s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--caramel); color: #fff; box-shadow: 0 8px 20px var(--caramel-glow); }
.btn--primary:hover { background: var(--caramel-deep); transform: translateY(-3px); box-shadow: 0 14px 30px var(--caramel-glow); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--caramel); color: var(--caramel-deep); transform: translateY(-3px); }
.btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.btn--lg { padding: 20px 42px; font-size: 16px; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  transition: background .4s var(--ease-soft), box-shadow .4s, padding .4s;
}
.header.is-solid {
  background: rgba(247,242,233,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(227,217,198,.7);
  padding-top: 12px; padding-bottom: 12px;
}
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--head); font-weight: 900;
  font-size: 27px; letter-spacing: .26em; color: var(--ink);
  transition: color .4s;
}
.logo-sub {
  font-family: var(--mincho); font-size: 9.5px; letter-spacing: .42em;
  color: var(--caramel-deep); margin-top: 5px; padding-left: 3px;
}
.header.is-hero .logo-name { color: #fff; }
.header.is-hero .logo-sub { color: rgba(255,255,255,.85); }

/* logo image (dark/sage for light bg, white for dark bg) */
.logo-img { height: 46px; width: auto; display: block; }
.logo .logo-light { display: none; }
.header.is-hero .logo .logo-dark { display: none; }
.header.is-hero .logo .logo-light { display: block; }
body.nav-open .header .logo .logo-dark { display: block !important; }
body.nav-open .header .logo .logo-light { display: none !important; }
.footer .logo-img { height: 68px; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
.nav-links a {
  font-family: var(--head); font-weight: 500; font-size: 14.5px;
  letter-spacing: .06em; color: var(--ink-soft);
  position: relative; padding: 6px 0; transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--caramel); transition: width .35s var(--ease-soft);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { width: 100%; }
.header.is-hero .nav-links a[aria-current="page"] { color: #fff; }
.header.is-hero .nav-links a { color: rgba(255,255,255,.9); }
.header.is-hero .nav-links a:hover { color: #fff; }

.nav-cta { display: inline-flex; gap: 10px; }
.header.is-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.header.is-hero .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.burger { display: none; width: 30px; height: 22px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: .35s var(--ease-soft); }
.burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 10px; } .burger span:nth-child(3) { top: 20px; }
.header.is-hero .burger span { background: #fff; }
body.nav-open .burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- Wavy section divider ---------- */
.wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); line-height: 0; }
.wave svg { width: 100%; height: 100%; }
.wave--flip { transform: scaleY(-1); }

/* ---------- Blob cutout (subject on organic warm shape) ---------- */
.blob-figure { position: relative; display: inline-block; }
.blob-figure .blob {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
  filter: blur(.5px);
}
.blob-figure img.cutout { position: relative; z-index: 1; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-soft); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--caramel), var(--trim)); z-index: 200; transition: width .1s linear; }

/* ---------- Mobile drawer / bottom CTA (hidden on desktop) ---------- */
.nav-drawer { display: none; }
.mobile-cta { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #e9e1d3; padding: clamp(60px,8vw,96px) 0 40px; }
.footer a { color: #e9e1d3; transition: color .3s; }
.footer a:hover { color: var(--caramel); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .logo-name { color: #fff; }
.footer .logo-sub { color: var(--caramel); }
.footer-tag { margin-top: 22px; color: #c9bfae; font-size: 14px; line-height: 2; max-width: 30ch; }
.footer-col h4 { font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--caramel); margin-bottom: 20px; }
.footer-col li { margin-bottom: 13px; font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 12.5px; color: #9d9482; flex-wrap: wrap; gap: 12px; }
.footer-bottom .latin-label { color: #c9bfae; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }

  .nav-drawer {
    position: fixed; inset: 0; z-index: 99;
    background: var(--cream);
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 100px var(--pad) 132px;   /* bottom clears the fixed mobile CTA bar so 予約 is reachable */
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-100%); visibility: hidden;
    transition: transform .55s var(--ease-soft), visibility 0s linear .55s;
  }
  body.nav-open .nav-drawer { transform: translateY(0); visibility: visible; transition: transform .55s var(--ease-soft), visibility 0s; }
  /* when drawer is open, header sits on cream — darken logo & burger for contrast */
  body.nav-open .header .logo-name { color: var(--ink); }
  body.nav-open .header .logo-sub { color: var(--caramel-deep); }
  body.nav-open .burger span { background: var(--ink); }
  .nav-drawer a { font-family: var(--head); font-weight: 700; font-size: 22px; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-drawer .latin-label { font-size: 13px; margin-left: 10px; }
  .nav-drawer .btn { margin-top: 34px; align-self: stretch; justify-content: center; font-size: 18px; padding: 23px 36px; border-radius: 999px; box-shadow: 0 10px 24px var(--caramel-glow); }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* mobile bottom CTA bar */
  .mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: rgba(247,242,233,.94); backdrop-filter: blur(12px);
    box-shadow: 0 -2px 18px rgba(80,60,40,.12);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .mobile-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--head); font-weight: 700; font-size: 14px; padding: 14px 8px; border-radius: 14px; white-space: nowrap; }
  .mobile-cta a svg { flex: 0 0 auto; }
  .mobile-cta .tel { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }
  .mobile-cta .res { background: var(--caramel); color: #fff; }
  body { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}