/* =============================================================================
   shinryo2.css - page-specific rules for shinryo2.php
   =============================================================================
   Loaded AFTER css/common2.css (shared header/nav/sections/footer).

   Price lists: the original drew them as text overlaid on raster "box"
   images (images/31.png, 32.png, 33.png, 34.png). They are real <table>
   markup now - add/remove/reorder a <tr>, nothing to recalculate. Colors
   below were sampled directly from those images.

   The white rectangle that partially covered images/111_poster_.png
   (originally #u16357) is reproduced approximately via .poster-mask.
   ============================================================================= */

:root {
  /* Sampled directly from the original's price-box images (31.png/32.png/
     33.png/34.png) -- both boxes use this same teal, not two different
     colors. */
  --price-box-teal: #73B6BC;
  --price-table-border: #BFBFBF;
}

/* ---- Animal-types poster + mask ---- */

.animal-poster {
  position: relative;
  margin-bottom: 14px;
  line-height: 0;
}

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

.animal-poster .poster-mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 17%;
  height: 100%;
  background: #FFFFFF;
}

/* ---- Price tables ----
   Direct replacement for the two overlay-text-on-raster-image "boxes"
   (images/31.png/32.png/33.png/34.png). Colors/border below were sampled
   straight from those images: solid teal behind the service name, white
   behind the price, and a thin gray grid line around every cell -- the grid
   line is what gives the outer border, since border-collapse merges each
   cell's own border into a single line at every shared edge. */

.price-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 8px 6px;
}

.price-table {
  border-collapse: collapse;
  flex: 1 1 320px;
  min-width: 280px;
}

/* This title row (診察/予防接種/猫/犬) isn't part of the original at all --
   the original's box images have no header row, just price rows. We kept a
   label here for clarity, but without the bordered-grid treatment the
   actual price rows have below, so it reads as a soft heading rather than
   another boxed table cell. */
.price-table__title {
  text-align: left;
  background: var(--price-box-teal);
  color: #FFFFFF;
  font-weight: bold;
  font-size: 16px;
  padding: 10px 14px;
  border: none;
}

.price-table th,
.price-table td {
  padding: 9px 14px;
  border: 1px solid var(--price-table-border);
  font-size: 15px;
  font-weight: normal;
  text-align: left;
}

.price-table th {
  background: var(--price-box-teal);
  color: #FFFFFF;
  white-space: nowrap;
}

.price-table td {
  background: #FFFFFF;
  color: #000000;
  text-align: right;
  white-space: nowrap;
}

.price-table .price-table__note td {
  text-align: center;
  white-space: normal;
  font-size: 13px;
  color: var(--color-note);
}

.surgery-tables {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px 6px;
}

.surgery-tables .price-table {
  flex: none;
  max-width: 560px;
}