/* ==========================================================================
   PET TOWN — Design System
   v1 draft. Brand pink is a placeholder approximation of the existing
   "FOR PET'S HAPPY PET TOWN" logo mark — swap --pink for the exact value
   once a logo file (SVG/PNG with color spec) is provided.
   Content marked with the .ph class is placeholder/unverified — see
   README.md for the full list to confirm before launch.
   ========================================================================== */

:root{
  /* neutrals */
  --ink:        #1E1B18;
  --ink-soft:   #5B564F;
  --ink-faint:  #6A6154;
  --paper:      #FAF7F1;
  --paper-raised: #F1EBDF;
  --paper-deep: #E8E0CF;
  --line:       #DED5C2;
  --line-strong:#C9BC9E;

  /* brand — placeholder, see note above.
     --pink was darkened slightly (same hue/saturation, lightness -5.5%)
     from #E23E7A to #DE2669 so white text on a solid --pink background
     (.btn-primary, .s10-step-tag) reaches WCAG AA (4.5:1); the original
     value was ~4.04:1. --pink-soft is derived from the same base so the
     two stay in sync. */
  --pink:       #DE2669;
  --pink-deep:  #A82A5C;
  --pink-soft:  #DE266914;
  --pink-ink:   #FDF3F7; /* text-on-pink */

  --good:       #3D6B4A;

  --font-display: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(30,27,24,.06), 0 8px 24px rgba(30,27,24,.05);
  --content-w: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--pink-deep); text-decoration-color:var(--pink-soft); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--pink-deep); outline-offset:2px;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.35; margin:0 0 .5em; text-wrap:balance; color:var(--ink); }
h1{ font-weight:900; }
p{ margin:0 0 1em; }
.container{ max-width:var(--content-w); margin:0 auto; padding:0 20px; }
@media (min-width:900px){ .container{ padding:0 40px; } }

/* ---- placeholder marker ---- */
.ph{
  border-bottom:1.5px dashed var(--pink-deep);
  position:relative;
}

/* ---- eyebrow / labels ---- */
.eyebrow{
  display:inline-block; font-family:var(--font-body); font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink-deep); margin:0 0 12px;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--pink); color:#fff; }
.btn-primary:hover{ background:var(--pink-deep); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ border-color:var(--pink-deep); color:var(--pink-deep); }
.btn-invert{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn-invert:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,241,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; max-width:var(--content-w); margin:0 auto; }
@media (min-width:900px){ .header-row{ padding:16px 40px; } }

/* top page only: a touch more compact on mobile so the hero's first
   view has more room before scrolling — other pages keep the header
   untouched. */
.page-home .header-row{ padding:9px 20px; }
@media (min-width:900px){ .page-home .header-row{ padding:16px 40px; } }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0; }
.logo-img{ height:34px; width:auto; display:block; }
.page-home .logo-img{ height:28px; }
@media (min-width:900px){ .page-home .logo-img{ height:34px; } }
/* the logo's wordmark is dark ink, so on the dark footer it needs a light
   plate behind it to stay legible — the image itself is untouched */
.site-footer .logo{ background:var(--paper); padding:8px 16px; border-radius:10px; }

/* ---- brand banner (existing PET TOWN illustration asset) ---- */
.brand-banner{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:32px; }
.brand-banner-img{ display:block; width:100%; height:auto; }
.brand-banner-cap{ margin:0; padding:14px 20px; font-size:12.5px; color:var(--ink-faint); text-align:center; border-top:1px solid var(--line); }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  background:transparent; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
@media (min-width:900px){ .nav-toggle{ display:none; } }

.main-nav{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-1);
  padding:8px 20px 20px;
}
.main-nav.open{ display:block; }
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.main-nav a{ display:block; padding:13px 4px; color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); }
.main-nav a.current{ color:var(--pink-deep); }
.header-cta{ display:none; }

@media (min-width:900px){
  .main-nav{ display:block; position:static; background:none; border:none; box-shadow:none; padding:0; flex:1; }
  .main-nav ul{ flex-direction:row; align-items:center; justify-content:center; gap:28px; }
  .main-nav a{ padding:6px 0; border-bottom:2px solid transparent; font-size:14.5px; }
  .main-nav a:hover, .main-nav a.current{ border-bottom-color:var(--pink); color:var(--ink); }
  .header-cta{ display:inline-flex; flex-shrink:0; }
}

/* ---- footer ---- */
.site-footer{ background:var(--ink); color:#D9D2C4; padding:56px 0 28px; margin-top:0; }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; margin-bottom:36px; }
@media (min-width:800px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.site-footer .logo-text b{ color:#fff; }
.site-footer .logo-text small{ color:#9C9587; }
.site-footer h4{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--font-body); font-weight:700; margin-bottom:14px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:9px; font-size:13.5px; }
.site-footer a{ color:#C9C1B2; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #38332C; padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12px; color:#8A8375; }
.footer-note{ font-size:11.5px; color:#77705F; margin-top:14px; line-height:1.7; }

/* ---- sections ---- */
section{ padding:64px 0; }
.section-alt{ background:var(--paper-raised); }
.section-head{ max-width:640px; margin:0 0 40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color:var(--ink-soft); font-size:15.5px; margin:0; }

/* ---- photo placeholder ---- */
.photo{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:
    linear-gradient(135deg, var(--pink-soft), transparent 60%),
    repeating-linear-gradient(45deg, var(--paper-deep) 0 2px, var(--paper-raised) 2px 26px);
  display:flex; align-items:flex-end;
}
.photo::before{ content:""; display:block; width:100%; }
.photo--hero::before{ padding-top:112%; }
.photo--wide::before{ padding-top:62%; }
.photo--square::before{ padding-top:100%; }
.photo--card::before{ padding-top:75%; }
@media (min-width:700px){ .photo--hero::before{ padding-top:52%; } }
.photo-cap{
  position:absolute; left:14px; bottom:14px; right:14px;
  font-size:11.5px; color:var(--ink-soft); background:rgba(250,247,241,.88);
  border:1px solid var(--line-strong); border-radius:999px; padding:5px 13px;
  font-weight:600; letter-spacing:.02em;
}
.photo-cap::before{ content:"PHOTO — "; color:var(--pink-deep); }

/* ---- hero ---- */
.hero{ position:relative; padding:0; overflow:hidden; background:var(--ink); color:#fff; }
.hero-photo{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(226,62,122,.35), transparent 55%),
    repeating-linear-gradient(45deg, #2A2521 0 2px, #201C19 2px 30px);
}
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,15,.35), rgba(20,17,15,.82)); }
.hero-inner{ position:relative; padding:72px 20px 56px; max-width:var(--content-w); margin:0 auto; }
@media (min-width:900px){ .hero-inner{ padding:120px 40px 96px; } }
.hero .eyebrow{ color:#F2A9C4; }
.hero h1{ color:#fff; font-size:clamp(30px,5.4vw,54px); max-width:16ch; }
.hero p.lede{ color:#E9E3D8; font-size:17px; max-width:52ch; margin-bottom:28px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px; }
.hero-photo-cap{ position:absolute; right:20px; bottom:16px; font-size:11px; color:#B9B2A3; }
@media (min-width:900px){ .hero-photo-cap{ right:40px; } }

/* ---- pain points ---- */
.pain-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px){ .pain-grid{ grid-template-columns:repeat(3,1fr); } }
.pain-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 24px; }
.pain-card .q{ font-family:var(--font-display); font-size:16.5px; font-weight:700; margin-bottom:8px; }
.pain-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* ---- value props ---- */
.value-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .value-grid{ grid-template-columns:repeat(3,1fr); } }
.value-card h3{ font-size:19px; margin:16px 0 8px; }
.value-card .num{ font-family:var(--font-display); font-size:13px; color:var(--pink-deep); font-weight:700; letter-spacing:.08em; }
.value-card p{ font-size:13.5px; color:var(--ink-soft); }

/* ---- persona cards (entry + service page) ---- */
.persona-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .persona-grid{ grid-template-columns:repeat(2,1fr); } }
.persona-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-1); transition:transform .18s ease, border-color .18s ease;
}
.persona-card:hover{ transform:translateY(-3px); border-color:var(--pink); }
.persona-card .photo{ border-radius:0; }
.persona-body{ padding:20px 22px 22px; }
.persona-card .p-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--pink-deep); font-weight:700; display:block; margin-bottom:8px; }
.persona-card h3{ font-size:18px; margin-bottom:8px; }
.persona-card .p-hook{ font-family:var(--font-display); font-style:normal; font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:10px; }
.persona-card p.p-body{ font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; }
.persona-card .p-link{ font-size:13.5px; font-weight:700; color:var(--pink-deep); }

/* ---- reasons / stats ---- */
.reason-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .reason-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .reason-grid{ grid-template-columns:repeat(3,1fr); } }
.reason-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; }
.reason-card h3{ font-size:15px; margin-bottom:6px; }
.reason-card p{ font-size:13px; color:var(--ink-soft); margin:0; }

.stat-grid{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); text-align:center; }
@media (min-width:700px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(28px,4vw,40px); font-weight:900; color:var(--pink); font-variant-numeric:tabular-nums; }
.stat span{ font-size:12.5px; color:var(--ink-soft); }

/* ---- flow (numbered steps) ---- */
.flow{ list-style:none; margin:0; padding:0; counter-reset:flow; }
.flow li{ counter-increment:flow; position:relative; padding:0 0 30px 52px; border-left:1px solid var(--line-strong); margin-left:17px; }
.flow li:last-child{ border-left-color:transparent; padding-bottom:0; }
.flow li::before{
  content:counter(flow,decimal-leading-zero); position:absolute; left:-17px; top:0;
  width:34px; height:34px; border-radius:50%; background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums; font-family:var(--font-display);
}
.flow h3{ font-size:16.5px; margin-bottom:6px; }
.flow p{ font-size:13.5px; color:var(--ink-soft); margin:0; max-width:56ch; }

/* ---- cases ---- */
.filter-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter-chip{
  font-size:13px; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid var(--line-strong);
  background:#fff; color:var(--ink-soft); cursor:pointer;
}
.filter-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.case-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .case-grid{ grid-template-columns:repeat(3,1fr); } }
.case-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.case-body{ padding:18px 20px 20px; }
.case-card .c-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--pink-deep); font-weight:700; }
.case-card h3{ font-size:16px; margin:8px 0; }
.case-card p{ font-size:13px; color:var(--ink-soft); margin:0; }

/* ---- table ---- */
.table-wrap{ overflow-x:auto; margin-bottom:24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
thead th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; padding:16px 16px 12px; border-bottom:1px solid var(--line-strong); background:var(--paper-raised); }
tbody td{ padding:16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr td:first-child{ color:var(--ink); font-weight:700; }

/* ---- hotel.html-only: pricing table has just 2 short columns, doesn't
   need the shared 560px min-width (which forced an internal scrollbar
   even on PC once .two-col > *{min-width:0} correctly constrained the
   grid column). Scoped so about.html/shop.html's wider tables keep the
   original 560px min-width. ---- */
.plan-table-narrow table{ min-width:0; }

/* ---- mobile-fureai.html-only: pricing table -> stacked cards on mobile ----
   .table-wrap / table / thead / tbody are shared with about.html,
   hotel.html, shop.html, index.html and stay untouched — the plan
   table on mobile-fureai.html just gets its own extra class so only
   this table swaps to cards below 900px (this site's mobile/PC
   breakpoint), avoiding the horizontal scroll the plain table needs
   at that width. Same paper-card language as .case-card/.s8-card. */
.plan-table-wrap{ display:none; }
.plan-cards{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:14px; }
.plan-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow-1);
}
.plan-card-name{ display:block; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
.plan-card-time{ display:block; font-size:12.5px; color:var(--pink-deep); font-weight:700; margin-top:4px; }
.plan-card-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin:12px 0 0; }
.plan-card-price{
  display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-soft);
}

@media (min-width:900px){
  .plan-table-wrap{ display:block; }
  .plan-cards{ display:none; }
}

/* ---- accordion (FAQ) ---- */
.accordion{ border-top:1px solid var(--line); }
.accordion details{ border-bottom:1px solid var(--line); }
.accordion summary{
  cursor:pointer; list-style:none; padding:20px 4px; font-weight:700; font-family:var(--font-display);
  display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:15px;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; font-size:22px; color:var(--pink-deep); flex-shrink:0; font-weight:400; transition:transform .2s ease; }
.accordion details[open] summary::after{ transform:rotate(45deg); }
.accordion .a-body{ padding:0 4px 22px; color:var(--ink-soft); font-size:14px; max-width:64ch; }

/* ---- callout / notice ---- */
.callout{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin-bottom:28px; }
.callout h3{ font-size:13px; font-family:var(--font-body); text-transform:uppercase; letter-spacing:.08em; color:var(--pink-deep); margin-bottom:14px; }
.callout ul{ margin:0; padding-left:20px; }
.callout li{ margin-bottom:8px; font-size:14px; color:var(--ink-soft); }
.callout li:last-child{ margin-bottom:0; }
.callout p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ---- cta band ---- */
.cta-band{ background:var(--ink); color:#fff; text-align:center; padding:64px 0; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#CFC8B8; max-width:52ch; margin:0 auto 28px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta-phone{ margin-top:22px; font-size:13.5px; color:#9C9587; }
.cta-phone b{ color:#fff; font-size:17px; font-family:var(--font-display); }

/* ---- breadcrumb / page header (sub pages) ---- */
.page-head{ background:var(--paper-raised); border-bottom:1px solid var(--line); padding:44px 0 40px; }
.page-head .eyebrow{ margin-bottom:10px; }
.page-head h1{ font-size:clamp(26px,4vw,38px); }
.page-head p{ color:var(--ink-soft); max-width:60ch; margin:0; }

/* ---- forms ---- */
.tab-row{ display:flex; gap:10px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.tab-btn{ background:none; border:none; padding:12px 4px; margin-right:24px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; }
.tab-btn.active{ color:var(--ink); border-bottom-color:var(--pink); }
.form-panel{ display:none; }
.form-panel.active{ display:block; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.field .opt{ font-weight:400; color:var(--ink-faint); font-size:12px; }
.field .req{
  font-weight:700; color:var(--pink-deep); background:var(--pink-soft);
  border-radius:999px; padding:1px 8px; font-size:11px; letter-spacing:.02em;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:14.5px; background:#fff; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; }
.radio-group{ display:flex; flex-wrap:wrap; gap:10px; }
.radio-group label{ display:flex; align-items:center; gap:7px; font-weight:500; font-size:13.5px; border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px; cursor:pointer; }
.two-col{ display:grid; gap:16px; grid-template-columns:1fr; }
.two-col > *{ min-width:0; }
@media (min-width:640px){ .two-col{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   Top-page hero v2 — rebuilt from the client's approved reference mockup.
   The illustrated "world" is the real reference image (assets/hero-tree.jpg,
   assets/hero-town.jpg), cropped and placed as-is — nothing here redraws it
   with CSS/SVG shapes. Scoped to index.html only ("hero-v2" / "paper-town");
   other pages keep the original .hero treatment untouched.
   ========================================================================== */
.hero-v2{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, #FBF7EC 0%, #F3EAD8 100%);
  padding: 14px 0 0;
}

.hero-v2-copy{ position:relative; z-index:2; text-align:left; padding:0 20px; max-width:480px; }
.hero-v2-copy .eyebrow{ margin-bottom:5px; }
.hero-v2-copy h1{ font-size:clamp(22px,6.6vw,38px); line-height:1.2; margin:2px 0 7px; }
.hero-v2-copy .lede{ color:var(--ink-soft); font-size:12.5px; line-height:1.5; margin-bottom:12px; }
.hero-v2-copy .hero-actions{ display:flex; flex-direction:column; gap:7px; }
.hero-actions .btn{ justify-content:space-between; padding:10px 16px; font-size:13.5px; }
.btn-chevron{ width:15px; height:15px; flex-shrink:0; }

/* ---- illustrated world (real image asset, not hand-drawn) ----
   The reference mockup's tree and town/hill artwork are stacked here in
   their original relative order (tree above town), full width, as one
   continuous visual — matching the client's "text block, then the world
   below it" structure. Sized to be the first-view's visual lead, not a
   small inset illustration. */
.hero-visual{ margin-top:6px; }
.hero-tree-deco{
  display:block; width:100%; height:auto;
  aspect-ratio:469/460; object-fit:cover; object-position:50% 100%;
}
.hero-world img{ display:block; width:100%; height:auto; }
.hero-world{ margin:-1px 0 0; }
.hero-world-note{ margin:8px 20px 0; font-size:11px; color:var(--ink-faint); text-align:center; }

/* ---- feature strip ---- */
.hero-features{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin:20px 16px 32px; padding:16px 4px;
  background:#FFFCF6; border-radius:18px; box-shadow:0 12px 26px rgba(120,80,60,.12);
}
.hf-item{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; padding:2px 3px; }
.hf-item + .hf-item::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line); }
.hf-item svg{ width:22px; height:22px; fill:none; stroke:var(--pink-deep); stroke-width:1.6; }
.hf-pin-dot{ fill:var(--pink-deep); stroke:none; }
.hf-item span{ font-size:9.5px; font-weight:700; color:var(--ink); line-height:1.4; }

/* Narrow phones (~360-413px, e.g. 390px): the default <br> position in
   2 of the 4 items wraps to a 3rd line with a single orphaned
   character. These two toggleable <br> markers pick a break point one
   character earlier so both items settle into a clean 2 lines, matching
   the other two items. No effect at 414px+ (min-width:560px / PC's
   min-width:900px tiers), where the default break already fits. */
.hf-br-a{ display:none; }
.hf-br-b{ display:inline; }
@media (max-width:413px){
  .hf-br-a{ display:inline; }
  .hf-br-b{ display:none; }
}

@media (min-width:560px){
  .hf-item svg{ width:26px; height:26px; }
  .hf-item span{ font-size:11px; }
}

@media (min-width:900px){
  /* PC first view: a bold 40/60 split — copy fills the left 40%, the
     papercut illustration fills the right 60% edge-to-edge and top-to-
     bottom of the row, cropped with object-fit rather than shown as a
     small inset image. Mobile layout above is untouched. */
  .hero-v2{
    display:flex; flex-wrap:wrap; align-items:stretch;
    min-height:min(680px, calc(100vh - 150px));
    padding:0 0 0 5.5vw;
  }

  /* Ambient echoes of the SAME papercut photos (not new artwork) placed
     faintly behind the left copy, so the illustrated world reads as
     continuing under the text instead of stopping at the right column's
     edge. Very low opacity + blur + a soft radial mask keep them a quiet
     backdrop, never competing with the sharp image on the right. */
  .hero-v2::before,
  .hero-v2::after{
    content:""; position:absolute; z-index:0; pointer-events:none;
    background-repeat:no-repeat; background-size:cover;
    opacity:.16; filter:blur(2.5px) saturate(.92);
  }
  .hero-v2::before{
    top:-8%; left:-10%; width:64%; height:62%;
    background-image:url('../assets/hero-tree.jpg');
    background-position:32% 20%;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 58% 42%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 72% 68% at 58% 42%, #000 30%, transparent 78%);
  }
  .hero-v2::after{
    bottom:-4%; left:-8%; width:68%; height:62%;
    background-image:url('../assets/hero-town.jpg');
    background-position:38% 55%;
    -webkit-mask-image: radial-gradient(ellipse 74% 78% at 44% 66%, #000 26%, transparent 80%);
            mask-image: radial-gradient(ellipse 74% 78% at 44% 66%, #000 26%, transparent 80%);
  }

  .hero-v2-copy{
    position:relative; z-index:2;
    flex:0 0 40%; max-width:560px; padding:64px 40px 0 0;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .hero-v2-copy .eyebrow{ font-size:13.5px; margin-bottom:10px; }
  .hero-v2-copy h1{ font-size:clamp(32px,3.4vw,54px); line-height:1.18; margin:0 0 18px; }
  .hero-v2-copy .lede{ font-size:clamp(14px,1.1vw,17px); line-height:1.7; margin-bottom:28px; max-width:42ch; }
  .hero-v2-copy .hero-actions{ flex-direction:row; flex-wrap:wrap; gap:16px; }
  .hero-actions .btn{ padding:16px 28px; font-size:16px; flex:0 0 auto; }
  .btn-chevron{ width:17px; height:17px; }

  .hero-visual{
    position:relative; z-index:1;
    flex:1 1 60%; max-width:none; margin-top:0;
    display:flex; flex-direction:column; align-self:stretch;
  }
  .hero-tree-deco{
    flex:1.35 1 0; min-height:0;
    width:100%; height:100%; aspect-ratio:auto;
    object-fit:cover; object-position:38% 22%;
  }
  .hero-world{ flex:1 1 0; min-height:0; margin:0; }
  .hero-world img{ width:100%; height:100%; object-fit:cover; object-position:50% 15%; }

  /* placeholder disclosure — kept, but as a quiet corner tag instead of
     a full caption line, so it stops reading as an unfinished banner */
  .hero-world-note{
    position:absolute; z-index:2; right:14px; bottom:44px; margin:0;
    padding:3px 10px; font-size:10px; border-radius:999px;
    background:rgba(255,252,246,.85); border-bottom:none;
  }

  /* feature strip — pulled up to lightly overlap the visual's bottom
     edge (not floating separately below it) and widened to share the
     same left/right edges as the copy column and the image, so the
     whole first view reads as one composed block. */
  .hero-features{
    position:relative; z-index:2;
    flex:0 0 100%; max-width:none; margin:-18px 0 44px; padding:25px 24px;
    background:#FBF3E2; border-radius:22px; box-shadow:0 12px 22px -14px rgba(120,80,60,.14);
  }
  .hf-item{ padding:6px 8px; gap:8px; }
  .hf-item + .hf-item::before{ top:12px; bottom:12px; }
  .hf-item svg{ width:29px; height:29px; }
  .hf-item span{ font-size:12.5px; letter-spacing:.01em; line-height:1.5; }

  /* ==========================================================================
     PC hero — quiet, once-settled motion. "The papercut world wakes up
     softly": a staggered fade-up for the copy, a slow fade-in for the
     visual, a barely-there living-picture drift on the tree/blossom image,
     and (via js/main.js) very weak scroll parallax on the town/hill image.
     transform + opacity only; nothing here changes layout, size, position
     or the images themselves. Desktop only — mobile is untouched.
     ========================================================================== */
  .hero-v2-copy .eyebrow,
  .hero-v2-copy h1,
  .hero-v2-copy .lede,
  .hero-v2-copy .hero-actions{
    opacity:0; transform:translateY(10px);
    animation:heroCopyFadeUp .9s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero-v2-copy .eyebrow{ animation-delay:.05s; }
  .hero-v2-copy h1{ animation-delay:.22s; }
  .hero-v2-copy .lede{ animation-delay:.4s; }
  .hero-v2-copy .hero-actions{ animation-delay:.58s; }
  @keyframes heroCopyFadeUp{ to{ opacity:1; transform:translateY(0); } }

  .hero-visual{ opacity:0; animation:heroVisualFadeIn 1.2s ease .12s forwards; }
  @keyframes heroVisualFadeIn{ to{ opacity:1; } }

  .hero-tree-deco{ animation:heroTreeDrift 13s ease-in-out infinite; }
  @keyframes heroTreeDrift{
    0%,100%{ transform:scale(1.02) translate(0,0); }
    50%{ transform:scale(1.02) translate(-0.45%,0.55%); }
  }

  /* resting scale for the town/hill image — gives the JS scroll parallax
     (js/main.js) room to shift a few px without ever exposing an edge */
  .hero-world img{ transform:scale(1.02); }

  @media (prefers-reduced-motion: reduce){
    .hero-v2-copy .eyebrow,
    .hero-v2-copy h1,
    .hero-v2-copy .lede,
    .hero-v2-copy .hero-actions,
    .hero-visual{ animation:none; opacity:1; transform:none; }
    .hero-tree-deco{ animation:none; transform:none; }
    .hero-world img{ transform:none; }
  }
}

/* ==========================================================================
   Section 2 — "PET TOWNって、どんなサービス？"
   Continues the hero's papercut world (same assets/hero-town.jpg, reused
   rather than redrawn) and presents the 4 target facilities as stops
   along one street instead of a white card grid. Mobile: a vertical
   route the visitor scrolls down through. Desktop: one wide street
   scene with the 4 stops spread across it. No new illustration.
   ========================================================================== */
.s2{
  position:relative; padding:56px 0 0;
  background: linear-gradient(180deg, #F3EAD8 0%, #EBDFC5 100%);
  overflow:hidden;
}
.s2 .section-head{ margin-bottom:8px; }
.s2-lede{ color:var(--ink-soft); font-size:14.5px; line-height:1.8; margin:14px 0 0; }

.s2-town{ position:relative; margin-top:28px; }
.s2-town-img{ display:block; width:100%; height:240px; object-fit:cover; object-position:48% 32%; }

.s2-stops{
  position:relative; list-style:none; margin:0; padding:24px 20px 44px;
  display:flex; flex-direction:column; gap:18px; background:#EBDFC5;
}
.s2-stop{ position:relative; display:flex; flex-direction:row; align-items:center; gap:9px; }
.s2-stop:not(:last-child)::after{
  content:""; position:absolute; left:6px; top:24px; bottom:-18px;
  border-left:2px dashed rgba(90,60,30,.3);
}
.s2-stop-dot{
  flex-shrink:0; width:13px; height:13px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 4px rgba(226,62,122,.16);
}
.s2-stop-chip{
  flex:1; display:flex; align-items:center; gap:12px;
  background:#F3E6CC; border-left:3px solid rgba(226,62,122,.4);
  border-radius:12px; padding:12px 16px 12px 13px;
  box-shadow:0 6px 14px -10px rgba(120,80,60,.14);
}
.s2-stop-icon{ width:25px; height:25px; flex-shrink:0; fill:none; stroke:var(--pink-deep); stroke-width:1.6; }
.s2-stop-text{ display:flex; flex-direction:column; gap:2px; }
.s2-stop-title{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); }
.s2-stop-sub{ font-size:11.5px; color:var(--ink-faint); }

@media (min-width:900px){
  .s2{ padding:88px 0 0; }
  .s2-town{ margin-top:40px; }
  .s2-town-img{ height:460px; object-position:50% 42%; }

  .s2-stops{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    flex-direction:row; justify-content:space-between; align-items:flex-start;
    padding:46px 7% 42px; gap:16px;
    background:linear-gradient(180deg, transparent 0%, rgba(235,223,197,.6) 30%, #EBDFC5 84%);
  }
  .s2-stops::before{
    content:""; position:absolute; left:11%; right:11%; top:52px;
    border-top:2px dashed rgba(90,60,30,.32);
  }
  .s2-stop{ flex-direction:column; align-items:center; flex:0 1 230px; gap:14px; z-index:1; }
  .s2-stop:not(:last-child)::after{ content:none; }
  .s2-stop-dot{ width:15px; height:15px; }
  /* restore the original (pre mobile-tuning) chip look on PC — this
     section's desktop layout is confirmed and must not change */
  .s2-stop-chip{
    flex-direction:column; text-align:center; gap:6px; padding:16px 18px; width:100%;
    background:#FBF3E2; border-left:none; border-radius:16px;
    box-shadow:0 10px 20px -14px rgba(120,80,60,.2);
  }
  .s2-stop-text{ align-items:center; }
  .s2-stop-icon{ width:28px; height:28px; }
}

/* ==========================================================================
   Section 3 — arriving at the plaza ("PET TOWNが提供する価値")
   One client-approved papercut photo (same series as hero-tree.jpg /
   hero-town.jpg), cropped into a wide PC establishing shot and 3 stacked
   mobile zones (entrance -> center -> back) so scrolling down reads as
   walking further into the plaza. 安心・感動・企画力 (existing copy, reused
   verbatim) stand in the plaza as small signposts, not a card grid.
   ========================================================================== */
.s3{
  position:relative; padding:56px 0 0; overflow:hidden;
  background: linear-gradient(180deg, #EBDFC5 0%, #E4D5AF 55%, var(--paper) 100%);
}
.s3 .section-head{ margin-bottom:8px; }
.s3-lede{ color:var(--ink-soft); font-size:14.5px; line-height:1.8; margin:14px 0 0; }

.s3-plaza{ position:relative; margin-top:28px; }
.s3-plaza::before{
  content:""; position:absolute; top:0; left:0; right:0; height:46px; z-index:2;
  background:linear-gradient(180deg, #EBDFC5 0%, rgba(235,223,197,0) 100%);
  pointer-events:none;
}

/* ---- PC: single wide plaza shot (hidden on mobile) ---- */
.s3-plaza-pc{ display:none; }
.s3-plaza-img{ display:block; width:100%; height:auto; }

.s3-signs{ position:absolute; inset:0; list-style:none; margin:0; padding:0; z-index:3; }
.s3-sign{ position:absolute; display:flex; align-items:flex-start; gap:9px; max-width:230px; }
.s3-sign-dot{
  flex-shrink:0; width:13px; height:13px; border-radius:50%; margin-top:5px;
  background:var(--pink); box-shadow:0 0 0 4px rgba(226,62,122,.18);
}
.s3-sign-chip{
  background:#F3E6CC; border-left:3px solid rgba(226,62,122,.45);
  border-radius:12px; padding:12px 14px;
  box-shadow:0 10px 20px -14px rgba(120,80,60,.22);
}
.s3-sign-chip .num{ font-family:var(--font-display); font-size:10.5px; color:var(--pink-deep); font-weight:700; letter-spacing:.08em; }
.s3-sign-chip h3{ font-size:15px; margin:3px 0 5px; }
.s3-sign-chip p{ font-size:11.5px; color:var(--ink-soft); line-height:1.6; margin:0; }

/* Scoped to .s3-sign (the PC absolute-positioned <li>) only — these
   top/left/right offsets must never apply to .s3-zone-sign (the mobile
   version), which relies on normal document flow + a negative margin
   for its overlap instead. */
.s3-sign.s3-sign-plan{ top:3%; left:36%; }
.s3-sign.s3-sign-moved{ top:53%; right:5%; }
.s3-sign.s3-sign-safe{ top:81%; left:15%; }

/* ---- mobile: walk the plaza — entrance, then center, then back ---- */
.s3-plaza-mobile{ display:block; }
.s3-zone{ position:relative; }
.s3-zone-img{ display:block; width:100%; height:250px; object-fit:cover; object-position:50% 50%; }

.s3-zone-sign{
  position:relative; z-index:2; margin:-22px 16px 20px; padding:14px 16px;
  background:#F3E6CC; border-left:3px solid rgba(226,62,122,.4);
  border-radius:14px; box-shadow:0 10px 20px -14px rgba(120,80,60,.22);
}
.s3-zone-sign .num{ font-family:var(--font-display); font-size:11px; color:var(--pink-deep); font-weight:700; letter-spacing:.08em; }
.s3-zone-sign h3{ font-size:17px; margin:4px 0 6px; }
.s3-zone-sign p{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; margin:0; }

@media (min-width:900px){
  .s3{ padding:88px 0 0; }
  .s3-plaza-mobile{ display:none; }
  .s3-plaza-pc{ display:block; }
  .s3-plaza{ margin-top:40px; }
}

/* ==========================================================================
   Section 4 — 広場から、あなたの場所へ。
   The dashed path from section 3 continues, forks at a small junction
   dot, and ends at 4 small paper-craft "gates" — not a white card grid.
   Same dashed-line/dot language and the same 4 icons as section 2, for
   visual continuity. No new imagery.
   ========================================================================== */
.s4{
  position:relative; padding:0 0 60px;
  background: linear-gradient(180deg, var(--paper) 0%, #F2EAD6 40%, var(--paper) 100%);
}
.s4-road{ display:flex; justify-content:center; }
.s4-road-line{ display:block; width:0; height:34px; border-left:2px dashed rgba(90,60,30,.32); }
.s4-fork{ position:relative; height:20px; display:flex; justify-content:center; }
.s4-fork-dot{
  width:12px; height:12px; border-radius:50%; margin-top:-2px;
  background:var(--pink); box-shadow:0 0 0 4px rgba(226,62,122,.16);
}
.s4 .section-head{ margin:18px auto 32px; }

/* ---- mobile: one path, gates alternating left/right ---- */
.s4-gates{
  position:relative; list-style:none; margin:0 auto; padding:0 20px; max-width:520px;
}
.s4-gates::before{
  content:""; position:absolute; left:50%; top:0; bottom:26px; width:0;
  border-left:2px dashed rgba(90,60,30,.3);
}
.s4-gate{ position:relative; width:56%; margin-bottom:40px; }
.s4-gate:last-child{ margin-bottom:0; }
.s4-gate-1, .s4-gate-3{ margin-right:44%; }
.s4-gate-2, .s4-gate-4{ margin-left:44%; }
.s4-gate-dot{
  position:absolute; top:30px; width:9px; height:9px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 3px rgba(226,62,122,.16); z-index:1;
}
.s4-gate-stub{
  position:absolute; top:34px; width:14%; height:0; border-top:2px dashed rgba(90,60,30,.3);
}
.s4-gate-1 .s4-gate-dot, .s4-gate-3 .s4-gate-dot{ right:-24px; }
.s4-gate-2 .s4-gate-dot, .s4-gate-4 .s4-gate-dot{ left:-24px; }
.s4-gate-1 .s4-gate-stub, .s4-gate-3 .s4-gate-stub{ right:-14%; }
.s4-gate-2 .s4-gate-stub, .s4-gate-4 .s4-gate-stub{ left:-14%; }

.s4-gate-link{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:#F3E6CC; border-radius:52px 52px 14px 14px;
  padding:24px 14px 18px; text-align:center;
  box-shadow:0 12px 22px -14px rgba(120,80,60,.22);
  border:1px solid rgba(226,62,122,.14);
  transition:transform .15s ease, box-shadow .15s ease;
}
.s4-gate-link:hover{ transform:translateY(-2px); box-shadow:0 16px 26px -14px rgba(120,80,60,.28); }
.s4-gate-arch{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; margin:0 auto 10px;
  background:#FBF3E2; box-shadow:inset 0 0 0 1px rgba(226,62,122,.18);
}
.s4-gate-icon{ width:22px; height:22px; fill:none; stroke:var(--pink-deep); stroke-width:1.6; }
.s4-gate-tag{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--pink-deep); font-weight:700; margin-bottom:6px; }
.s4-gate-hook{ display:block; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:6px; line-height:1.5; }
.s4-gate-desc{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:10px; }
.s4-gate-cta{ display:block; font-size:12px; font-weight:700; color:var(--pink-deep); }

@media (min-width:900px){
  .s4-road-line{ height:44px; }
  .s4-fork{ height:26px; }

  /* one shared dashed line spans all 4 dots, so the single fork point
     visibly splits into 4. Gates 1/3 sit further "forward" (lower, a
     touch larger) and 2/4 further "back" (higher, a touch smaller) —
     depth cues borrowed from the plaza photo's own near=low/far=high
     perspective — so the row reads as a little townscape, not a flat
     line of cards. Each stub leans a few degrees off vertical instead
     of dropping straight down, and a soft blurred ellipse under each
     gate grounds it on the paper "ground" instead of floating. */
  .s4-gates{
    position:relative; display:flex; align-items:flex-start; justify-content:center;
    gap:22px; max-width:1160px; padding:26px 40px 0;
  }
  .s4-gates::before{ content:none; }
  .s4-gates::after{
    content:""; position:absolute; top:0; left:14%; right:14%;
    border-top:2px dashed rgba(90,60,30,.32);
  }
  .s4-gate{ position:relative; width:auto; flex:1 1 230px; max-width:250px; margin:0; }

  .s4-gate-link{ margin-top:58px; transform:scale(1.05); transform-origin:bottom center; }
  .s4-gate-2 .s4-gate-link{ margin-top:8px; transform:scale(.92); }
  .s4-gate-3 .s4-gate-link{ margin-top:50px; transform:scale(1.05); }
  .s4-gate-4 .s4-gate-link{ margin-top:4px; transform:scale(.92); }
  .s4-gate-link:hover{ transform:scale(1.05) translateY(-2px); }
  .s4-gate-2 .s4-gate-link:hover, .s4-gate-4 .s4-gate-link:hover{ transform:scale(.92) translateY(-2px); }

  .s4-gate-dot{ top:0; left:calc(50% - 9px); right:auto; transform:none; }
  .s4-gate-2 .s4-gate-dot{ left:calc(50% + 7px); }
  .s4-gate-3 .s4-gate-dot{ left:calc(50% - 6px); }
  .s4-gate-4 .s4-gate-dot{ left:calc(50% + 8px); }

  .s4-gate-stub{
    top:0; left:50%; right:auto; width:0; height:58px;
    border-top:none; border-left:2px dashed rgba(90,60,30,.32);
    transform-origin:top center; transform:rotate(-7deg);
  }
  .s4-gate-2 .s4-gate-stub{ height:8px; transform:rotate(6deg); }
  .s4-gate-3 .s4-gate-stub{ height:50px; transform:rotate(-5deg); }
  .s4-gate-4 .s4-gate-stub{ height:4px; transform:rotate(7deg); }

  /* soft grounding shadow so each gate reads as standing on the paper,
     not floating on a white background */
  .s4-gate-link::after{
    content:""; position:absolute; left:50%; bottom:-9px; z-index:-1;
    width:64%; height:13px; transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(120,80,60,.26) 0%, rgba(120,80,60,0) 72%);
    filter:blur(1px);
  }

  .s4-gate-link{ padding:30px 20px 24px; border-radius:64px 64px 16px 16px; }
  .s4-gate-arch{ width:54px; height:54px; margin-bottom:14px; }
  .s4-gate-icon{ width:26px; height:26px; }
  .s4-gate-hook{ font-size:14.5px; }
  .s4-gate-desc{ font-size:12.5px; }
}

/* ==========================================================================
   Section 5 — こんなお悩み、ありませんか
   Bridge from the illustrated "walk the town" world (sections 1-4) to
   the plain, readable trust zone (section 6 onward). The dashed road
   takes one short, fading step and then ends; the section's own
   background gradient carries the page from section 4's warm ivory/
   pink down to section 6's flat --paper-raised tone. On mobile the 3
   pain panels themselves step down the same way (paper-craft -> quiet
   -> plain) as you scroll past them. Copy is unchanged from the
   original "課題提起" section.
   ========================================================================== */
.s5{
  position:relative; padding:0 0 60px;
  background: linear-gradient(180deg, #F3E6CC 0%, #F1EBDF 62%, #F1EBDF 100%);
}
.s5-road{ display:flex; justify-content:center; }
.s5-road-line{
  display:block; width:0; height:38px;
  border-left:2px dashed rgba(90,60,30,.28);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.s5 .section-head{ margin:22px auto 30px; }

.s5-grid{ display:grid; gap:18px; grid-template-columns:1fr; max-width:640px; margin:0 auto; }

.s5-pain{
  padding:20px 22px; background:#F3E6CC;
  border-radius:22px; border-left:3px solid rgba(226,62,122,.4);
  box-shadow:0 10px 20px -14px rgba(120,80,60,.2);
}
.s5-pain-q{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); margin-bottom:6px; }
.s5-pain-p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.7; }

/* mobile: step 2 of 3 — a touch quieter */
.s5-grid > .s5-pain:nth-child(2){
  background:#F6EEDD; border-left-color:rgba(226,62,122,.26);
  border-radius:16px; box-shadow:0 8px 16px -14px rgba(120,80,60,.16);
}
/* mobile: step 3 of 3 — settling into section 6's plain, readable register */
.s5-grid > .s5-pain:nth-child(3){
  background:#F8F4E9; box-shadow:none;
  border-radius:12px; border:1px solid var(--line);
  border-left:3px solid rgba(226,62,122,.16);
}

@media (min-width:900px){
  .s5-road-line{ height:46px; }
  .s5 .section-head{ margin:26px auto 34px; }
  .s5-grid{ grid-template-columns:repeat(3,1fr); max-width:1080px; gap:22px; }

  /* PC: the section's background gradient is the main transition
     device, so the 3 panels stay one paper-craft "set", only slightly
     quieter than section 4's gates, with a light left-to-right ease
     rather than mobile's 3-step drop to a plain bordered card. */
  .s5-pain{
    background:#F3E6CC; border-left-color:rgba(226,62,122,.36);
    box-shadow:0 8px 16px -12px rgba(120,80,60,.16); border-radius:18px; padding:24px 22px;
  }
  .s5-grid > .s5-pain:nth-child(2){
    background:#F5EAD8; border-left-color:rgba(226,62,122,.28);
    box-shadow:0 7px 14px -12px rgba(120,80,60,.14); border-radius:16px;
  }
  .s5-grid > .s5-pain:nth-child(3){
    background:#F7EFDF; border:none; border-left:3px solid rgba(226,62,122,.2);
    box-shadow:0 6px 12px -12px rgba(120,80,60,.12); border-radius:14px;
  }
}

/* ==========================================================================
   Section 6 — 選ばれる理由（運営体制の信頼ゾーン）
   No road, no dots, no illustrated scene — the "walk the town" motif
   ends at section 5. Paper texture, ivory and a little pink survive
   only as icon color, thin rules and heading accents, closer to a
   printed facility brochure than a SaaS card grid. Hygiene/allergy
   care (the one currently-confirmed item) is its own emphasized
   block; every other claim, including the founding-year one that used
   to read as settled fact, sits in a single checklist and carries the
   same .ph + "確認中" tag treatment.
   ========================================================================== */
.s6-lede{ color:var(--ink-soft); font-size:14.5px; margin:10px 0 0; max-width:56ch; }

.s6-hygiene{
  display:flex; align-items:flex-start; gap:16px;
  background:#FBF6EA; border:1px solid rgba(226,62,122,.16);
  border-radius:18px; padding:22px 24px; margin:32px 0 40px;
  box-shadow:0 10px 20px -16px rgba(120,80,60,.16);
}
.s6-hygiene-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:#F3E6CC; display:flex; align-items:center; justify-content:center;
}
.s6-hygiene-icon svg{ width:21px; height:21px; fill:none; stroke:var(--pink-deep); stroke-width:1.6; }
.s6-icon-dot{ fill:var(--pink-deep); stroke:none; }
.s6-hygiene h3{ font-size:16px; margin:0 0 6px; }
.s6-hygiene p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.75; }

.s6-checklist-head{ margin-bottom:12px; padding-top:20px; border-top:1px solid var(--line); }
.s6-checklist-head h3{
  font-family:var(--font-display); font-size:13px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink); margin:0 0 5px;
}
.s6-checklist-note{ font-size:11.5px; color:var(--ink-faint); margin:0; }

.s6-checklist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; }
.s6-check{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.s6-check-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; margin-top:1px;
  background:#F6F0E1; display:flex; align-items:center; justify-content:center;
}
.s6-check-icon svg{ width:18px; height:18px; fill:none; stroke:var(--pink-deep); stroke-width:1.6; }
.s6-check-body{ min-width:0; }
.s6-check-title{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink);
}
.s6-check-tag{
  font-size:9.5px; font-weight:700; color:var(--pink-deep); background:var(--pink-soft);
  border:1px dashed var(--pink-deep); border-radius:999px; padding:2px 8px; letter-spacing:.02em;
}
.s6-check p{ font-size:12.5px; margin:6px 0 0; line-height:1.7; }

@media (min-width:700px){
  .s6-checklist{ grid-template-columns:repeat(2,1fr); column-gap:36px; }
}

/* ==========================================================================
   Section 7 — 導入事例（テンプレート・仮データ）
   A little experiential warmth returns after section 6's brochure
   tone (background eases back toward a warmer ivory), but the road /
   big-dot street motif from sections 1-4 does not reappear — each
   case's WHERE/REQUEST/EXPERIENCE/CHANGE steps are joined by a small
   pink dot + hairline, at a much smaller UI scale than the street.
   ========================================================================== */
.s7{ background: linear-gradient(180deg, var(--paper-raised) 0%, #F8F1E2 40%, #F8F1E2 100%); }
.s7-note{ margin-top:12px; font-size:13px; }

.s7-cases{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:30px; }
.s7-case{ display:flex; flex-direction:column; gap:16px; }

.s7-case-photo .photo{
  border:1px solid rgba(226,62,122,.16);
  box-shadow:0 14px 26px -18px rgba(120,80,60,.28);
}

.s7-case-info h3{ font-size:16px; margin:0 0 12px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.s7-fake-tag{
  font-size:9.5px; font-weight:700; color:var(--pink-deep); background:var(--pink-soft);
  border:1px dashed var(--pink-deep); border-radius:999px; padding:2px 8px; letter-spacing:.02em;
}

.s7-timeline{ list-style:none; margin:0; padding:0; }
.s7-tl-item{ position:relative; padding:0 0 16px 22px; }
.s7-tl-item:last-child{ padding-bottom:0; }
.s7-tl-item::before{
  content:""; position:absolute; left:2px; top:5px; width:7px; height:7px;
  border-radius:50%; background:var(--pink);
}
.s7-tl-item:not(:last-child)::after{
  content:""; position:absolute; left:5px; top:15px; bottom:0; width:0;
  border-left:1px dashed rgba(226,62,122,.35);
}
.s7-tl-label{
  display:block; font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--pink-deep); margin-bottom:3px;
}
.s7-tl-text{ display:block; font-size:13px; color:var(--ink-soft); line-height:1.7; }

.s7-bridge{
  margin:40px 0 0; text-align:center; font-family:var(--font-display); font-weight:700;
  font-size:15px; color:var(--ink); padding-top:24px; border-top:1px solid var(--line);
}

@media (min-width:800px){
  .s7-case{ flex-direction:row; align-items:center; gap:36px; }
  .s7-case-photo{ flex:0 0 42%; }
  .s7-case-info{ flex:1 1 auto; }
  .s7-case-reverse{ flex-direction:row-reverse; }
}

/* ==========================================================================
   Section 8 — 動物紹介（出張スタッフとしての動物たち）
   Staff-ID-card metaphor rather than an animal catalogue: a square
   "portrait" (deliberately distinct from section 7's 4:3 event photos)
   plus a small name-plate list. All 3 cards are identical placeholder
   templates — no invented names/species/personality — ready to take
   real photo/name/species/personality/specialty data as soon as it
   exists. Same paper/ivory/pink register as section 7, soft rounded
   corners rather than a stiff corporate ID-badge look.
   ========================================================================== */
.s8-hook{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin:10px 0 6px; }

.s8-staff{ list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:20px; }
.s8-card{
  background:#FBF6EA; border:1px solid rgba(226,62,122,.16); border-radius:24px;
  padding:26px 22px; text-align:center;
  box-shadow:0 12px 24px -18px rgba(120,80,60,.22);
}
.s8-portrait{ width:128px; margin:0 auto 16px; }
.s8-portrait .photo{
  border-radius:22px; border:2px solid rgba(226,62,122,.22);
  box-shadow:0 8px 16px -10px rgba(120,80,60,.25);
}
.s8-id-badge{
  display:inline-block; font-size:10px; font-weight:700; color:var(--pink-deep); background:var(--pink-soft);
  border:1px dashed var(--pink-deep); border-radius:999px; padding:3px 10px; margin-bottom:16px; letter-spacing:.02em;
}
.s8-id-list{ margin:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
.s8-id-list > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding-bottom:8px; border-bottom:1px dashed var(--line); font-size:12.5px;
}
.s8-id-list dt{ color:var(--ink-faint); font-weight:600; flex-shrink:0; }
.s8-id-list dd{ margin:0; color:var(--ink-soft); text-align:right; }

@media (min-width:800px){
  .s8-staff{ grid-template-columns:repeat(3,1fr); gap:24px; }
}

/* Section is a short value statement, not a "coming soon" showcase:
   the existing selection-philosophy sentence is the star (larger,
   centered, a small pink dot for a touch of warmth instead of a big
   white card), and the placeholder note is reduced to one small line
   underneath rather than a badge+card. */
.s8-approach-wrap{ max-width:560px; margin:28px auto 0; text-align:center; }
.s8-approach-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--pink); margin-bottom:14px;
}
.s8-approach{ font-size:16px; color:var(--ink); line-height:1.85; margin:0; }
.s8-pending-note{ margin:18px auto 0; text-align:center; font-size:12px; color:var(--ink-faint); }

/* ==========================================================================
   Section 9 — 数字で見るPET TOWN
   Deliberately not a big-number stat-grid: none of the 4 figures are
   confirmed yet, so each item is a label + a plain 確認中/集計中 status.
   Trust-zone register continues (thin pink rule, small labels) but the
   soft paper-craft card look from sections 7/8 eases off — a first
   step toward section 10's plainer, action-oriented tone.
   ========================================================================== */
.s9{ padding:56px 0; }
.s9-note{ font-size:12.5px; color:var(--ink-faint); margin:10px 0 0; }

.s9-stats{ display:flex; flex-direction:column; margin-top:32px; border-top:1px solid var(--line); }
.s9-stat{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 2px; border-bottom:1px solid var(--line);
}
.s9-stat-label{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); }
.s9-stat-value{ font-size:12.5px; }

@media (min-width:700px){
  .s9-stats{
    flex-direction:row; border-top:1px solid rgba(226,62,122,.28);
    border-bottom:1px solid rgba(226,62,122,.28); margin-top:36px;
  }
  .s9-stat{
    flex:1; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; text-align:center; padding:26px 16px; border-bottom:none;
    border-left:1px solid var(--line);
  }
  .s9-stat:first-child{ border-left:none; }
}

/* ==========================================================================
   Section 10 — 出張の流れ
   Action zone: the 4 existing steps joined by a small dot + hairline
   (same UI scale as section 7's case timeline, not the big road from
   sections 1-4). STEP 01 carries a small pink tag for emphasis — no
   card, no big pink background. A lightweight CTA below reuses
   existing copy/links, deliberately more modest than the final
   cta-band.
   ========================================================================== */
.s10-steps{ list-style:none; margin:36px 0 0; padding:0; }
.s10-step{ position:relative; padding:0 0 28px 32px; }
.s10-step:last-child{ padding-bottom:0; }
.s10-step::before{
  content:""; position:absolute; left:2px; top:4px; width:9px; height:9px;
  border-radius:50%; background:var(--pink);
}
.s10-step:not(:last-child)::after{
  content:""; position:absolute; left:6px; top:17px; bottom:0; width:0;
  border-left:1px dashed rgba(226,62,122,.35);
}
.s10-step-num{
  display:block; font-family:var(--font-display); font-size:11px; font-weight:700;
  color:var(--pink-deep); letter-spacing:.06em; margin-bottom:5px;
}
.s10-step h3{ font-size:15.5px; margin:0 0 6px; }
.s10-step p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.7; max-width:52ch; }

.s10-step-first .s10-step-num{ font-size:13px; }
.s10-step-first h3{ font-size:17px; }
.s10-step-tag{
  display:inline-block; font-size:10px; font-weight:700; color:#fff; background:var(--pink);
  border-radius:999px; padding:2px 10px; margin-left:8px; letter-spacing:.02em; vertical-align:middle;
}

.s10-cta{ margin:40px 0 0; padding-top:24px; border-top:1px solid var(--line); }
.s10-cta p{ font-size:13px; color:var(--ink-soft); margin:0 0 12px; }
.s10-cta-actions{ display:flex; flex-wrap:wrap; gap:10px; }

@media (min-width:900px){
  .s10-steps{
    position:relative; display:flex; gap:28px; margin-top:46px; padding-top:22px;
  }
  .s10-steps::before{
    content:""; position:absolute; top:0; left:1%; right:1%;
    border-top:1px dashed rgba(226,62,122,.35);
  }
  .s10-step{ flex:1; padding:0 16px 0 0; }
  .s10-step::before{ top:-5px; left:0; }
  .s10-step:not(:last-child)::after{ content:none; }
  .s10-step-num{ font-size:12px; }
  .s10-step-first .s10-step-num{ font-size:14px; }
  .s10-step h3{ font-size:16px; }
  .s10-step-first h3{ font-size:18px; }

  .s10-cta{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    flex-wrap:wrap;
  }
  .s10-cta p{ margin:0; max-width:44ch; }
}

/* ---- final CTA + footer: index-only warm-brown closing tone ----
   .cta-band / .site-footer are shared by every page and stay untouched;
   these rules only apply where index.html also adds the s-final-cta /
   s-final-footer classes (compound selectors so specificity wins over
   the shared rules regardless of source order). Brown family echoes
   section 5's road-fade line color (rgba(90,60,30,...)), not the
   sitewide near-black --ink, so the page-bottom "closing" tone reads as
   PET TOWN's paper/papercut world continuing, not a generic dark
   corporate footer. Text/link/.ph colors below are re-tuned (checked
   against WCAG AA, 4.5:1+) for these lighter tan-brown backgrounds —
   the original shades were tuned for --ink and read too faint here. */
.cta-band.s-final-cta{ background:#46311F; color:#F5ECDD; }
.cta-band.s-final-cta .cta-phone{ color:#C2B499; }
.s-final-cta .ph{ border-bottom-color:#F2A9C4; }

.site-footer.s-final-footer{
  background:#5C4530; color:#D6C7AC;
  border-top:1px solid rgba(0,0,0,.18);
}
.site-footer.s-final-footer h4{ color:#EFE6D3; }
.site-footer.s-final-footer a{ color:#D6C7AC; }
.site-footer.s-final-footer a:hover{ color:#F2A9C4; }
.site-footer.s-final-footer .footer-bottom{ border-top-color:rgba(0,0,0,.18); color:#C6B99E; }
.site-footer.s-final-footer .footer-note{ color:#C6B99E; }
.s-final-footer .ph{ border-bottom-color:#F2A9C4; }

/* ---- footer: contact.html-only mocha-brown tone ----
   .site-footer stays untouched (shared by every page); this only
   applies where contact.html also adds s-contact-footer. Same mocha
   values as index.html's .s-final-footer, reused for consistency
   between the two pages' footers without touching the shared rule or
   any other page. */
.site-footer.s-contact-footer{
  background:#5C4530; color:#D6C7AC;
  border-top:1px solid rgba(0,0,0,.18);
}
.site-footer.s-contact-footer h4{ color:#EFE6D3; }
.site-footer.s-contact-footer a{ color:#D6C7AC; }
.site-footer.s-contact-footer a:hover{ color:#F2A9C4; }
.site-footer.s-contact-footer .footer-bottom{ border-top-color:rgba(0,0,0,.18); color:#C6B99E; }
.site-footer.s-contact-footer .footer-note{ color:#C6B99E; }
.s-contact-footer .ph{ border-bottom-color:#F2A9C4; }

/* ---- utility ---- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.center{ text-align:center; }
.small{ font-size:13px; color:var(--ink-soft); }
.hide-mobile{ display:none; } @media (min-width:700px){ .hide-mobile{ display:initial; } }