/* =============================================================================
   common2.css - shared layout for the converted ("2") pages
   =============================================================================
   Split out of shinryo2.css so every converted page can share it. Holds
   everything that is the same on every page: color variables, page basics,
   the header (logo / tagline / contact / confetti), the nav bar, the white
   content panel, hero banner, .section / .section-banner headings,
   .section-text / .note, back-to-top, and the footer.

   Each page loads, in this order:
     css/site_global.css    (original Muse reset/typography - unchanged)
     css/master_a-____.css  (original Muse master - supplies the nav button
                             sprite images and confetti opacity by ID)
     css/common2.css        (this file)
     css/<page>2.css        (only what is unique to that page)

   Replaces the per-page Muse stylesheets (shinryo.css, staff.css, ...),
   where every element was placed with position:relative + hand-tuned
   margin-top/left pixel offsets. Here everything below the header uses
   normal document flow + Flexbox.

   Cache-busting `?crc=...` query strings (added automatically by Adobe
   Muse on publish) are not used; bump the ?v= number in the <link> tag
   instead when this file changes.
   ============================================================================= */

:root {
  --color-text: #333333;
  --color-muted: #666666;
  --color-note: #555555;
  --gradient-pink-start: #FFFFFF;
  --gradient-pink-end: #FDDCE2;
  --gradient-teal-start: #FFFFFF;
  --gradient-teal-end: #79B7BB;
  --color-divider: #BBDADC;
  --font-jp: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ",
             "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  --page-max-width: 1024px;
}

/* ---- Page basics ------------------------------------------------------- */

html {
  background: #FFFFFF url("../images/halftone.jpg") repeat left top scroll;
}

body {
  color: var(--color-text);
  font-family: var(--font-jp);
  margin: 0;
  padding-bottom: 60px;
  /* The original design is a fixed 1024px canvas, not a responsive layout
     (mobile visitors get an entirely separate page via
     makeSmartPhonePage()/$ua->isSmartPhone() in each page) - matching
     that here rather than reflowing the desktop version narrower. */
  min-width: 1024px;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---- Header -------------------------------------------------------------
   The header is one place where we kept the original's fixed 1024px canvas
   and real measured positions (pulled from the live site with the browser's
   dev tools) rather than reflowing it, because it's a small, self-contained
   band and Ron wanted it to look as close to the original as possible.
   Everything below the header (the actual page content Ron wants to be
   able to edit) uses normal flow/Flexbox as described further down.

   Note: #u6753/#u5489/#u6762/#u6771/#u6780/#u6789/#u6807/#u6798 (the
   scattered paw-print "confetti") and the #buttonuNNN nav links reuse their
   original IDs on purpose, so the opacity and nav sprite-image rules already
   defined for those IDs in css/master_a-____.css keep applying unchanged -
   only their positioning is redone here. */

.site-header {
  width: 1024px;
  margin: 0 auto;
  background: #FFFFFF;
  padding-bottom: 14px;
}

.identity-band {
  position: relative;
  width: 1024px;
  height: 135px;
}

.tagline-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 24px;
  background: linear-gradient(to bottom, #EF97A5, #F18598 100%);
  z-index: 2;
}

.site-tagline {
  margin: 0;
  padding-left: 22px;
  line-height: 24px;
  font-size: 14px;
  color: #FFFFFF;
}

/* Scattered background paw prints. The originals are also rotated a few
   degrees each via a CSS matrix() transform defined (per-ID) in
   master_a-____.css; we cancel that here and place them unrotated at their
   approximate original screen position, since chasing the exact rotation
   math wasn't worth it for a barely-visible (13-17% opacity) background
   flourish. Opacity itself is untouched and still comes from master_a. */
.header-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.confetti {
  position: absolute;
}

.confetti img {
  display: block;
}

#u6753, #u5489, #u6762, #u6771, #u6780, #u6789, #u6807, #u6798 {
  transform: none;
}

#u6753 { left: 854px; top: 30px;  }
#u5489 { left: 336px; top: 110px; }
#u6762 { left: 389px; top: 67px;  }
#u6771 { left: 441px; top: 110px; }
#u6780 { left: 465px; top: 48px;  }
#u6789 { left: 513px; top: 94px;  }
#u6807 { left: 591px; top: 74px;  }
#u6798 { left: 538px; top: 31px;  }

.site-logo {
  position: absolute;
  left: 20px;
  top: 38px;
  z-index: 1;
  display: block;
}

.clinic-brand {
  position: absolute;
  left: 135px;
  top: 49px;
  z-index: 1;
}

.clinic-brand a {
  display: block;
}

.contact-info {
  position: absolute;
  left: 658px;
  top: 45px;
  width: 349px;
  height: 78px;
  z-index: 1;
}

.contact-paw {
  position: absolute;
  left: 0;
  top: 18px;
}

.contact-phone {
  position: absolute;
  left: 49px;
  top: 0;
}

.contact-address {
  position: absolute;
  left: 4px;
  top: 50px;
}

/* Nav sits in normal flow just below the identity band. The order of the
   <a id="buttonuNNN"> elements in each page now matches the original's
   *visual* left-to-right order (which, in the original, came from absolute
   `left` offsets rather than source order) - so a plain Flexbox row with no
   `order` overrides reproduces it. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 22px;
  margin-top: 12px;
}

/* Soft pink halo behind the nav row. The buttons (30px tall) sit flush with
   the top of this 40px band, so the uncovered strip along the bottom shows
   the gradient's most intense color - same effect as the original. */
.site-nav-band {
  width: 1024px;
  height: 40px;
  margin-top: 12px;
  background: linear-gradient(to bottom, #FFFFFF 0%, #FDCED7 100%);
}

.site-nav-band .site-nav {
  margin-top: 0;
}

/* .Button / .ButtonSelected / :hover backgrounds come from
   css/master_a-____.css (per-ID sprite images) - only size lives here. */
.site-nav a.Button {
  display: block;
  height: 30px;
  border-radius: 3px;
}

#buttonu402  { width: 88px;  }
#buttonu720  { width: 92px;  }
#buttonu728  { width: 93px;  }
#buttonu779  { width: 207px; }
#buttonu785  { width: 106px; }
#buttonu803  { width: 117px; }
#buttonu2586 { width: 94px;  }
#buttonu821  { width: 102px; }

/* ---- Main content panel -------------------------------------------------
   Everything that used to live in dozens of `#pXXXX`/`#uXXXX` wrapper divs
   now lives in plain <section> blocks that stack top to bottom. */

.content-panel {
  width: 984px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 19px 20px 30px;
  box-sizing: content-box;
}

.hero-banner {
  position: relative;
  margin-bottom: 28px;
  line-height: 0;
}

.hero-banner img.hero-bg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-banner img.hero-title {
  position: absolute;
  left: 3%;
  top: 18%;
}

.section {
  margin-bottom: 36px;
}

.section-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 4px 40px;
  margin-bottom: 16px;
  position: relative;
}

/* The original's version of this bar was a separate, very short (18px)
   strip that the heading image overlapped, so almost all of its height read
   as solid color with just a sliver of white at the very top. Rather than
   rebuild that overlap trick, we get the same "intense color at the bottom,
   fast fade to white above" look by pushing the color stop most of the way
   down the gradient instead of spreading it evenly top-to-bottom. */
.section-banner.gradient-pink {
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 55%, var(--gradient-pink-end) 100%);
}

.section-banner.gradient-teal {
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 55%, var(--gradient-teal-end) 100%);
}

.section-banner.gradient-line {
  background: none;
  border-bottom: 4px solid var(--color-divider);
  padding-left: 0;
}

/* Paw-print accent at the start of a section heading (originally separate
   rotated <img> elements - images/98_poster_.png and images/95_poster_.png
   - sitting just to the left of the heading graphic; the last heading,
   去勢・避妊手術, never had one in the original either). */
.section-paw {
  flex: none;
  display: block;
}

.paw-a {
  transform: rotate(4deg);
}

.paw-b {
  transform: rotate(7deg);
}

.section-text {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 12px 6px;
}

.section-text.small {
  font-size: 14px;
  line-height: 1.6;
}

.section-text p,
.note {
  margin: 0 0 4px;
}

.note {
  font-size: 13px;
  color: var(--color-note);
  margin: 4px 0 18px 6px;
}

/* ---- Back-to-top ----
   `position: fixed` replaces the original's absolute offset tied to the
   page's total pixel height (which had to be re-measured any time content
   above it changed). */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: block;
  opacity: 0.85;
}

.back-to-top:hover {
  opacity: 1;
}

.back-to-top img {
  display: block;
  width: 40px;
  height: 40px;
}

/* ---- Footer --------------------------------------------------------------
   The tree/animal icons (tree.png, sanpo1/2.png, 62-66_poster_.png,
   72_poster_.png) are pre-colored pink PNGs, not white icons tinted via
   CSS -- confirmed by sampling their pixels, which all land in the same
   pink family as the ground bar below. They sit on the plain white page
   background; only the strip directly behind the copyright line is filled
   in as the solid pink "ground". */

.site-footer {
  width: 1024px;
  margin: 0 auto;
  padding: 24px 0 0;
  box-sizing: border-box;
}

.footer-deco {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 0;
  /* Sit flush on top of the ground bar, not floating above it. */
  line-height: 0;
}

.footer-deco img {
  display: block;
  max-height: 85px;
  width: auto;
}

.footer-ground {
  width: 100%;
  background: #EF97A5;
  padding: 24px 20px;
  text-align: center;
  box-sizing: border-box;
}

.copyright {
  font-size: 13px;
  color: #FFFFFF;
  margin: 0;
}