@charset "utf-8";
/* ==========================================================================
   R3D-PROTOTYPE-20260906 · 英国ゴールデンレトリバー VILLA — TOP + detail template
   Baseline: R3B-3. The approved full-bleed responsive architecture is KEPT:
   every band's background runs 0 -> 100vw at every width, and the reading
   content is held by an inner gutter. Nothing returns to a fixed canvas.

   What R3C changes, and only this:

     · DENSITY. R3B packed four-column text grids, photo mosaics and copy into
       the same viewport. Every section is now ONE dominant message plus, at
       most, one supporting photographic band, and the two are separated by
       real vertical space (72 - 140px per band edge).
     · MEASURE. Running copy is capped at 42em and never stretches to the
       full 1760 content column, so a 1920 line is ~44 Japanese characters.
     · TYPE. Body 18 - 20px / 1.92. Lead 20 - 23px. H2 30 - 56px. On a phone
       nothing meaningful renders below 18px.
     · The decorative English micro-headings (ABOUT THE BREED / THE GROUNDS /
       HERITAGE / VIDEO / LATEST) are GONE — they competed with the Japanese
       H2 that carries the actual sales message.
     · The repeated "NEXT" cue badges are GONE. At 1920 one of them painted
       over the photo strip below it. Progression is now carried by the copy.

   Containment rule, unchanged from R3B: every ornament is a separate .svg in
   a wrapper of its own size with overflow:hidden. There is NO GLOBAL `svg {}`
   rule here and no sprite sheet.
   ========================================================================== */

@import url("assets/fonts/fonts.css");

:root{
  --ivory:#F7F2E4;
  --ivory-2:#FBF8F0;
  --paper:#EDE4CD;
  --green-d:#08221A;
  --green:#0E3527;
  --green-l:#1A5039;
  --gold-d:#7E5F1C;
  --gold:#B08B2E;
  --gold-l:#E8D294;
  --gold-h:#FCF3D8;
  --ink:#1B2621;

  --jp:"Noto Serif JP","Yu Mincho",YuMincho,"Hiragino Mincho ProN","MS PMincho",serif;
  --jp-s:"Noto Sans JP","Yu Gothic UI","Yu Gothic","Hiragino Sans",sans-serif;
  --la:"Cinzel",Georgia,"Times New Roman",serif;

  --seam:3px;

  /* full-bleed architecture, carried over from R3B-2 unchanged */
  --pad:    clamp(20px, 3.8vw, 80px);
  --maxw:   1760px;
  --gut:    max(var(--pad), calc((100vw - var(--maxw)) / 2));

  /* R3C section rhythm. This single pair of tokens is what fixes the
     "everything crammed into one viewport" reading of R3B. */
  --band:   clamp(72px, 7.2vw, 140px);   /* section vertical padding        */
  --gap-ph: clamp(44px, 4.6vw, 88px);    /* copy -> supporting photo band   */
  --measure: 42em;                        /* running-copy reading width      */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--jp);font-feature-settings:"palt" 1;overflow-x:hidden;
}
img{display:block;border-style:none;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
iframe{display:block;border:0}
.page{width:100%;background:var(--ivory);position:relative;overflow:hidden}

/* --------------------------------------------------------------- ornament --
   One rule, and it only applies to elements carrying an explicit size. */
.o{display:block;overflow:hidden;position:relative;flex:none}
.o>img{width:100%;height:100%}

.gilt{
  background:linear-gradient(180deg,#8A6A21 0%,#C9A44A 22%,#FBF1D2 48%,#E0C173 62%,#9A7526 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hair{height:1px;background:linear-gradient(90deg,rgba(176,139,46,0),var(--gold) 18%,var(--gold-h) 50%,var(--gold) 82%,rgba(176,139,46,0))}
.hair.w220{width:clamp(150px,15.3vw,280px);margin:20px 0 26px}
.hair.w320{width:clamp(180px,20vw,360px);margin:clamp(20px,1.8vw,30px) 0 clamp(26px,2.4vw,40px)}
.hair.c{margin-left:auto;margin-right:auto}
.c{text-align:center}

/* ================================================== shared type =========== */
/* Japanese has no word boundaries, so a heading breaks anywhere the box
   runs out — R3B-3 split ください into くだ / さい. These are author-set
   break points; they carry no text of their own and are dropped on a
   phone, where the heading is 30px and wraps naturally. */
.h2 br.hb{display:inline}
/* phone-only break. 「ゴールデンレトリーバー」 is 11 characters — at the 30px
   phone floor it cannot fit a 350px column, so it MUST break somewhere.
   Left alone Chrome broke it 「…レトリー / バー」; this breaks it at the
   compound boundary instead. */
.h2 br.hb-sp{display:none}
/* H2. 44 - 56px on a desktop where the composition allows, 30px floor on a
   phone. The measure cap keeps a 56px heading to two or three lines. */
.h2{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(30px,3.35vw,56px);line-height:1.34;letter-spacing:.035em;
  color:#101B15;max-width:19em;
  /* Japanese has no spaces, so a browser breaks a heading wherever the box
     runs out — at 390 this split 「ご覧ください」 as 「ご / 覧ください」.
     auto-phrase breaks at phrase boundaries instead. Chrome 119+; older
     engines simply fall back to the default and lose nothing else. */
  word-break:auto-phrase;
  line-break:strict;
}
/* a two-up section gives its heading less width, so it takes a slightly
   smaller size and keeps its own controlled break points */
.sec-in.split .h2{font-size:clamp(30px,2.90vw,48px);max-width:none}
.h2.c{margin-inline:auto}
.h2.on-dark{color:var(--gold-h);text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* running copy: 18 - 20px, line-height 1.92, measure 42em */
.body{
  font-family:var(--jp);font-size:clamp(18px,1.18vw,20px);line-height:1.92;
  letter-spacing:.05em;color:#2E3F37;max-width:var(--measure);
  margin-bottom:clamp(18px,1.35vw,26px);
}
.body:last-of-type{margin-bottom:0}
.body.c{margin-inline:auto}
.body.on-dark{color:#DEE9E2}
.body.em{color:#4E3D10;font-weight:700}
.body.on-dark.em-l{color:var(--gold-h);font-weight:700;font-size:clamp(19px,1.35vw,23px);line-height:1.82}

.intro-lead{
  font-family:var(--jp);font-size:clamp(19px,1.42vw,23px);line-height:1.96;
  letter-spacing:.05em;color:#2E3F37;
}

.sub-link{margin-top:clamp(20px,1.6vw,30px)}
.sub-link a{
  font-family:var(--jp);font-weight:700;font-size:clamp(17px,1.1vw,19px);
  letter-spacing:.06em;color:#5E4712;
  border-bottom:1px solid rgba(176,139,46,.7);padding-bottom:3px;
}

/* source line for the breed facts — small but never below the 16px floor */
.src{
  margin-top:clamp(26px,2.2vw,40px);max-width:var(--measure);
  font-family:var(--jp-s);font-size:clamp(16px,1.02vw,17px);line-height:1.86;
  letter-spacing:.03em;color:#5A6862;
}
.src-h{font-family:var(--jp-s);font-weight:700;color:#4E5C56;margin-bottom:8px}
.src-l{display:flex;flex-wrap:wrap;gap:6px clamp(14px,1.2vw,22px)}
.src-l li{position:relative}
.src-l li+li::before{
  content:"";position:absolute;left:calc(-1 * clamp(7px,.6vw,11px));top:.35em;bottom:.35em;
  width:1px;background:rgba(176,139,46,.5);
}
.src a{display:inline-block;color:#5E4712;border-bottom:1px solid rgba(176,139,46,.55)}

/* --------------------------------------------------------------- buttons -- */
.btn-row{display:flex;flex-wrap:wrap;gap:clamp(14px,1.3vw,22px);margin-top:clamp(30px,2.6vw,46px)}
.btn-row.c{justify-content:center}
.glink{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:clamp(56px,3.6vw,62px);
  padding:clamp(12px,.9vw,16px) clamp(22px,1.7vw,32px);
  font-family:var(--jp);font-weight:700;font-size:clamp(17px,1.12vw,19.5px);
  letter-spacing:.09em;color:#4E3D10;border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(255,252,240,.96),rgba(240,228,196,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.glink .ar{width:26px !important;height:12px !important;flex:none}
.glink.big{min-height:clamp(62px,4.2vw,72px);font-size:clamp(18px,1.2vw,21px);
  padding:clamp(15px,1.15vw,22px) clamp(26px,2.1vw,40px);letter-spacing:.11em}
/* section-level TIER 1 button: filled gold, still visibly under the BIG YES */
.glink.primary{
  color:#3A2C07;border-color:var(--gold-d);
  background:linear-gradient(180deg,#FBF1D2 0%,#EBD79A 46%,#D8BC6A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 4px 14px rgba(90,66,12,.26);
}
.glink.on-green{
  color:var(--gold-h);border-color:var(--gold-l);
  background:linear-gradient(180deg,rgba(26,80,57,.94),rgba(8,34,26,.94));
}

/* --------------------------------------------------------------- price ---- */
.price{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:min(520px,100%);height:clamp(62px,4.6vw,70px);
  margin:clamp(30px,2.6vw,46px) auto 0;
}
.price .o{position:absolute;inset:0;width:100% !important;height:100% !important}
.price .o>img{width:100%;height:100%;object-fit:fill}
.price>span:last-child{
  position:relative;z-index:1;font-family:var(--jp);font-weight:700;
  font-size:clamp(18px,1.35vw,22px);letter-spacing:.13em;text-indent:.13em;color:#4A3809;
}
.price.on-dark>span:last-child{color:#3A2C07}

/* =========================================== 0. UTILITY / GLOBAL NAV ====== */
.util{
  min-height:38px;background:linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);border-bottom:1px solid rgba(232,210,148,.34);
}
.util-l{font-family:var(--jp);font-weight:600;font-size:clamp(15px,1.06vw,17px);letter-spacing:.09em;color:#D0DDD4}
.util-l span{color:var(--gold-l);padding:0 9px}
.util-r{display:flex}
.util-r a{
  font-family:var(--jp);font-weight:600;font-size:clamp(15px,1.06vw,17px);letter-spacing:.09em;
  color:var(--gold-h);padding:10px clamp(12px,1.05vw,20px);
  border-left:1px solid rgba(232,210,148,.26);
}
.util-r a:first-child{border-left:0}

/* The header is a REAL band now, not an overlay. The approved hero artwork
   carries burned-in text at its top edge; a floating nav would sit on it. */
.head{background:var(--ivory);border-bottom:1px solid rgba(176,139,46,.4)}
.gnav{
  height:clamp(64px,5.0vw,88px);display:flex;align-items:center;
  padding-inline:var(--gut);
}
.gnav-brand{display:flex;align-items:baseline;gap:clamp(6px,.63vw,12px);flex:none}
.gb-jp{font-family:var(--jp);font-weight:700;font-size:clamp(16px,1.20vw,23px);letter-spacing:.03em;color:#141F19}
.gb-la{font-family:var(--la);font-weight:700;font-size:clamp(16px,1.25vw,23px);letter-spacing:.16em;text-indent:.16em}
.gnav-main{display:flex;align-items:center;margin-left:auto;gap:0}
.gnav-main a{
  font-family:var(--jp);font-weight:600;font-size:clamp(14px,1.02vw,18px);letter-spacing:.07em;
  color:#1E2C24;padding:10px clamp(9px,.95vw,19px);position:relative;white-space:nowrap;
}
.gnav-main a+a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:rgba(176,139,46,.55);
}
.gnav-cta{
  flex:none;margin-left:clamp(14px,1.5vw,32px);display:flex;align-items:center;
  height:clamp(46px,3.0vw,56px);padding:0 clamp(18px,1.6vw,32px);
  font-family:var(--jp);font-weight:700;font-size:clamp(16px,1.15vw,19px);
  letter-spacing:.14em;text-indent:.14em;color:var(--gold-h);
  background:linear-gradient(160deg,var(--green-l),var(--green-d));
  border:1px solid var(--gold);box-shadow:0 0 0 1px rgba(232,210,148,.28),0 4px 12px rgba(0,0,0,.18);
}
.gnav-sp-only{display:none}
.mtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.mbtn{display:none}

/* ============================================================== S1. HERO ==
   The user-approved artwork, shown COMPLETE at every width — no crop, no mat,
   no overlay, no added CTA. PC and mobile are two separate approved files and
   are switched by <picture>. */
.hero{background:var(--green-d);line-height:0}
.hero-img{width:100%;height:auto}

/* the semantic band. It carries the real H1 and the real lead sentence, so
   the page has proper headings even though the artwork has text burned in. */
.intro{
  background:var(--ivory-2);padding:clamp(52px,4.6vw,84px) var(--gut) clamp(48px,4.2vw,78px);
  border-bottom:1px solid rgba(176,139,46,.32);text-align:center;
}
.intro-in{max-width:56em;margin-inline:auto}
.intro-h{display:flex;align-items:baseline;justify-content:center;gap:clamp(8px,.9vw,18px);flex-wrap:wrap}
.ih-jp{font-family:var(--jp);font-weight:700;font-size:clamp(26px,2.5vw,42px);letter-spacing:.03em;color:#141F19}
.ih-la{font-family:var(--la);font-weight:700;font-size:clamp(27px,2.6vw,44px);letter-spacing:.16em;text-indent:.16em}

/* ------------------------------------------------------ the four proofs --- */
.proof{
  background:linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,2.4vw,54px);
  padding:clamp(44px,3.8vw,72px) var(--gut);
}
.pf{position:relative;padding-left:clamp(18px,1.8vw,36px)}
.pf:first-child{padding-left:0}
.pf::before{
  content:"";position:absolute;left:calc(-1 * clamp(12px,1.2vw,27px));top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,rgba(232,210,148,0),rgba(232,210,148,.55) 22%,rgba(232,210,148,.55) 78%,rgba(232,210,148,0));
}
.pf:first-child::before{display:none}
.pf-n{
  display:block;font-family:var(--la);font-weight:700;
  font-size:clamp(42px,3.4vw,56px);line-height:1;letter-spacing:.01em;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
.pf-n em{font-family:var(--jp);font-style:normal;font-size:clamp(18px,1.4vw,25px);letter-spacing:.03em}
.pf-i{margin-bottom:clamp(10px,.9vw,16px)}
.pf-i.o{width:clamp(38px,3.1vw,50px) !important;height:clamp(38px,3.1vw,50px) !important}
.pf-t{
  margin-top:clamp(12px,1.1vw,20px);font-family:var(--jp);font-weight:700;
  font-size:clamp(18px,1.32vw,23px);line-height:1.5;letter-spacing:.05em;color:var(--gold-h);
}
.pf-p{
  margin-top:clamp(10px,.9vw,16px);font-family:var(--jp);
  font-size:clamp(16px,1.06vw,18px);line-height:1.86;letter-spacing:.04em;color:#D3E0D8;
}

/* ====================================================== section shell ===== */
.sec{position:relative;padding-block:var(--band);background:var(--ivory)}
.sec-in{padding-inline:var(--gut);position:relative;z-index:2}
/* A centred reading column must NOT also carry the full-bleed --gut, or the
   two subtract from each other: at 2560 --gut is 400px a side, which left a
   160px text ribbon and stretched the FAQ to 4208px. A narrow block centres
   itself on its own measure and takes only --pad. */
.sec-in.narrow{max-width:calc(var(--measure) + 8em + 2 * var(--pad));
  padding-inline:var(--pad);margin-inline:auto}
.sec-in.narrow.c .body,.sec-in.narrow.c .h2{margin-inline:auto}
.col{min-width:0}

/* two-up: ONE block of copy and ONE photograph. Never more. */
.sec-in.split{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(40px,4.4vw,96px);align-items:center;
}
.sec-in.split-r{direction:rtl}
.sec-in.split-r>*{direction:ltr}

.fig-main img{width:100%;height:auto}
.fig-main{
  border:3px solid transparent;
  background:linear-gradient(150deg,#7E5F1C,#E8D294 26%,#FCF3D8 46%,#C9A44A 68%,#7E5F1C) border-box;
  box-shadow:0 0 0 1px rgba(60,44,10,.55),0 16px 34px rgba(20,14,0,.22);
}
.fig-main figcaption{
  padding:clamp(12px,1.0vw,18px) clamp(14px,1.2vw,22px);background:rgba(8,34,26,.93);
  font-family:var(--jp);font-size:clamp(16px,1.02vw,17.5px);line-height:1.72;
  letter-spacing:.04em;color:#DCE7E0;
}

.stack2{display:grid;gap:clamp(16px,1.5vw,26px)}
.stack2 img{width:100%;height:auto}

/* ------------------------------------------ full-bleed photographic bands --
   These sit BELOW the copy with --gap-ph of air, never beside it. That is the
   whole of the "one dominant message per section" correction. */
.pano{margin-top:var(--gap-ph);position:relative}
.pano img{width:100%;height:clamp(220px,26vw,520px);object-fit:cover}
.pano.pano-in img{height:clamp(300px,44vw,660px);object-position:50% 74%}
/* pano-band: a finished banner image whose caption is burned into the artwork.
   Shown whole at its own aspect ratio - no cover crop - and the DOM caption is
   kept for assistive tech only, so no second copy of the text sits on the photo. */
.pano.pano-band img{height:auto;object-fit:contain;display:block}
.pano.pano-band figcaption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;
  border:0;background:none;
}
.pano figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(26px,2.4vw,44px) var(--gut) clamp(14px,1.3vw,24px);
  background:linear-gradient(180deg,rgba(6,26,19,0),rgba(6,26,19,.82));
  font-family:var(--jp);font-weight:600;font-size:clamp(16px,1.08vw,19px);
  line-height:1.66;letter-spacing:.05em;color:#EFF5F0;
}

.trio,.duo,.quad{display:grid;gap:var(--seam);background:var(--gold);margin-top:var(--gap-ph)}
.trio{grid-template-columns:repeat(3,1fr)}
.duo{grid-template-columns:repeat(2,1fr)}
.quad{grid-template-columns:repeat(4,1fr)}
.trio img,.duo img,.quad img{width:100%;height:clamp(190px,20vw,380px);object-fit:cover}
.trio.trio-tight img{height:clamp(180px,17vw,320px)}
.trio figure,.duo figure{position:relative;background:var(--green-d)}
.trio figcaption,.duo figcaption{
  padding:clamp(12px,1.05vw,18px) clamp(14px,1.2vw,22px);
  font-family:var(--jp);font-size:clamp(16px,1.02vw,17.5px);line-height:1.68;
  letter-spacing:.04em;color:#DCE7E0;
}

/* duo-nocrop: user-final photographs shown WHOLE at their own aspect ratio.
   The default .duo img cover-crop at a fixed height cut the dog, the parasol
   and the table out of frame, so here the card grows to the picture instead of
   the picture being cut to the card. Scoped to this one row only. */
.duo.duo-nocrop img{height:auto;object-fit:contain;display:block}
.duo.duo-nocrop figure{display:flex;flex-direction:column}
.duo.duo-nocrop figcaption{margin-top:auto}

/* ---------------------------------------------------------- band colours -- */
.sec-par{background:var(--ivory-2)}
.sec-pup{background:var(--ivory)}
.sec-breed{background:var(--ivory-2)}
.sec-life{background:var(--ivory)}
.sec-hist{background:linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%)}

/* -- S4 HISTORY photo pair -------------------------------------------------
   Scoped to .sec-hist / .hist-stack ONLY: the S7 .stack2 and every other
   figure on the page keep their own rules. The two photographs are 1448x1086
   (4:3) with type burned into the frame, so they are shown WHOLE -- one
   shared width, one shared box, contain, never cover. */
.hist-stack{gap:clamp(16px,1.45vw,24px);align-content:center}
.hist-stack figure{margin:0}
.hist-stack img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:contain;
}

@media (min-width:1200px){
  /* left photo column 45%, right copy column 55% -- the 1.25/.75 default made
     the pair too narrow to read as one story beside the copy. split-r is rtl,
     so track 1 is the copy on the right and track 2 the photographs on the
     left. */
  .sec-hist .sec-in.split{
    grid-template-columns:minmax(0,1.10fr) minmax(0,.90fr);
    gap:clamp(40px,3.8vw,80px);
  }
}

@media (min-width:700px) and (max-width:1199px){
  /* the generic .stack2 goes two-up here, which would render this pair
     NARROWER on a tablet (347px) than on a phone (350px) and shrink the type
     burned into each frame. This pair stays stacked, on its own measure. */
  .sec-hist .hist-stack{grid-template-columns:1fr;max-width:640px}
}

@media (max-width:699px){
  /* one column: the photo story leads, exactly as it does on the desktop
     left-hand side, then the heading and copy. */
  .sec-hist .hist-stack{order:-1}
}
.sec-faq{background:var(--ivory-2)}

/* ============================================================ S5. VIDEO === */
.sec-vid{background:var(--green-d)}
.vid-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.30;z-index:0;filter:saturate(.8);
}
.sec-vid::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,34,26,.86),rgba(8,34,26,.94));
}
.sec-vid>.sec-in,.sec-vid>.vids{position:relative;z-index:2}
.vids{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,2.6vw,52px);
  padding-inline:var(--gut);margin-top:var(--gap-ph);
}
.vid-frame,.yt{position:relative}
.yt{
  aspect-ratio:16/9;overflow:hidden;background:#04140F;
  border:3px solid transparent;
  background-image:linear-gradient(#04140F,#04140F),
    linear-gradient(150deg,#7E5F1C,#E8D294 26%,#FCF3D8 46%,#C9A44A 68%,#7E5F1C);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.yt>img,.yt>picture>img{width:100%;height:100%;object-fit:cover}
.yt>iframe{width:100%;height:100%}
.yt-play{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(14px,1.3vw,22px);
  background:linear-gradient(180deg,rgba(4,20,15,.16),rgba(4,20,15,.5));
}
.yt-badge{
  width:clamp(72px,5.4vw,92px);height:clamp(72px,5.4vw,92px);flex:none;
  border-radius:50%;border:2px solid var(--gold-l);
  background:radial-gradient(closest-side,rgba(8,34,26,.9),rgba(8,34,26,.72));
  box-shadow:0 6px 20px rgba(0,0,0,.42);position:relative;
}
.yt-badge::after{
  content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:clamp(11px,.85vw,15px) 0 clamp(11px,.85vw,15px) clamp(19px,1.45vw,25px);
  border-color:transparent transparent transparent var(--gold-h);
}
.yt-lab{
  font-family:var(--jp);font-weight:700;font-size:clamp(17px,1.15vw,19.5px);
  letter-spacing:.14em;text-indent:.14em;color:var(--gold-h);
  padding:9px clamp(16px,1.3vw,24px);
  background:rgba(8,34,26,.8);border:1px solid rgba(232,210,148,.6);
}
.vid figcaption{margin-top:clamp(16px,1.4vw,26px)}
.vid figcaption b{
  display:block;font-family:var(--jp);font-weight:700;
  font-size:clamp(18px,1.28vw,22px);line-height:1.5;letter-spacing:.05em;color:var(--gold-h);
}
.vid figcaption em{
  display:block;margin-top:8px;font-style:normal;font-family:var(--jp);
  font-size:clamp(16px,1.05vw,18px);line-height:1.82;letter-spacing:.04em;color:#CCDCD3;
}

/* ============================================================ S6. BREED === */
.pull{
  position:relative;max-width:52em;margin:clamp(44px,3.8vw,72px) 0 0;
  padding:clamp(38px,3.0vw,58px) clamp(26px,2.2vw,44px) clamp(30px,2.4vw,46px);
  background:linear-gradient(180deg,rgba(255,253,246,.92),rgba(243,234,212,.92));
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
}
.pull-orn{position:absolute;left:50%;top:clamp(12px,1.0vw,18px);transform:translateX(-50%)}
.pull-orn.o{width:clamp(110px,10vw,148px) !important;height:clamp(19px,1.76vw,26px) !important}
.pull p{
  font-family:var(--jp);font-weight:700;font-size:clamp(18px,1.28vw,22px);
  line-height:1.94;letter-spacing:.05em;color:#463607;text-align:center;
}
/* the breed section's closing group is centred so it does not read as a
   left-aligned block floating in the middle of a 2560 viewport */
.sec-breed .src{margin-inline:auto;text-align:center}
.sec-breed .src-l{justify-content:center}

/* ============================================================== S9. FAQ === */
.faq{max-width:56em;margin-inline:auto}
.faq>div{
  padding:clamp(26px,2.2vw,40px) 0;border-bottom:1px solid rgba(176,139,46,.42);
}
.faq>div:first-child{border-top:1px solid rgba(176,139,46,.42)}
.faq dt{
  display:flex;gap:clamp(12px,1.1vw,20px);
  font-family:var(--jp);font-weight:700;font-size:clamp(19px,1.42vw,25px);
  line-height:1.6;letter-spacing:.045em;color:#17231D;
}
.faq dt::before{
  content:"Q";flex:none;font-family:var(--la);font-weight:700;
  font-size:clamp(18px,1.3vw,23px);line-height:1.55;color:var(--gold-d);
}
.faq dd{
  display:flex;gap:clamp(12px,1.1vw,20px);margin-top:clamp(14px,1.2vw,22px);
  font-family:var(--jp);font-size:clamp(17.5px,1.14vw,19.5px);line-height:1.94;
  letter-spacing:.045em;color:#2E3F37;
}
.faq dd::before{
  content:"A";flex:none;font-family:var(--la);font-weight:700;
  font-size:clamp(17px,1.2vw,21px);line-height:1.72;color:#3F6553;
}

/* ========================================================== S10. JOURNAL == */
.sec-jr{background:var(--green-d)}
.jr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;opacity:.15;z-index:0;filter:saturate(.7)}
.sec-jr::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,34,26,.84),rgba(8,34,26,.93))}
.sec-jr>.sec-in{position:relative;z-index:2}
.jr-list{display:grid;gap:1px;background:rgba(232,210,148,.34);border-block:1px solid rgba(232,210,148,.34)}
.jr-list li{background:rgba(8,34,26,.55)}
.jr-list a{
  display:flex;align-items:baseline;gap:clamp(14px,1.3vw,26px);flex-wrap:wrap;
  padding:clamp(20px,1.7vw,30px) clamp(18px,1.5vw,28px);
}
.jr-date{
  flex:none;font-family:var(--la);font-weight:700;
  font-size:clamp(16px,1.08vw,18px);letter-spacing:.09em;color:var(--gold-l);
}
.jr-date i{font-style:normal;padding:0 2px;opacity:.7}
.jr-ttl{
  font-family:var(--jp);font-weight:600;font-size:clamp(17px,1.12vw,19.5px);
  line-height:1.72;letter-spacing:.04em;color:#E4EDE7;
}
.jr-more a{justify-content:center}
.jr-more .jr-ttl,.jr-more a{color:var(--gold-h);font-weight:700}

/* ========================================================== S11. BIG YES == */
.bigyes{background:var(--green-d);position:relative}
.pano-cta{margin-top:0}
.pano-cta img{height:clamp(190px,20vw,380px)}
.by-in{
  position:relative;padding:var(--band) var(--gut);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(26,80,57,.72),rgba(8,34,26,0) 70%),
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%);
}
.by-in .corner{position:absolute;z-index:1;
  width:clamp(46px,4.4vw,74px) !important;height:clamp(46px,4.4vw,74px) !important;opacity:.85}
.by-in .corner.tl{left:clamp(14px,1.6vw,30px);top:clamp(14px,1.6vw,30px)}
.by-in .corner.tr{right:clamp(14px,1.6vw,30px);top:clamp(14px,1.6vw,30px);transform:scaleX(-1)}
.by-in .corner.bl{left:clamp(14px,1.6vw,30px);bottom:clamp(14px,1.6vw,30px);transform:scaleY(-1)}
.by-in .corner.br{right:clamp(14px,1.6vw,30px);bottom:clamp(14px,1.6vw,30px);transform:scale(-1)}
.by-copy{position:relative;z-index:2;max-width:1100px;margin-inline:auto;text-align:center}
.by-copy .h2{margin-inline:auto;max-width:none;font-size:clamp(28px,2.75vw,46px)}

/* CTA HIERARCHY. Tier 1 is a single wide gold stamp; tiers 2 and 3 sit beneath
   it, side by side, at roughly a third of its rendered area each. The order is
   unmistakable by size, by colour and by position. */
.by-cta{
  position:relative;z-index:2;
  margin:clamp(40px,3.4vw,64px) auto 0;max-width:640px;
  display:flex;flex-direction:column;gap:clamp(16px,1.5vw,26px);
}
.cta-1{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,.7vw,13px);
  min-height:clamp(112px,8.4vw,144px);padding:clamp(18px,1.5vw,26px) clamp(20px,1.8vw,34px);
  color:#3A2C07;border:2px solid var(--gold-h);
  background:linear-gradient(180deg,#FCF3D8 0%,#EBD79A 46%,#D2B45F 100%);
  box-shadow:0 0 0 1px rgba(60,44,10,.6),0 12px 34px rgba(0,0,0,.42);
}
.cta-1 .ic.o{width:clamp(34px,2.6vw,42px) !important;height:clamp(34px,2.6vw,42px) !important}
.cta-1 .lab{
  font-family:var(--jp);font-weight:700;font-size:clamp(26px,2.35vw,40px);
  line-height:1.2;letter-spacing:.15em;text-indent:.15em;
}
.cta-1 .note{
  font-family:var(--jp);font-weight:600;font-size:clamp(16px,1.08vw,18.5px);
  letter-spacing:.05em;color:#4E3D10;
}
.by-sub{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(14px,1.3vw,22px);align-items:stretch}
.cta-2,.cta-3{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,.9vw,15px);
  padding:clamp(12px,1.0vw,18px) clamp(14px,1.2vw,22px);
  font-family:var(--jp);font-weight:700;
  border:1px solid var(--gold-l);color:var(--gold-h);
}
/* TIER 2 — filled, taller, wider */
.cta-2{
  min-height:clamp(74px,5.2vw,88px);
  background:linear-gradient(180deg,rgba(26,80,57,.96),rgba(8,34,26,.96));
  box-shadow:0 0 0 1px rgba(232,210,148,.25);
}
/* TIER 3 — outline only, shorter, narrower. Still a 60px+ touch target. */
.cta-3{
  min-height:clamp(62px,4.2vw,72px);align-self:center;
  border-color:rgba(232,210,148,.62);color:var(--gold-l);
  background:rgba(8,34,26,.5);
}
.cta-2 .lab{font-size:clamp(19px,1.36vw,23px);letter-spacing:.12em;text-indent:.12em}
.cta-3 .lab{font-size:clamp(17px,1.14vw,19px);letter-spacing:.08em;text-indent:.08em}
.cta-2 .ic.o{width:clamp(26px,2.0vw,32px) !important;height:clamp(26px,2.0vw,32px) !important}
.cta-3 .ic.o{width:clamp(24px,1.85vw,30px) !important;height:clamp(24px,1.85vw,30px) !important}

/* ============================================================== FOOTER ==== */
.foot{background:linear-gradient(180deg,var(--green) 0%,#061C15 100%);color:#D6E2DA}
.foot-in{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
  gap:clamp(30px,3.0vw,64px);
  padding:clamp(56px,4.6vw,88px) var(--gut) clamp(46px,3.6vw,70px);
}
.fb-lock{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fb-jp{font-family:var(--jp);font-weight:700;font-size:clamp(19px,1.42vw,25px);letter-spacing:.03em;color:#EDF3EE}
.fb-la{font-family:var(--la);font-weight:700;font-size:clamp(20px,1.5vw,26px);letter-spacing:.16em;text-indent:.16em}
.fb-p{font-family:var(--jp);font-size:clamp(16px,1.04vw,17.5px);line-height:1.94;letter-spacing:.045em;color:#C6D5CC;max-width:34em}
.fb-price{
  margin-top:clamp(16px,1.4vw,26px);display:inline-block;
  font-family:var(--jp);font-weight:700;font-size:clamp(16px,1.06vw,18px);
  letter-spacing:.10em;color:var(--gold-h);
  padding:9px 16px;border:1px solid rgba(232,210,148,.55);
}
.foot-col h2{
  font-family:var(--jp);font-weight:700;font-size:clamp(17px,1.12vw,19px);
  letter-spacing:.08em;color:var(--gold-h);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgba(232,210,148,.4);
}
.foot-col a{
  display:block;font-family:var(--jp);font-size:clamp(16px,1.04vw,17.5px);
  line-height:1.6;letter-spacing:.04em;color:#C6D5CC;padding:11px 0;
}
.foot-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(16px,1.3vw,24px) var(--gut);border-top:1px solid rgba(232,210,148,.3);
}
.foot-bar p{font-family:var(--jp);font-size:clamp(15px,1.0vw,16.5px);letter-spacing:.04em;color:#A9BCB1}
.foot-bar nav{display:flex;flex-wrap:wrap;gap:0}
.foot-bar nav a{
  font-family:var(--jp);font-size:clamp(15px,1.0vw,16.5px);letter-spacing:.04em;color:#C6D5CC;
  padding:8px clamp(12px,1.05vw,20px);border-left:1px solid rgba(232,210,148,.26);
}
.foot-bar nav a:first-child{border-left:0}

/* ------------------------------------------------- narrow desktop nav ----- */
@media (min-width:1200px) and (max-width:1499px){
  .gnav-main a{padding-inline:clamp(7px,.65vw,12px);font-size:15px;letter-spacing:.03em}
  .gnav-cta{padding-inline:16px;letter-spacing:.08em;text-indent:.08em}
}

/* ==========================================================================
   TABLET AND SMALL LAPTOP  (<= 1199)
   ========================================================================== */
@media (max-width:1199px){
  :root{--band:clamp(64px,7.0vw,104px);--gap-ph:clamp(38px,4.2vw,64px)}

  /* the desktop nav does not fit; it becomes a disclosure menu */
  .gnav{position:relative}
  .gnav-main{
    position:absolute;left:0;right:0;top:100%;z-index:40;
    display:none;flex-direction:column;align-items:stretch;
    background:linear-gradient(180deg,#FFFDF6,#F1E8D2);
    border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
    box-shadow:0 18px 40px rgba(20,14,0,.26);
  }
  .mtoggle:checked~.gnav-main{display:flex}
  .gnav-main a{padding:17px clamp(18px,3.2vw,30px);font-size:18px;border-top:1px solid rgba(176,139,46,.28)}
  .gnav-main a:first-child{border-top:0}
  .gnav-main a+a::before{display:none}
  .gnav-sp-only{display:block}
  .mbtn{
    display:flex;align-items:center;gap:10px;margin-left:auto;
    height:clamp(46px,5.2vw,54px);padding:0 clamp(14px,2.2vw,20px);cursor:pointer;
    border:1px solid var(--gold);background:linear-gradient(180deg,#FFFDF6,#F1E8D2);
  }
  .mb-bars{display:grid;gap:4px;width:22px}
  .mb-bars span{height:2px;background:#4E3D10}
  .mbtn em{font-family:var(--la);font-style:normal;font-weight:700;font-size:14px;letter-spacing:.14em;color:#4E3D10}
  .gnav-cta{margin-left:clamp(10px,1.4vw,18px)}

  .proof{grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.2vw,44px)}
  .pf{padding-left:0}
  .pf::before{display:none}
  .pf:nth-child(n+3){padding-top:clamp(24px,2.8vw,38px);border-top:1px solid rgba(232,210,148,.34)}

  .sec-in.split{grid-template-columns:1fr;gap:clamp(34px,4.4vw,52px)}
  .sec-in.split-r{direction:ltr}
  .h2{max-width:20em}
  .quad{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:repeat(2,1fr)}
  .foot-brand{grid-column:1 / -1}
}

/* -- tablet: keep two-up photo bands and the two video windows side by side - */
@media (min-width:700px) and (max-width:1199px){
  .vids{grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}
  .stack2{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   PHONE  (<= 699)
   Floors: running copy >= 18px, nothing meaningful below 16px, headings
   >= 30px / 700, CTA labels >= 18px in boxes >= 56px tall.
   ========================================================================== */
@media (max-width:699px){
  :root{
    --pad:20px;
    --band:clamp(56px,13vw,78px);
    --gap-ph:clamp(30px,7vw,44px);
    --measure:100%;
  }

  .util{flex-direction:column;align-items:stretch;padding:0}
  .util-l{padding:11px var(--pad);font-size:16px;line-height:1.7;text-align:center;border-bottom:1px solid rgba(232,210,148,.24)}
  .util-l span{padding:0 6px}
  .util-r{justify-content:center}
  .util-r a{font-size:16px;padding:12px 4px;flex:1;text-align:center;
    letter-spacing:0;white-space:nowrap}

  .gnav{height:68px;padding-inline:var(--pad);gap:8px}
  .gnav-brand{flex-direction:column;align-items:flex-start;gap:0}
  .gb-jp{font-size:16px;line-height:1.28}
  .gb-la{font-size:17px;line-height:1.2}
  .gnav-cta{height:46px;padding:0 12px;margin-left:0;
    font-size:16px;letter-spacing:.03em;text-indent:.03em}
  /* R4M18 · SP のハンバーガーは線3本だけでは何のボタンか伝わらないので、
     タブレットと同じ MENU を SP でも出す。横に並べる幅は無いので
     アイコンの下へ回す。ボタンの外形は 46x46 のまま（min-width）で、
     高さも、隣の「見学予約」 CTA との天地も変わらない。幅に余裕が
     ある端末（内幅 390px 以上）だけ 50.7px まで広がる。 */
  .mbtn{
    height:46px;min-width:46px;padding:0 6px;
    flex-direction:column;justify-content:center;gap:4px;
  }
  .mb-bars{width:20px;gap:3px}
  .mbtn em{display:block;font-size:10px;line-height:1;letter-spacing:.08em;text-indent:.08em}

  .intro{padding:clamp(38px,9vw,52px) var(--pad)}
  .ih-jp{font-size:24px}
  .ih-la{font-size:25px}
  .intro-lead{font-size:18px;line-height:1.94;text-align:left}
  .intro-lead br{display:none}

  .proof{grid-template-columns:1fr;gap:0;padding:clamp(34px,8vw,48px) var(--pad)}
  .pf{padding:clamp(24px,5.6vw,32px) 0}
  .pf:first-child{padding-top:0}
  .pf:nth-child(n+2){padding-top:clamp(24px,5.6vw,32px);border-top:1px solid rgba(232,210,148,.34)}
  .pf-n{font-size:40px}
  .pf-n em{font-size:19px}
  .pf-t{font-size:21px;margin-top:12px}
  .pf-p{font-size:18px;line-height:1.86;margin-top:11px}

  .sec-in{padding-inline:var(--pad)}
  .sec-in.narrow{max-width:none}
  .h2{font-size:30px;line-height:1.44;max-width:none}
  .h2 br.hb{display:none}
  .h2 br.hb-sp{display:inline}
  .sec-in.split .h2{font-size:30px}
  .body{font-size:18px;line-height:1.94}
  .body.on-dark.em-l{font-size:19px}
  .body.c,.h2.c{text-align:left;margin-inline:0}
  .sec-in.narrow.c .body,.sec-in.narrow.c .h2{text-align:left;margin-inline:0}
  .hair.c{margin-left:0}
  .btn-row,.btn-row.c{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .glink,.glink.big{width:100%;min-height:60px;font-size:18px;letter-spacing:.06em;padding:14px 18px}
  .sub-link a{font-size:18px}
  .src{font-size:16px}
  /* each citation on its own line: wrapped inline anchors overlapped one
     another's hit boxes, and the FCI label alone is wider than a 390 column */
  .src-l{flex-direction:column;gap:0}
  .src-l li+li::before{display:none}
  .src-l li{border-top:1px solid rgba(176,139,46,.3)}
  .src a{display:block;padding:11px 0;border-bottom:0}

  .trio,.duo,.quad{grid-template-columns:1fr}
  .trio img,.duo img,.quad img,.trio.trio-tight img{height:clamp(210px,58vw,270px)}
  .pano img,.pano.pano-in img,.pano-cta img{height:clamp(200px,54vw,260px)}
  .pano figcaption{padding:26px var(--pad) 14px;font-size:16px}
  .trio figcaption,.duo figcaption,.fig-main figcaption{font-size:16px;padding:13px 15px}

  .vids{grid-template-columns:1fr;gap:clamp(30px,7vw,42px);padding-inline:var(--pad)}
  .yt-lab{font-size:17px;letter-spacing:.08em;text-indent:.08em}
  .vid figcaption b{font-size:19px}
  .vid figcaption em{font-size:17px}

  .pull{padding:36px 20px 28px;margin-top:36px}
  .pull p{font-size:18px;line-height:1.92;text-align:left}
  .sec-breed .src,.sec-breed .src-l{text-align:left;justify-content:flex-start}
  .pull p br{display:none}

  .faq dt{font-size:20px}
  .faq dd{font-size:18px}

  .jr-list a{padding:18px 16px;gap:6px;flex-direction:column;align-items:flex-start}
  .jr-date{font-size:16px}
  .jr-ttl{font-size:18px}
  .jr-more a{align-items:center}

  .by-in{padding:clamp(52px,12vw,72px) var(--pad)}
  .by-in .corner{width:40px !important;height:40px !important}
  .by-copy{text-align:left}
  .by-copy .h2{font-size:30px}
  .by-copy .h2,.by-copy .body,.by-copy .hair{margin-inline:0;text-align:left}
  .by-copy .body.c{text-align:left}
  .price{width:100%;height:66px;margin-top:32px}
  .price>span:last-child{font-size:18px;letter-spacing:.08em;text-indent:.08em}
  .cta-1{min-height:118px}
  .cta-1 .lab{font-size:29px;letter-spacing:.1em;text-indent:.1em}
  .cta-1 .note{font-size:18px;text-align:center;line-height:1.62}
  .by-sub{grid-template-columns:1fr;gap:12px}
  .cta-3{width:74%;margin-inline:auto}
  .cta-2,.cta-3{min-height:66px}
  .cta-2 .lab,.cta-3 .lab{font-size:18px;letter-spacing:.06em;text-indent:.06em}

  .foot-in{grid-template-columns:1fr;gap:clamp(26px,6vw,36px);padding:clamp(44px,10vw,60px) var(--pad) clamp(34px,8vw,46px)}
  .fb-p{font-size:17px}
  .fb-price{font-size:17px}
  .foot-col a{font-size:17px;padding:12px 0}
  .foot-bar{flex-direction:column;align-items:flex-start;padding:18px var(--pad)}
  .foot-bar p,.foot-bar nav a{font-size:16px}
  .foot-bar nav{margin-left:-12px}
}

/* ==========================================================================
   MOTION / PRINT SAFETY
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ==========================================================================
   R3D ADDITIONS  (everything above is the R3C stylesheet, unchanged)
   ========================================================================== */

/* S5: the two video windows now sit inside the ivory parent-dog section */
.vids.vids-light{margin-top:var(--gap-ph)}
.vids-light .vid figcaption b{color:#3A2C07}
.vids-light .vid figcaption em{color:#4A5A52}

/* S6 / S8: quotable answer blocks. Visually they are ordinary running copy;
   the class exists so the audit can find them and a later theme can wrap
   them in a landmark. */
.def{max-width:var(--measure)}
.answer{font-weight:700;color:#2A3A32}

/* ====================================================== S9. KNOW GRID ===== */
.sec-know{background:var(--paper)}
.know{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,1.6vw,28px);
  padding-inline:var(--gut);margin-top:var(--gap-ph);
}
.kc{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.0vw,36px) clamp(22px,1.8vw,32px) clamp(22px,1.8vw,30px);
  background:linear-gradient(180deg,#FFFDF6 0%,#F6EFDD 100%);
  border:1px solid rgba(176,139,46,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 6px 18px rgba(60,44,10,.10);
}
.kc h3{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(19px,1.32vw,23px);line-height:1.5;letter-spacing:.04em;color:#17231D;
  padding-bottom:clamp(12px,1.0vw,16px);margin-bottom:clamp(12px,1.0vw,16px);
  border-bottom:1px solid rgba(176,139,46,.5);
  word-break:auto-phrase;
}
.kc h3 a{color:inherit}
.kc p{
  font-family:var(--jp);font-size:clamp(17px,1.10vw,18.5px);line-height:1.9;
  letter-spacing:.04em;color:#2E3F37;flex:1;
}
.kc-link{
  align-self:flex-start;margin-top:clamp(16px,1.3vw,22px);
  font-family:var(--jp);font-weight:700;font-size:clamp(16px,1.06vw,18px);
  letter-spacing:.08em;color:#5E4712;
  border-bottom:1px solid rgba(176,139,46,.7);padding:8px 0 3px;
}

/* ====================================================== DETAIL TEMPLATE ==
   Shared by the evergreen breed pages (golden-retriever-colour.html etc.).
   Reading column, breadcrumb, article headings, on-page source list, and a
   closing band that always routes to 親犬 / 子犬 / 見学. */
.bc{
  padding:clamp(14px,1.2vw,20px) var(--gut);
  font-family:var(--jp-s);font-size:clamp(16px,1.02vw,17px);letter-spacing:.03em;color:#4E5C56;
  background:var(--ivory-2);border-bottom:1px solid rgba(176,139,46,.28);
}
.bc ol{display:flex;flex-wrap:wrap;gap:6px 0}
.bc li+li::before{content:"\203A";padding:0 10px;color:var(--gold)}
.bc a{color:#5E4712;border-bottom:1px solid rgba(176,139,46,.5)}

.art-head{padding:clamp(48px,4.4vw,80px) var(--gut) clamp(30px,2.8vw,48px);background:var(--ivory)}
.art-head-in{max-width:calc(var(--measure) + 8em);margin-inline:auto}
.art-kicker{
  font-family:var(--jp-s);font-weight:700;font-size:clamp(16px,1.06vw,18px);
  letter-spacing:.14em;color:#7D6129;margin-bottom:clamp(14px,1.2vw,20px);
}
.art-h1{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(30px,3.0vw,50px);line-height:1.36;letter-spacing:.035em;color:#101B15;
  word-break:auto-phrase;
}
.art-lead{
  margin-top:clamp(22px,2.0vw,32px);
  font-family:var(--jp);font-weight:700;font-size:clamp(19px,1.32vw,22px);line-height:1.9;
  letter-spacing:.05em;color:#2A3A32;max-width:var(--measure);
}
.art-meta{
  margin-top:clamp(18px,1.6vw,26px);font-family:var(--jp-s);font-size:clamp(16px,1.02vw,17px);
  letter-spacing:.04em;color:#5A6862;
}

.art{padding:clamp(20px,2vw,36px) var(--gut) var(--band);background:var(--ivory)}
.art-in{max-width:calc(var(--measure) + 8em);margin-inline:auto}
.art h2{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(26px,2.2vw,36px);line-height:1.44;letter-spacing:.04em;color:#101B15;
  margin-top:clamp(48px,4.2vw,72px);padding-bottom:clamp(12px,1.0vw,16px);
  border-bottom:1px solid rgba(176,139,46,.55);word-break:auto-phrase;
}
.art h2:first-child{margin-top:0}
.art h3{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(21px,1.6vw,26px);line-height:1.5;letter-spacing:.04em;color:#17231D;
  margin-top:clamp(30px,2.6vw,44px);
}
.art p.body{margin-top:clamp(16px,1.35vw,24px);margin-bottom:0}
.art ul.list{margin-top:clamp(16px,1.35vw,24px);max-width:var(--measure)}
.art ul.list li{
  position:relative;padding-left:1.4em;margin-bottom:10px;
  font-family:var(--jp);font-size:clamp(18px,1.18vw,20px);line-height:1.9;letter-spacing:.05em;color:#2E3F37;
}
.art ul.list li::before{content:"";position:absolute;left:.2em;top:.85em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.art .cite{
  display:inline-block;margin-left:.35em;font-family:var(--jp-s);font-size:max(16px,.82em);
  letter-spacing:.04em;color:#5E4712;border-bottom:1px solid rgba(176,139,46,.5);vertical-align:.15em;
}
.art figure.photo{margin-top:clamp(28px,2.4vw,40px)}
.art figure.photo.portrait{max-width:min(100%,460px)}
.art figure.photo img{width:100%;height:auto;border:3px solid transparent;
  background:linear-gradient(150deg,#7E5F1C,#E8D294 26%,#FCF3D8 46%,#C9A44A 68%,#7E5F1C) border-box}
.art figure.photo figcaption{
  margin-top:10px;font-family:var(--jp);font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.72;letter-spacing:.04em;color:#4E5C56;
}
.art .villa{
  margin-top:clamp(28px,2.4vw,40px);padding:clamp(22px,1.8vw,30px) clamp(22px,1.8vw,32px);
  background:linear-gradient(180deg,rgba(255,253,246,.92),rgba(243,234,212,.92));
  border-left:4px solid var(--gold);max-width:calc(var(--measure) + 4em);
}
.art .villa .tag{
  display:block;font-family:var(--jp-s);font-weight:700;font-size:clamp(16px,1.0vw,17px);
  letter-spacing:.14em;color:#7D6129;margin-bottom:8px;
}
.art .villa p{font-family:var(--jp);font-size:clamp(18px,1.18vw,20px);line-height:1.9;letter-spacing:.05em;color:#2E3F37}
.art .src{margin-top:clamp(40px,3.4vw,56px)}
.art .src-l{flex-direction:column;gap:6px}
.art .src-l li+li::before{display:none}
.art .src-l li{border-top:1px solid rgba(176,139,46,.3);padding-top:6px}

/* closing band on every detail page: 親犬 → 子犬 → 見学 */
.art-next{background:var(--ivory-2);border-top:1px solid rgba(176,139,46,.4);padding:var(--band) var(--gut)}
.art-next-in{max-width:calc(var(--measure) + 8em);margin-inline:auto;text-align:center}
.art-next .h2{margin-inline:auto}
.art-next .body{margin-inline:auto}

/* ------------------------------------------------------------- responsive */
@media (max-width:1199px){
  .know{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:repeat(2,1fr)}
  .foot-brand{grid-column:1 / -1}
}
@media (min-width:700px) and (max-width:1199px){
  .vids-light{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:699px){
  .know{grid-template-columns:1fr;gap:16px;padding-inline:var(--pad)}
  .kc{padding:22px 20px 20px}
  .kc h3{font-size:20px}
  .kc p{font-size:18px;line-height:1.9}
  .kc-link{font-size:18px}
  .vids-light{padding-inline:var(--pad)}
  .bc{padding:12px var(--pad);font-size:16px}
  .art-head{padding:36px var(--pad) 24px}
  .art-h1{font-size:30px}
  .art-lead{font-size:19px}
  .art{padding:16px var(--pad) 56px}
  .art h2{font-size:30px;line-height:1.42}
  .art h3{font-size:22px}
  .art .cite{font-size:16px}
  .art ul.list li{font-size:18px}
  .art .villa{padding:20px 18px}
  .art .villa p{font-size:18px}
  .art-next{padding:52px var(--pad)}
  .art-next-in{text-align:left}
  .art-next .h2,.art-next .body{margin-inline:0;text-align:left}
  .foot-in{grid-template-columns:1fr}
}

/* ==========================================================================
   R3E — 親犬／子犬スライダー（.gal）
   Additive scope only. No existing selector above is modified.

   ・写真が主役。ゴールドは細い境界線と矢印にだけ使う。
   ・画像は width:100%;height:auto。object-fit:cover を使わないので
     頭・耳・足・尾が切れることが構造的に起きない。
   ・1本のカルーセル内の写真はアスペクト比が揃っているので
     letterbox も発生しない。width/height 属性で CLS を出さない。
   ・scroll-snap が基本。JS が無くても横スクロールで全枚見られる。
   ========================================================================== */
.gal{margin-top:var(--gap-ph);padding-inline:var(--gut)}
.gal-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2vw,40px);margin-bottom:clamp(18px,1.6vw,28px);
}
.gal-lede{min-width:0}
.gal-h{
  font-family:var(--jp);font-weight:600;color:var(--green);
  font-size:clamp(22px,1.86vw,31px);line-height:1.5;letter-spacing:.05em;margin:0;
}
.gal-h::after{
  content:"";display:block;width:clamp(120px,9vw,180px);height:1px;margin-top:12px;
  background:linear-gradient(90deg,var(--gold),var(--gold-h) 55%,rgba(176,139,46,0));
}
.gal-note{
  font-family:var(--jp);color:var(--ink);opacity:.9;margin:12px 0 0;max-width:var(--measure);
  font-size:clamp(16px,1.06vw,18px);line-height:1.86;letter-spacing:.03em;
}
.gal-note a{color:var(--gold-d);text-underline-offset:3px}

/* ------------------------------------------------------------- controls -- */
.gal-nav{display:flex;gap:10px;flex:0 0 auto;padding-bottom:4px}
.gal-btn{
  width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;
  background:var(--ivory-2);color:var(--gold-d);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.gal-btn[hidden]{display:none}
.gal-btn:hover:not(:disabled){background:var(--gold-h);border-color:var(--gold-d)}
.gal-btn:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.gal-btn:disabled{opacity:.34;cursor:default}
.gal-prev .o.ar{transform:rotate(180deg)}

/* ---------------------------------------------------------------- track -- */
.gal-track{
  display:flex;gap:var(--gal-gap,18px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding-bottom:14px;scrollbar-width:thin;
}
.gal-track:focus-visible{outline:2px solid var(--gold-d);outline-offset:4px}
.gal-track::-webkit-scrollbar{height:8px}
.gal-track::-webkit-scrollbar-track{background:rgba(176,139,46,.14)}
.gal-track::-webkit-scrollbar-thumb{background:rgba(176,139,46,.55)}

/* ----------------------------------------------------------------- card -- */
.gal-card{
  flex:0 0 calc((100% - 2 * var(--gal-gap,18px)) / 3);
  margin:0;scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--green-d);border:1px solid rgba(176,139,46,.55);
  box-shadow:0 8px 22px rgba(20,14,0,.12);
}
.gal-card img{display:block;width:100%;height:auto}
.gal-card figcaption{
  margin-top:auto;
  padding:clamp(11px,.95vw,16px) clamp(13px,1.1vw,20px);
  font-family:var(--jp);font-size:clamp(16px,1.02vw,17.5px);line-height:1.68;
  letter-spacing:.04em;color:#DCE7E0;
}

@media (prefers-reduced-motion:reduce){
  .gal-track{scroll-behavior:auto}
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1099px){
  .gal-card{flex-basis:calc((100% - var(--gal-gap,18px)) / 2)}
}
@media (max-width:759px){
  .gal{padding-inline:var(--pad)}
  .gal-head{flex-direction:column;align-items:flex-start;gap:14px}
  .gal-nav{align-self:flex-end;padding-bottom:0}
  .gal-card{flex-basis:88%}
  .gal-card figcaption{font-size:16px;line-height:1.76}
}


/* ==========================================================================
   R3G-1 · S5 親犬セクション — 「写真3枚」を1つの見学ストーリーに
   Scoped to .par-* / .par-duo ONLY. 既存の .duo / .fig-main / .sec-in.split
   の共有ルールには一切触れていないので、他セクションは不変。
   ========================================================================== */
.par-vis{min-width:0}
.par-lead{max-width:34em}
.par-lead-h{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(21px,1.60vw,27px);line-height:1.62;letter-spacing:.05em;color:#163023;
}
.par-lead .hair.w220{margin:clamp(14px,1.2vw,20px) 0 clamp(14px,1.2vw,20px)}
.par-lead-p{
  font-family:var(--jp);font-size:clamp(17px,1.06vw,18.5px);
  line-height:1.88;letter-spacing:.04em;color:#3E4C46;
}
.par-vis .fig-main{margin-top:clamp(20px,1.8vw,30px)}

/* 観察ポイント付き写真カード。.duo の gold seam と green-d の地はそのまま使い、
   写真の上にラベル+見出し+補足を載せてカード1枚に見せる。 */
.duo.par-duo .par-card{display:flex;flex-direction:column;margin:0}
/* 2カラム時、2枚の写真の上端を必ず揃える。カードの高さ差は figcaption 側では
   なく head 側に吸わせる（margin-top:auto を使うと flex-grow より先に余白が
   食われ、写真の上端がずれる）。 */
.par-card-head{
  flex:1 0 auto;
  display:flex;align-items:flex-start;gap:clamp(11px,1.0vw,17px);
  padding:clamp(17px,1.4vw,25px) clamp(14px,1.2vw,22px) clamp(14px,1.15vw,19px);
  border-bottom:1px solid rgba(232,210,148,.28);
}
.par-card-n{
  flex:none;padding-top:1px;
  font-family:var(--la);font-weight:700;font-size:clamp(22px,1.66vw,28px);
  line-height:1.18;letter-spacing:.09em;color:var(--gold-l);
}
.par-card-txt{min-width:0}
.par-card-h{
  font-family:var(--jp);font-weight:700;font-size:clamp(19px,1.30vw,23px);
  line-height:1.5;letter-spacing:.06em;color:var(--gold-h);
}
.par-card-p{
  margin-top:clamp(6px,.5vw,9px);
  font-family:var(--jp);font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.74;letter-spacing:.04em;color:#C7D6CE;
}
/* 写真は原寸比のまま。cover による強制 crop はこの行では使わない
   （duo-nocrop 済みだが、意図をこの行にも固定しておく）。 */
.duo.par-duo img{height:auto;object-fit:contain;display:block}
.duo.par-duo figcaption{margin-top:0}

@media (max-width:1199px){
  /* タブレット/スマホは1カラム。読む順は
     既存導入 → 導入コピー → 補足 → parent-hero → 01 → 画像 → 02 → 画像 */
  .par-lead{max-width:none}
  .par-vis .fig-main{margin-top:clamp(18px,2.4vw,26px)}
}
@media (max-width:699px){
  /* スマホでは parent-hero.jpg が「このセクションのメイン写真」と分かるよう、
     左右の gutter を 20px -> 8px まで詰めて一回り大きく見せ、金の枠も
     1px 厚くする。crop は一切していない（height:auto のまま）。 */
  .par-vis .fig-main{margin-inline:-12px;border-width:4px}
  .par-lead-h{font-size:21px;line-height:1.62}
  .par-lead-p{font-size:17px;line-height:1.86}
  .pl-br{display:none}
  .par-card-head{padding:17px 16px 15px;gap:12px}
  .par-card-n{font-size:23px}
  .par-card-h{font-size:20px}
  .par-card-p{font-size:16px;margin-top:7px}
}

/* ==========================================================================
   R3G-2 · 追尾型ワンタッチ相談CTA（電話 / LINE / メール）
   「相談の入口」。最終CVの見学予約CTA（.gnav-cta / #contact 帯）は不変。
   R4M1 で相談チャネルの優先順位を施主の最終要件に合わせた:
   電話（PRIMARY）-> LINE（SECONDARY）-> メール（TERTIARY）。
   DOM 順・視覚的強さの両方がこの順で、遷移先は三つとも従来のまま。
   JS ゼロ / 外部リクエストゼロ / アイコンは inline SVG。
   ========================================================================== */
.scta{position:fixed;z-index:80;font-family:var(--jp)}
.scta-b{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;-webkit-tap-highlight-color:rgba(176,139,46,.25);
}
.scta-i{display:flex;align-items:center;justify-content:center;flex:none}
.scta-i svg{display:block}
.scta-t{white-space:nowrap}
/* 緑ボタンは金、金ボタン（電話）は濃緑のフォーカスリング */
.scta-b:focus-visible{outline:3px solid var(--gold-h);outline-offset:-4px}
.scta-tel:focus-visible{outline-color:var(--green-d)}
/* R4M1 · 電話がシャンパンゴールドの面（.glink.primary と同じ、サイトで
   最も強い面）を持つ PRIMARY。LINE は同じ濃緑の面に金の枠と LINE グリーン
   のグリフを残した SECONDARY、メールは枠とラベルを一段落とした TERTIARY。
   遷移先はいずれも変更していない。 */
.scta-tel{
  color:#3A2C07;
  background:linear-gradient(180deg,#FBF1D2 0%,#EBD79A 46%,#D8BC6A 100%);
}
.scta-line,.scta-mail{
  color:var(--gold-h);
  background:linear-gradient(160deg,rgba(26,80,57,.97),rgba(8,34,26,.97));
}
/* LINE はブランド識別のためグリフのみ LINE グリーン。 */
.scta-line .scta-i{color:#06B34D}
.scta-mail{color:rgba(252,243,216,.86)}
.scta-mail .scta-i{opacity:.86}

/* -- PC / 横幅のある画面: 右下の縦3ボタン ---------------------------------- */
@media (min-width:900px){
  :root{--scta-w:clamp(140px,10.2vw,164px);--scta-off:clamp(14px,1.05vw,20px)}
  .scta{
    right:var(--scta-off);bottom:clamp(18px,1.6vw,28px);
    display:flex;flex-direction:column;gap:8px;
    width:var(--scta-w);
  }
  /* 最下部まで送ったとき、フッター最下段の「ページ上部へ」等が
     コーナーパネルの下に入らないよう右側を空ける。 */
  .foot-bar{padding-right:calc(var(--scta-w) + var(--scta-off) + 18px)}
  .scta-b{
    gap:9px;min-height:clamp(46px,3.0vw,52px);padding:0 clamp(8px,.7vw,12px);
    border:1px solid var(--gold);
    font-weight:700;font-size:clamp(15px,1.0vw,16.5px);letter-spacing:.03em;
    box-shadow:0 6px 18px rgba(20,14,0,.26);
  }
  .scta-tel{border-color:var(--gold-d);box-shadow:0 6px 18px rgba(90,66,12,.30)}
  /* SECONDARY は既定の金枠のまま、TERTIARY だけ枠を一段落とす。 */
  .scta-mail{border-color:rgba(232,210,148,.55)}
}

/* -- スマホ / タブレット縦: 画面下部の3分割バー ---------------------------- */
@media (max-width:899px){
  .scta{
    left:0;right:0;bottom:0;
    display:grid;grid-template-columns:repeat(3,1fr);
    background:var(--green-d);
    border-top:1px solid var(--gold);
    box-shadow:0 -8px 22px rgba(20,14,0,.26);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .scta-b{
    flex-direction:column;gap:3px;
    height:64px;padding:8px 4px;
    font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.3;
    border-left:1px solid rgba(232,210,148,.30);
  }
  .scta-b:first-child{border-left:0}
  /* 固定バーの下にフッター最下段が隠れないよう、フッター側で場所を空ける。
     body に padding を足すと footer の外に ivory の帯が出るため、
     フッター自身の padding-bottom で確保する。 */
  .foot-bar{padding-bottom:calc(65px + env(safe-area-inset-bottom,0px) + clamp(16px,1.3vw,24px))}
}
@media (max-width:389px){
  .scta-b{font-size:14px}
}
@media print{
  .scta{display:none}
}


/* ==========================================================================
   R3H · LUXURY EDITORIAL VISUAL SYSTEM
   Additive layer. Nothing above this comment was deleted; where a value is
   restated here it is a deliberate override and the reason is on the line.

   Palette, and only this palette:
     IVORY / DEEP GREEN / CHAMPAGNE-ANTIQUE GOLD / WHITE
     + very dark emerald, soft warm beige, black-green (added by this task)
   No neon, no red, no purple, no yellow-orange "gold", no rainbow gradient.

   Every ornament here is CSS, a pseudo element, or one inline data-URI crest.
   Zero new fonts, zero new network requests, zero libraries. The one script
   this revision adds is ~40 lines of vanilla JS inlined in the document.

   The crest is DECORATION. It is not a seal, an award, a certification, a
   registry mark or a royal warrant, and no text on the page claims it is.
   ========================================================================== */

:root{
  --green-x:#04150F;                 /* very dark emerald — band floors      */
  --green-k:#02100B;                 /* subtle black-green — deepest ground  */
  --beige:#EFE6D2;                   /* soft warm beige                      */
  --gold-a:#C9A44A;                  /* antique gold, between gold / gold-l  */
  --orn-l:rgba(176,139,46,.42);      /* hairline on ivory                    */
  --frame:clamp(20px,2.0vw,36px);

  /* VILLA watermark — an abstract lozenge with a V monogram. Two variants:
     the plain one is used inside elements that carry their own opacity, the
     faint one where it has to be painted as a background layer. */
  --crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23E8D294'%3E%3Cpath d='M100 4 196 100 100 196 4 100Z' stroke-width='2'/%3E%3Cpath d='M100 24 176 100 100 176 24 100Z' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='57' stroke-width='1'/%3E%3Cpath d='M72 70 100 130 128 70' stroke-width='7'/%3E%3Cpath d='M62 148h76' stroke-width='2'/%3E%3Cpath d='M100 40v10M100 150v10' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --crest-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23E8D294' stroke-opacity='.13'%3E%3Cpath d='M100 4 196 100 100 196 4 100Z' stroke-width='2'/%3E%3Cpath d='M100 24 176 100 100 176 24 100Z' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='57' stroke-width='1'/%3E%3Cpath d='M72 70 100 130 128 70' stroke-width='7'/%3E%3Cpath d='M62 148h76' stroke-width='2'/%3E%3Cpath d='M100 40v10M100 150v10' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Every band clips its own ornament, so a 380px ghost numeral can never turn
   into a horizontal scrollbar. */
.sec,.bigyes,.proof{overflow:hidden}

/* ------------------------------------------------------------------------
   A1 · SECTION ORNAMENT — number + latin label, plus an oversized ghost
   numeral behind the band.

   Both are written from data-* attributes, so the delivered document gains NO
   visible text: the H1/H2/H3 tree, the Japanese headings and every sentence
   of body copy are byte-identical, and none of this is reachable as a heading.
   ------------------------------------------------------------------------ */
.sec-orn{
  display:flex;align-items:center;gap:clamp(11px,1.0vw,18px);
  margin-bottom:clamp(16px,1.4vw,26px);
  font-family:var(--la);font-weight:700;line-height:1;
}
.sec-orn::before{
  content:attr(data-n);
  font-size:clamp(15px,1.10vw,19px);letter-spacing:.13em;color:var(--gold-d);
}
/* the short gold rule lives in the label's own background, so the pair reads
   as one ornament instead of three loose pieces */
.sec-orn::after{
  content:attr(data-la);
  padding-left:calc(clamp(38px,3.6vw,68px) + 15px);
  font-size:clamp(10.5px,.80vw,13.5px);letter-spacing:.34em;color:#6E5A2A;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-h) 58%,rgba(176,139,46,.18))
             no-repeat left center/clamp(38px,3.6vw,68px) 1px;
}
.sec-in.narrow.c .sec-orn,.by-copy .sec-orn{justify-content:center}

/* The numeral sits on the same side as the section's COPY column, so it reads
   as the chapter number behind its own heading instead of colliding with the
   photograph. line-height:1 keeps the glyph inside its box, which .72 did not
   — the digits were being clipped by the band's own overflow:hidden. */
.sec-ghost{
  position:absolute;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;
  left:clamp(10px,2.2vw,60px);top:clamp(22px,2.4vw,52px);
  /* Cinzel digits overshoot their line box, so 1.08 keeps the whole numeral
     inside the band that clips it. */
  font-family:var(--la);font-weight:700;line-height:1.08;
  font-size:clamp(150px,20vw,340px);letter-spacing:-.015em;
  color:rgba(126,95,28,.055);
}
/* split-r bands (copy on the right) and the centred bands take the right edge */
.sec-hist .sec-ghost,.sec-breed .sec-ghost,.sec-pup .sec-ghost,
.sec-know .sec-ghost,.sec-faq .sec-ghost,.bigyes .sec-ghost{
  left:auto;right:clamp(10px,2.2vw,60px);
}
/* the closing band opens with a full-bleed photograph, so its numeral has to
   start below it or it is simply painted over */
.bigyes .sec-ghost{top:calc(clamp(210px,23vw,430px) + clamp(26px,2.4vw,48px))}
.sec-ghost::before{content:attr(data-n)}
@supports (-webkit-text-stroke:1px red){
  .sec-ghost{color:transparent;-webkit-text-stroke:1px rgba(126,95,28,.17)}
}

/* ------------------------------------------------------------------------
   A2 · GOLD ORNAMENT LINES — every existing .hair gains a centred lozenge.
   One rule, ~15 places on the page, no markup, no image.
   ------------------------------------------------------------------------ */
.hair{position:relative}
.hair::after{
  content:"";position:absolute;left:50%;top:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-h),var(--gold-a) 55%,var(--gold-d));
  box-shadow:0 0 0 1px rgba(126,95,28,.55);
}

/* ------------------------------------------------------------------------
   A8 · SECTION TRANSITIONS — a gold node on every ivory seam, and a soft
   gradient lip where an ivory band meets a deep-green one. No waves, no
   zig-zags, no cartoon shapes.
   ------------------------------------------------------------------------ */
.sec-env,.sec-par,.sec-life,.sec-pup,.sec-know,.sec-faq{border-top:1px solid var(--orn-l)}
.sec-env::before,.sec-par::before,.sec-life::before,
.sec-pup::before,.sec-know::before,.sec-faq::before{
  content:"";position:absolute;left:50%;top:0;z-index:3;
  width:11px;height:11px;margin:-6px 0 0 -5.5px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-h),var(--gold-a) 52%,var(--gold-d));
  box-shadow:0 0 0 1px rgba(126,95,28,.5);
}
.sec-hist::before,.sec-breed::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;
  height:clamp(56px,6vw,116px);
  background:linear-gradient(180deg,rgba(247,242,228,.26),rgba(247,242,228,0));
}
.sec-hist::after,.sec-breed::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(56px,6vw,116px);
  background:linear-gradient(0deg,rgba(247,242,228,.20),rgba(247,242,228,0));
}

/* ------------------------------------------------------------------------
   A3 · CREST WATERMARK — painted as a background layer, at 13% stroke alpha,
   on the two bands that carry the kennel's own claim to trust.
   ------------------------------------------------------------------------ */
.proof{
  background:
    var(--crest-f) no-repeat left clamp(-80px,-4.5vw,-26px) center/clamp(220px,22vw,380px) auto,
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%);
}
.sec-hist{
  background:
    var(--crest-f) no-repeat right clamp(-70px,-3.5vw,-20px) top clamp(24px,4vw,90px)/clamp(210px,21vw,360px) auto,
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%);
}

/* ------------------------------------------------------------------------
   A4 · DARK EMERALD FEATURE SECTION — S6 THE BREED.
   HERITAGE (S4), JOURNAL (S11) and the closing band were already deep green;
   turning the breed chapter dark puts the third dark chapter in the MIDDLE of
   the page, so the page now reads
       ivory → green → ivory → GREEN → ivory → ivory → green → green.
   Section order, headings and copy are unchanged: this is colour only.
   ------------------------------------------------------------------------ */
.sec-breed{
  background:
    radial-gradient(120% 78% at 76% 0%,rgba(26,80,57,.60),rgba(4,21,15,0) 64%),
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 58%,var(--green-x) 100%);
}
.sec-breed .h2{color:var(--gold-h);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.sec-breed .body{color:#DEE9E2}
.sec-breed .fig-main figcaption{background:rgba(2,16,11,.94)}
.sec-breed .pull{
  background:linear-gradient(180deg,rgba(26,80,57,.44),rgba(2,16,11,.62));
  border-color:var(--gold-l);
}
.sec-breed .pull p{color:var(--gold-h)}
.sec-breed .src{color:#B7C7BF}
.sec-breed .src-h{color:var(--gold-l)}
.sec-breed .src a{color:var(--gold-h);border-bottom-color:rgba(232,210,148,.5)}
.sec-breed .src-l li+li::before{background:rgba(232,210,148,.45)}

/* the eyebrow and the ghost numeral flip to champagne on every dark band */
.sec-breed .sec-orn::before,.sec-hist .sec-orn::before,
.sec-jr .sec-orn::before,.by-copy .sec-orn::before{color:var(--gold-l)}
.sec-breed .sec-orn::after,.sec-hist .sec-orn::after,
.sec-jr .sec-orn::after,.by-copy .sec-orn::after{
  color:#C6B784;
  background-image:linear-gradient(90deg,var(--gold-l),var(--gold-h) 58%,rgba(232,210,148,.18));
}
.sec-breed .sec-ghost,.sec-hist .sec-ghost,
.sec-jr .sec-ghost,.bigyes .sec-ghost{color:rgba(232,210,148,.05)}
@supports (-webkit-text-stroke:1px red){
  .sec-breed .sec-ghost,.sec-hist .sec-ghost,
  .sec-jr .sec-ghost,.bigyes .sec-ghost{
    color:transparent;-webkit-text-stroke-color:rgba(232,210,148,.15);
  }
}
/* the journal band paints a photograph at z-index 0 and its scrim at z-index 1,
   so that ghost numeral has to sit above both */
.sec-jr .sec-ghost{z-index:2}

/* ------------------------------------------------------------------------
   A5 · PHOTO FRAMING — an offset champagne panel behind the plate, plus
   decorative corner brackets. No rule below crops, re-fits or re-encodes any
   photograph: every image keeps the object-fit it already had.
   ------------------------------------------------------------------------ */
.fig-main{
  position:relative;
  box-shadow:
    0 0 0 1px rgba(60,44,10,.55),
    clamp(10px,1.1vw,20px) clamp(10px,1.1vw,20px) 0 -1px rgba(176,139,46,.32),
    0 16px 34px rgba(20,14,0,.22);
}
.fig-main::before,.fig-main::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  width:clamp(20px,1.8vw,34px);height:clamp(20px,1.8vw,34px);
  border:1px solid rgba(232,210,148,.75);
}
.fig-main::before{left:-10px;top:-10px;border-right:0;border-bottom:0}
.fig-main::after{right:-10px;bottom:-10px;border-left:0;border-top:0}

.stack2 figure{
  position:relative;
  box-shadow:
    clamp(8px,.9vw,16px) clamp(8px,.9vw,16px) 0 -1px rgba(176,139,46,.26),
    0 10px 26px rgba(20,14,0,.18);
}
.hist-stack figure{
  box-shadow:
    clamp(8px,.9vw,16px) clamp(8px,.9vw,16px) 0 -1px rgba(232,210,148,.22),
    0 12px 30px rgba(0,0,0,.34);
}

/* a hairline top and bottom on every full-bleed photographic band, so a band
   reads as a plate rather than as a photograph that ran out of page */
.pano:not(.pano-cta)::before,.pano:not(.pano-cta)::after{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(176,139,46,0),var(--gold) 20%,
             var(--gold-h) 50%,var(--gold) 80%,rgba(176,139,46,0));
}
.pano:not(.pano-cta)::before{top:0}
.pano:not(.pano-cta)::after{bottom:0}

/* A6 · the puppy panorama becomes a centred large plate. It is also the one
   place this task REMOVES a crop: on a desktop the photograph is now shown
   whole (contain) instead of cover-cropped to a 1920-wide band. */
@media (min-width:1000px){
  .sec-pup .pano.pano-in{
    max-width:min(1180px,calc(100% - 2 * var(--gut)));margin-inline:auto;
    box-shadow:0 0 0 1px rgba(126,95,28,.5),0 22px 48px rgba(20,14,0,.22);
  }
  .sec-pup .pano.pano-in img{height:auto;object-fit:contain}
}

/* ------------------------------------------------------------------------
   A6 · ASYMMETRICAL EDITORIAL LAYOUT — no two consecutive two-up sections
   share a column ratio any more. Section ORDER is untouched.
   ------------------------------------------------------------------------ */
@media (min-width:1200px){
  .sec-env   .sec-in.split{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  .sec-par   .sec-in.split{grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr)}
  .sec-breed .sec-in.split{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
    gap:clamp(48px,5.0vw,110px)}
  .sec-life  .sec-in.split{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
  .sec-jr    .sec-in.split{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
  .sec-breed .fig-main{max-width:min(100%,480px);justify-self:center}
}

/* ------------------------------------------------------------------------
   A7 · LARGE TYPOGRAPHIC MOMENTS. Existing strings only — nothing is
   rewritten, duplicated or invented; the type gets the room it needs.
   「40年以上」「約700坪」 and the closing 「この子に会ってみたい」 are the
   three moments that carry the page.
   ------------------------------------------------------------------------ */
.pf-n{font-size:clamp(46px,4.1vw,74px)}
.pf-n em{font-size:clamp(18px,1.5vw,27px)}
.pf-t{font-size:clamp(18px,1.38vw,24px)}
.by-copy .h2{font-size:clamp(31px,3.55vw,62px);line-height:1.28}
.by-copy .body.on-dark.em-l{
  font-size:clamp(21px,1.90vw,32px);line-height:1.72;color:var(--gold-h);
  margin-top:clamp(26px,2.2vw,40px);
}
.sec-breed .h2,.sec-hist .h2{letter-spacing:.045em}

/* ------------------------------------------------------------------------
   A9 · DEPTH — used sparingly, so the page alternates flat / raised / flat.
   ------------------------------------------------------------------------ */
.kc{position:relative;transition:box-shadow .28s ease}
.kc::after{
  content:"";position:absolute;right:9px;top:9px;width:16px;height:16px;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);
  opacity:.7;pointer-events:none;
}
.kc:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 16px 34px rgba(60,44,10,.20)}

/* the Q / A letters become champagne medallions instead of loose glyphs */
.faq dt::before,.faq dd::before{
  display:flex;align-items:center;justify-content:center;line-height:1;
  width:clamp(34px,2.5vw,44px);height:clamp(34px,2.5vw,44px);
}
.faq dt::before{
  border:1px solid var(--gold);color:var(--gold-d);
  background:linear-gradient(180deg,#FFFDF6,#F0E4C6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
.faq dd::before{
  border:1px solid rgba(26,80,57,.5);color:#EAF2ED;
  background:linear-gradient(180deg,var(--green-l),var(--green));
}

/* ------------------------------------------------------------------------
   C / D · LUXURY SLIDER SYSTEM — one shell for the parent slider and the
   puppy slider, so the two read as this site's own gallery rather than as a
   generic carousel. Slide count, slide markup, images, captions, alt text,
   scroll-snap behaviour and carousel.js are ALL unchanged.
   ------------------------------------------------------------------------ */
.gal-lux{
  --gal-total:"08";
  position:relative;overflow:hidden;
  padding-block:clamp(46px,4.4vw,86px);
  background:
    radial-gradient(120% 74% at 20% 0%,rgba(26,80,57,.78),rgba(4,21,15,0) 66%),
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 56%,var(--green-x) 100%);
  border-block:1px solid rgba(232,210,148,.42);
}
/* the section word, oversized and drawn in outline only */
.gal-lux::before{
  content:attr(data-la);position:absolute;z-index:0;pointer-events:none;
  right:2.5%;top:-.10em;
  font-family:var(--la);font-weight:700;line-height:.86;letter-spacing:.05em;
  font-size:clamp(84px,12.5vw,232px);color:rgba(232,210,148,.05);
}
@supports (-webkit-text-stroke:1px red){
  .gal-lux::before{color:transparent;-webkit-text-stroke:1px rgba(232,210,148,.15)}
}
.gal-lux::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-5%;bottom:-16%;width:clamp(220px,26vw,460px);aspect-ratio:1;
  background:var(--crest) no-repeat center/contain;opacity:.075;
}
.gal-lux>*{position:relative;z-index:2}
.gal-lux .gal-head{
  padding-bottom:clamp(14px,1.2vw,22px);
  border-bottom:1px solid rgba(232,210,148,.26);
}
.gal-lux .gal-h{color:var(--gold-h)}
.gal-lux .gal-h::after{
  background:linear-gradient(90deg,var(--gold-h),var(--gold-a) 55%,rgba(232,210,148,0));
}
.gal-lux .gal-note{color:#C6D6CD;opacity:1}
.gal-lux .gal-note a{color:var(--gold-l)}
/* arrows: a champagne medallion with a double ring. The face stays light —
   the arrow artwork is an <img>, so it cannot be recoloured from here and
   needs a light ground to keep its contrast. */
.gal-lux .gal-btn{
  width:clamp(50px,3.6vw,60px);height:clamp(50px,3.6vw,60px);
  border-color:var(--gold-d);
  background:linear-gradient(180deg,#FBF1D2 0%,#EFDFAB 52%,#DCC488 100%);
  box-shadow:0 0 0 1px rgba(232,210,148,.42),0 8px 20px rgba(0,0,0,.38);
}
.gal-lux .gal-btn:hover:not(:disabled){background:var(--gold-h);border-color:var(--gold-h)}
.gal-lux .gal-btn:focus-visible{outline-color:var(--gold-h)}
.gal-lux .gal-track{counter-reset:gcard}
.gal-lux .gal-track::-webkit-scrollbar-track{background:rgba(232,210,148,.13)}
.gal-lux .gal-track::-webkit-scrollbar-thumb{background:rgba(232,210,148,.52)}
.gal-lux .gal-card{
  counter-increment:gcard;position:relative;
  background:rgba(2,16,11,.62);border-color:rgba(232,210,148,.44);
  box-shadow:0 14px 34px rgba(0,0,0,.36);
}
.gal-lux .gal-card::after{
  content:"";position:absolute;right:-1px;top:-1px;width:26px;height:26px;z-index:2;
  border-top:1px solid rgba(232,210,148,.85);border-right:1px solid rgba(232,210,148,.85);
  pointer-events:none;
}
.gal-lux .gal-card figcaption{border-top:1px solid rgba(232,210,148,.26);color:#D9E6DE}
/* plate number. Generated content, so no text is added to the document. */
.gal-lux .gal-card figcaption::before{
  content:counter(gcard,decimal-leading-zero) " / " var(--gal-total);
  display:block;margin-bottom:8px;
  font-family:var(--la);font-weight:700;font-size:clamp(10.5px,.78vw,13px);
  letter-spacing:.26em;color:var(--gold-l);
}
.gal-prog{height:2px;margin-top:clamp(16px,1.4vw,26px);background:rgba(232,210,148,.20)}
.gal-prog>i{
  display:block;height:100%;
  margin-left:var(--x,0%);width:var(--w,34%);
  background:linear-gradient(90deg,var(--gold-a),var(--gold-h) 55%,var(--gold-a));
  transition:margin-left .2s ease,width .2s ease;
}
@media (max-width:759px){
  .gal-lux::before{font-size:clamp(64px,20vw,120px);right:4%}
  .gal-lux .gal-btn{width:52px;height:52px}
}

/* ------------------------------------------------------------------------
   E · FINAL CTA — the most deliberate scene on the page. Copy, links, CTA
   wording and the 見学予約 > LINE相談 > 電話相談 hierarchy are untouched;
   only the staging changed. The R3G sticky consultation bar is a separate
   fixed element outside .page and is not affected by anything here.
   ------------------------------------------------------------------------ */
.pano-cta img{height:clamp(210px,23vw,430px)}
.pano-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:46%;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(14,53,39,0),rgba(14,53,39,.72) 62%,var(--green));
}
.by-in{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(26,80,57,.74),rgba(8,34,26,0) 70%),
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 56%,var(--green-k) 100%);
}
.by-crest{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:0;
  width:min(76vw,820px);aspect-ratio:1;pointer-events:none;
  background:var(--crest) no-repeat center/contain;opacity:.055;
}
.by-in::before{
  content:"";position:absolute;inset:var(--frame);z-index:1;pointer-events:none;
  border:1px solid rgba(232,210,148,.40);
}
.by-in::after{
  content:"";position:absolute;inset:calc(var(--frame) + 7px);z-index:1;pointer-events:none;
  border:1px solid rgba(232,210,148,.17);
}
.by-copy{padding-top:clamp(8px,1.0vw,18px)}
.cta-1{
  box-shadow:0 0 0 1px rgba(60,44,10,.6),0 0 0 6px rgba(232,210,148,.13),
             0 16px 40px rgba(0,0,0,.48);
}

/* ------------------------------------------------------------------------
   A10 · SUBTLE MOTION — a fade, a short lift, and a gold line that draws
   itself. Nothing bounces, spins, zooms or loops; no photograph moves; no
   parallax anywhere.

   The hidden state exists ONLY inside (prefers-reduced-motion: no-preference)
   AND only under the .r3h-motion flag, which the script sets after checking
   the same media query. So: reduced motion → finished page, no JavaScript →
   finished page, IntersectionObserver missing → finished page.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .r3h-motion .r3h-rv{
    opacity:0;transform:translate3d(0,20px,0);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1),
               transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .r3h-motion .r3h-rv.r3h-in{opacity:1;transform:none}
  .r3h-motion .r3h-rv .hair{
    clip-path:inset(-9px 100% -9px 0);
    transition:clip-path .95s .10s cubic-bezier(.22,.61,.36,1);
  }
  .r3h-motion .r3h-rv.r3h-in .hair{clip-path:inset(-9px 0 -9px 0)}
}

/* ------------------------------------------------------------------------
   RESPONSIVE — the ornament gets out of the way before the content does.
   ------------------------------------------------------------------------ */
@media (max-width:1199px){
  .sec-ghost{font-size:clamp(130px,22vw,240px);left:clamp(8px,2.0vw,26px);top:clamp(20px,2.2vw,36px)}
  .sec-hist .sec-ghost,.sec-breed .sec-ghost,.sec-pup .sec-ghost,
  .sec-know .sec-ghost,.sec-faq .sec-ghost,.bigyes .sec-ghost{
    left:auto;right:clamp(8px,2.0vw,26px)}
  .by-in::before,.by-in::after{inset:clamp(14px,1.6vw,24px)}
  .by-in::after{inset:calc(clamp(14px,1.6vw,24px) + 6px)}
}
@media (max-width:699px){
  :root{--frame:14px}
  .sec-ghost{font-size:100px;top:18px;left:6px}
  .sec-hist .sec-ghost,.sec-breed .sec-ghost,.sec-pup .sec-ghost,
  .sec-know .sec-ghost,.sec-faq .sec-ghost,.bigyes .sec-ghost{left:auto;right:6px}
  .sec-orn{margin-bottom:14px;gap:10px}
  .sec-orn::before{font-size:15px}
  .sec-orn::after{font-size:10.5px;letter-spacing:.3em;padding-left:47px;
    background-size:34px 1px}
  .sec-in.narrow.c .sec-orn,.by-copy .sec-orn{justify-content:flex-start}
  .fig-main::before,.fig-main::after{width:18px;height:18px}
  .fig-main::before{left:-7px;top:-7px}
  .fig-main::after{right:-7px;bottom:-7px}
  .fig-main{box-shadow:0 0 0 1px rgba(60,44,10,.55),8px 8px 0 -1px rgba(176,139,46,.3),
    0 12px 26px rgba(20,14,0,.2)}
  .stack2 figure,.hist-stack figure{box-shadow:7px 7px 0 -1px rgba(176,139,46,.24),
    0 8px 20px rgba(20,14,0,.16)}
  .gal-lux{padding-block:40px}
  .by-copy .h2{font-size:31px}
  .by-copy .body.on-dark.em-l{font-size:21px}
  .pf-n{font-size:44px}
  .pf-t{font-size:21px}
  .faq dt::before,.faq dd::before{width:34px;height:34px}
}
@media print{
  .sec-ghost,.gal-lux::before,.gal-lux::after,.by-crest{display:none}
}


/* ==========================================================================
   R3I · S5 親犬 — 作品版アートワーク差し替え + 観察カード 01/02 の再設計
   TASK EIKOKUGOLDEN-R3I-PARENT-DOG-IMAGE-SWAP-AND-LUXURY-OBSERVATION-CARDS

   置き換えた画像（3枚とも 1448x1086 = 厳密な 4:3、無加工）
     parent-hero.jpg -> oyadog1.png
     parent-4.jpg    -> tachisugata.png
     parent-2.jpg    -> 02arukusugata.png

   3枚とも「文字が焼き込まれた完成アートワーク」なので、この節の CSS は
   一貫して次を守る:
     ・object-fit:cover を使わない（cover は焼込み文字を必ず切る）
     ・aspect-ratio:4/3 の固定プレート + object-fit:contain で
       「必ず全体が出る」ことを構造的に保証する
     ・画像の上に HTML のテキストを重ねない（文言の二重表示をしない）
     ・花・葉・草・植物装飾・ヴィクトリアンな過剰装飾は使わない
       — 装飾は細い金の罫、角ブラケット、クレスト（幾何）、余白のみ

   R3G の文言・alt・figcaption・読み順（見出し -> 写真 -> キャプション）は不変。
   このブロックは既存ルールの後ろに追記するだけで、他セクションには触れない。
   ========================================================================== */

:root{
  /* ivory 面に置くための、暗い金のクレスト。--crest / --crest-f と同じ図形。 */
  --crest-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%237E5F1C' stroke-opacity='.16'%3E%3Cpath d='M100 4 196 100 100 196 4 100Z' stroke-width='2'/%3E%3Cpath d='M100 24 176 100 100 176 24 100Z' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='57' stroke-width='1'/%3E%3Cpath d='M72 70 100 130 128 70' stroke-width='7'/%3E%3Cpath d='M62 148h76' stroke-width='2'/%3E%3Cpath d='M100 40v10M100 150v10' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 親犬メイン --
   oyadog1.png は 4:3。既存の .fig-main の金枠・角ブラケット・オフセット面は
   そのまま使い、比率だけ 4:3 に固定して「絶対に切らない」ことを保証する。 */
.par-vis .fig-main.par-hero img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:contain;object-position:center;
  background:var(--green-d);
}

/* ==========================================================================
   観察シークエンス 01 / 02
   2枚を「同じカードの繰り返し」ではなく、深緑 -> アイボリーで反転する
   1つの見開きとして組む。左右も列比も反転させる（非対称エディトリアル）。
   ========================================================================== */
.par-obs{
  display:grid;gap:clamp(22px,2.4vw,44px);
  margin-top:var(--gap-ph);
  /* .sec-in と同じ gutter を持たせて、プレートが画面端に触れないようにする。
     .duo 系の gold seam グリッドは使わないので、背景も継承しない。 */
  padding-inline:var(--gut);
  background:none;
}
.par-obs .par-card{
  position:relative;margin:0;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1fr;
  grid-template-areas:"num" "txt" "plate" "cap";
  padding:clamp(22px,2.6vw,52px);
}
/* 角ブラケット。R3H の .fig-main と同じ語彙（1px の細い金の直角）。
   01 は 左上 + 右下、02 は 右上 + 左下 で、対にならないようにずらす。 */
.par-obs .par-card::before,
.par-obs .par-card::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  width:clamp(22px,2.0vw,40px);height:clamp(22px,2.0vw,40px);
}
.par-obs-1::before{left:clamp(11px,1.1vw,20px);top:clamp(11px,1.1vw,20px);
  border-left:1px solid rgba(232,210,148,.62);border-top:1px solid rgba(232,210,148,.62)}
.par-obs-1::after{right:clamp(11px,1.1vw,20px);bottom:clamp(11px,1.1vw,20px);
  border-right:1px solid rgba(232,210,148,.62);border-bottom:1px solid rgba(232,210,148,.62)}
.par-obs-2::before{right:clamp(11px,1.1vw,20px);top:clamp(11px,1.1vw,20px);
  border-right:1px solid rgba(126,95,28,.46);border-top:1px solid rgba(126,95,28,.46)}
.par-obs-2::after{left:clamp(11px,1.1vw,20px);bottom:clamp(11px,1.1vw,20px);
  border-left:1px solid rgba(126,95,28,.46);border-bottom:1px solid rgba(126,95,28,.46)}

/* --- 01 : 深緑のプレート ------------------------------------------------ */
.par-obs-1{
  background:linear-gradient(152deg,#0F3A2A 0%,#0A2820 54%,#06180F 100%);
  box-shadow:0 0 0 1px rgba(232,210,148,.26),0 20px 48px rgba(6,20,14,.30);
}
/* クレストは装飾。認証・受賞・登録・王室御用達を表すものではない。 */
.par-obs-1{
  background-image:var(--crest-f),
    linear-gradient(152deg,#0F3A2A 0%,#0A2820 54%,#06180F 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:right -46px top -40px,0 0;
  background-size:clamp(160px,14vw,260px) auto,auto;
}

/* --- 02 : アイボリーのプレート ------------------------------------------ */
.par-obs-2{
  background:linear-gradient(152deg,#FCFAF3 0%,#F5EFDF 58%,#EFE7D1 100%);
  box-shadow:0 0 0 1px rgba(126,95,28,.30),0 20px 44px rgba(40,30,8,.14);
}
.par-obs-2{
  background-image:var(--crest-g),
    linear-gradient(152deg,#FCFAF3 0%,#F5EFDF 58%,#EFE7D1 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:left -46px top -40px,0 0;
  background-size:clamp(160px,14vw,260px) auto,auto;
}

/* ------------------------------------------------------------ コピー側 --
   .par-card-head は display:contents にして、中の 01/02 と見出しブロックを
   カードの grid に直接載せる。これで「大きな番号は桁の上、見出しは写真と
   同じ行の先頭」になり、番号を大きくしても R3G の「見出し -> 写真」という
   読み順が崩れない。DOM の順序は 1 文字も変えていない。 */
.par-obs .par-card-head{display:contents}
/* 大きく、しかし控えめな 01 / 02。既存の実テキストをそのまま大きくしている
   ので、文字数も読み上げも R3G から変わらない。 */
.par-obs .par-card-n{
  grid-area:num;display:block;z-index:2;
  font-family:var(--la);font-weight:700;
  font-size:clamp(52px,5.4vw,104px);line-height:.94;letter-spacing:.03em;
  /* 短い金の罫は番号の下辺に background として引く。ボックスを増やさないので
     見出しの位置を 1px も下げない。 */
  padding-bottom:clamp(15px,1.4vw,24px);
  margin-bottom:clamp(16px,1.6vw,28px);
  background-repeat:no-repeat;
  background-size:clamp(40px,3.8vw,78px) 1px;
}
.par-obs-1 .par-card-n{
  background-image:linear-gradient(90deg,var(--gold-l),rgba(232,210,148,0));
  background-position:left bottom;
}
.par-obs-2 .par-card-n{
  background-image:linear-gradient(90deg,rgba(176,139,46,0),var(--gold));
  background-position:right bottom;
}
.par-obs-1 .par-card-n{color:rgba(232,210,148,.30)}
.par-obs-2 .par-card-n{color:rgba(126,95,28,.26)}
@supports (-webkit-text-stroke:1px red){
  .par-obs-1 .par-card-n{color:transparent;-webkit-text-stroke:1px rgba(232,210,148,.68)}
  .par-obs-2 .par-card-n{color:transparent;-webkit-text-stroke:1px rgba(126,95,28,.52)}
}
.par-obs .par-card-txt{grid-area:txt;z-index:2}

.par-obs .par-card-h{
  font-family:var(--jp);font-weight:700;
  font-size:clamp(21px,1.66vw,30px);line-height:1.5;letter-spacing:.07em;
}
.par-obs .par-card-p{
  margin-top:clamp(9px,.8vw,14px);
  font-family:var(--jp);font-size:clamp(16px,1.04vw,18px);
  line-height:1.82;letter-spacing:.045em;
}
.par-obs-1 .par-card-h{color:var(--gold-h)}
.par-obs-1 .par-card-p{color:#C4D5CB}
.par-obs-2 .par-card-h{color:#143024}
.par-obs-2 .par-card-p{color:#41504A}

/* --------------------------------------------------------------- 写真 -- */
/* 4:3 の固定プレート。mat（内側の余白）+ 1px の金の罫 = 額装。
   contain なので、どの幅でも作品は必ず全部出る。 */
.par-obs .par-plate{
  position:relative;z-index:1;
  padding:clamp(5px,.55vw,11px);
  margin-top:clamp(18px,1.9vw,34px);
}
.par-obs-1 .par-plate{
  background:linear-gradient(150deg,rgba(232,210,148,.16),rgba(232,210,148,.05));
  box-shadow:0 0 0 1px rgba(232,210,148,.34),0 16px 36px rgba(3,14,9,.42);
}
.par-obs-2 .par-plate{
  background:linear-gradient(150deg,rgba(255,253,247,.92),rgba(237,228,205,.75));
  box-shadow:0 0 0 1px rgba(126,95,28,.34),0 16px 34px rgba(40,30,8,.16);
}
.par-obs .par-plate::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inset:clamp(5px,.55vw,11px);
}
.par-obs-1 .par-plate::after{border:1px solid rgba(232,210,148,.42)}
.par-obs-2 .par-plate::after{border:1px solid rgba(126,95,28,.30)}
.par-obs .par-plate img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:contain;object-position:center;
}
.par-obs-1 .par-plate img{background:#06180F}
.par-obs-2 .par-plate img{background:#F3ECDA}

/* ---------------------------------------------------------- キャプション -- */
.par-obs figcaption{
  position:relative;z-index:2;margin-top:0;
  padding:clamp(13px,1.15vw,20px) clamp(4px,.5vw,10px) 0;
  background:none;
  font-family:var(--jp);font-size:clamp(15px,.98vw,17px);
  line-height:1.74;letter-spacing:.045em;
}
.par-obs-1 figcaption{color:#AFC4B9}
.par-obs-2 figcaption{color:#55645C}

/* ==========================================================================
   デスクトップ — 非対称の見開き
   01: 写真 左(大) / コピー 右(小)     列比 1.44 : .56
   02: コピー 左(小) / 写真 右(大)     列比 .52 : 1.48   ← 反転かつ別比
   どちらもコピーはカード上端から始まり、写真はそこから少し落として置く。
   これで「見出し -> 写真」という R3G の縦の読み順が、横組みでも崩れない。
   ========================================================================== */
@media (min-width:1200px){
  .par-obs{gap:clamp(26px,2.6vw,52px)}
  .par-obs .par-card{
    column-gap:clamp(30px,3.0vw,64px);row-gap:0;
    align-content:start;
  }
  .par-obs .par-card.par-obs-1{
    grid-template-columns:minmax(0,1.36fr) minmax(0,.64fr);
    grid-template-areas:"num num" "plate txt" "plate cap";
    grid-template-rows:min-content min-content 1fr;
  }
  .par-obs .par-card.par-obs-2{
    grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    grid-template-areas:"num num" "txt plate" "cap plate";
    grid-template-rows:min-content min-content 1fr;
  }
  .par-obs-1 .par-card-n{justify-self:start}
  .par-obs-2 .par-card-n{justify-self:end;text-align:right}
  .par-obs .par-card-txt{align-self:start}
  .par-obs .par-plate{grid-area:plate;align-self:start}
  /* キャプションは本文の続きではなく「図版の脚注」。細い罫を上に置いて
     コピー段の下端へ落とす。4:3 のプレートは背が高いので、こうすると
     段の下に空きが残らず、余白が意図した余白として読める。 */
  .par-obs figcaption{
    grid-area:cap;align-self:end;
    margin-top:clamp(22px,2.2vw,40px);
    padding:clamp(13px,1.15vw,20px) 0 clamp(2px,.4vw,8px);
    background-repeat:no-repeat;background-position:left top;
  }
  .par-obs-1 figcaption{
    background-image:linear-gradient(90deg,rgba(232,210,148,.5),rgba(232,210,148,.06));
    background-size:100% 1px;
  }
  /* 02 は脚注の罫を短い金の線にして、01 と機械的に同じにしない */
  .par-obs-2 figcaption{
    background-image:linear-gradient(90deg,var(--gold),rgba(176,139,46,0));
    background-size:clamp(40px,3.8vw,78px) 1px;
  }
  /* 写真の落とし込み量を左右で変えて、同じカードの繰り返しに見せない。
     どちらも見出しの先頭より下から写真が始まる（R3G の読み順）。 */
  .par-obs-1 .par-plate{margin-top:clamp(10px,.9vw,17px)}
  .par-obs-2 .par-plate{margin-top:clamp(20px,2.0vw,38px)}
  .par-obs .par-card.par-obs-1{padding:clamp(30px,2.8vw,54px)}
  .par-obs .par-card.par-obs-2{padding:clamp(30px,2.8vw,54px) clamp(30px,2.8vw,54px)
             clamp(30px,2.8vw,54px) clamp(34px,3.2vw,62px)}

  /* ── R4M4 · コピー段の穴をふさぐ ────────────────────────────────────
     4:3 のプレートは背が高く、コピー段（見出し + 補足 + 脚注）はその 1/4
     ほどしかない。row 3 を 1fr にして figcaption を段の下端へ落とす組み方
     だと、補足と脚注のあいだが実測で 1440px:507/529px、1920px:687/716px
     空き、「意図した余白」ではなく組みの崩れに見えていた。
     段の上下を 1fr ではさみ、コピーと脚注を 1 組のまま額装写真に対して
     光学的に中央へ置く。プレートは従来どおり align-self:start の自然高
     なので、カードの高さも下のセクションの位置も 1px も動かない。
     DOM・文言・写真・読み順（番号 → 見出し → 写真）は変更なし。
     1199px 以下の縦積みはこの media query の外なので不変。 */
  .par-obs .par-card.par-obs-1{
    grid-template-areas:"num num" "plate ." "plate txt" "plate cap" "plate .";
    grid-template-rows:min-content 1fr min-content min-content 1fr;
  }
  .par-obs .par-card.par-obs-2{
    grid-template-areas:"num num" ". plate" "txt plate" "cap plate" ". plate";
    grid-template-rows:min-content 1fr min-content min-content 1fr;
  }
  .par-obs figcaption{align-self:start}
}

/* ==========================================================================
   タブレット / スマホ — きれいに縦積み。2カラムに詰め込まない。
   ========================================================================== */
@media (max-width:1199px){
  .par-obs .par-card{
    grid-template-columns:1fr;
    grid-template-areas:"num" "txt" "plate" "cap";
    row-gap:0;
  }
  .par-obs .par-plate{grid-area:plate}
  .par-obs figcaption{grid-area:cap}
  .par-obs .par-card-n{font-size:clamp(46px,10vw,76px)}
  .par-obs-2 .par-card-n{justify-self:end;text-align:right}
  .par-obs .par-card-h{font-size:clamp(22px,2.6vw,30px)}
  .par-obs .par-card-p{font-size:clamp(16.5px,1.8vw,19px)}
  .par-obs figcaption{font-size:clamp(15.5px,1.5vw,17.5px)}
}
@media (max-width:699px){
  /* スマホでは焼込みの日本語が小さくなりすぎないよう、カードの内側 padding を
     詰めてプレートを一回り大きく見せる。カードの幅そのものは変えないので、
     横スクロールは発生しない。 */
  .par-obs{gap:18px;margin-top:clamp(30px,7vw,48px);padding-inline:8px}
  .par-obs .par-card{padding:20px 14px 22px}
  .par-obs .par-card-n{font-size:52px;padding-bottom:13px;margin-bottom:15px}
  .par-obs .par-card-h{font-size:21.5px;letter-spacing:.06em}
  .par-obs .par-card-p{font-size:16.5px;line-height:1.8}
  .par-obs .par-plate{margin-top:16px;padding:4px;margin-inline:-10px}
  .par-obs .par-plate::after{inset:4px}
  .par-obs figcaption{font-size:15.5px;padding:12px 4px 0}
  .par-obs .par-card::before,.par-obs .par-card::after{width:18px;height:18px}
  .par-obs-1::before,.par-obs-2::before{top:8px}
  .par-obs-1::before{left:8px}
  .par-obs-2::before{right:8px}
  .par-obs-1::after,.par-obs-2::after{bottom:8px}
  .par-obs-1::after{right:8px}
  .par-obs-2::after{left:8px}
  .par-obs-1,.par-obs-2{background-size:clamp(120px,32vw,170px) auto,auto}
}

/* R3H のリビール以外の動きは足していない。reduced-motion では
   .r3h-motion が付かないので、この節も最初から完成形で表示される。 */
@media (prefers-reduced-motion:no-preference){
  .r3h-motion .par-obs .par-card{will-change:opacity,transform}
}

@media print{
  .par-obs .par-card::before,.par-obs .par-card::after{display:none}
  .par-obs-1,.par-obs-2{background-image:none}
}

/* ==========================================================================
   R3J · 親犬メイン写真（oyadog1.png）のデスクトップ表示サイズ
   TASK EIKOKUGOLDEN-R3J-PC-PARENT-HERO-ENLARGEMENT-ONLY

   R3I で記録した既知の制限（§9.1）への対応。A6 の非対称エディトリアル配置で
   .sec-par は 1.34fr / .66fr だったため、1200px 以上では親犬のメイン写真が
   狭いほうの列に入り、1024px（1カラム）より小さく表示されていた。
   1920 で 547px、1440 で 412px。1024 の 940px と比べて明らかに弱い。

   直すのは列の配分だけ。写真そのもの・比率・object-fit:contain・焼込み文字・
   文言・見出し・alt・読み順・sticky CTA・スライダー・01/02 の見開きには
   一切触れていない。max-width:1199px 以下は未定義なので、タブレット/スマホの
   レンダリングはバイト単位で従来どおり。

   A6 の「隣り合う 2 カラム節は同じ列比を共有しない」という規則は維持している。
   前後の節は .sec-hist 1.10/.90（split-r・写真は左）と .sec-breed 1.24/.76 で、
   1.15/.85 はどちらとも一致しない。コピー列のほうが依然として広いので、
   「本文が主・写真が従」という R3G/R3H の階層も反転していない。
   ------------------------------------------------------------------------ */
@media (min-width:1200px){
  .sec-par .sec-in.split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* 列が広がった分、導入見出しの折り返し位置が変わり、1440 付近で末尾の
   「い。」だけが 2 行目に落ちていた。文言は 1 文字も変えずに行を均す。
   text-wrap:balance 非対応のブラウザでは従来どおりの折り返しに戻るだけで、
   欠落も崩れも起きない。1199px 以下には適用しないので、
   タブレット/スマホの見え方は完全に従来のまま。 */
@media (min-width:1200px){
  .par-vis .par-lead-h{text-wrap:balance}
}


/* ═══════════════════════════════════════════════════════════════════════
   R3K — YouTube 2 本目のサムネイル差し替え（Youtubewebpic.png）
   ───────────────────────────────────────────────────────────────────────
   支給アートワークは 1672×941（= 1.7768）で、器の 16/9（= 1.7778）と
   ほぼ同一だが完全一致ではない。既定の object-fit:cover のままだと
   縦を 0.06% だけ削るため、犬・日本語文字・金の枠すべてを 1px も欠かさない
   ことを保証する目的で、この 1 枚だけ contain に切り替える。
   letterbox が出ても器の地色 #04140F と同じなので視覚的な帯は生じない。
   .yt>img（cover）は 1 本目 yt-1.jpg のために従来どおり残す。
   アートワーク自体は再生成も加工も再圧縮もしていない（原本と sha256 一致）。 */
.yt>img.yt-art,.yt>picture.yt-art>img{
  object-fit:contain;
  object-position:50% 50%;
  background:#04140F;
}

/* 支給アートワークは画面右半分に金文字の見出しを内蔵している。
   .yt-play の暗幕（.16 → .5）は写真サムネイル前提の値で、そのままだと
   その金文字を沈ませる。再生バッジとラベルは各自の背景を持っているので
   暗幕を弱めても可読性は落ちない。この 1 枚だけ暗幕を軽くする。
   文言・位置・サイズ・要素構成は一切変更していない。 */
.yt>.yt-art~.yt-play{
  background:linear-gradient(180deg,rgba(4,20,15,.10),rgba(4,20,15,.30));
}

/* ═══════════════════════════════════════════════════════════════════════
   R3L — Youtubewebpic.png の再生 UI をベイクド見出しの外へ退避（CSS のみ）
   ───────────────────────────────────────────────────────────────────────
   アートワークに焼き込まれた見出し
     「キュートなアンディ」 / 「英国ゴールデンレトリバーVILLA」
   は原画 1672×941 上で x 0.409–0.986 / y 0.303–0.7375 を占める。
   中央寄せの再生バッジ＋ラベルはこの帯の真上に載るため、この 1 枚だけ
   バッジとラベルを 1 個の横型コントロールにまとめ、右下の安全域
   （見出し下端 0.7375 より下・下端の金枠 0.956 より上）へ移す。

   寸法はすべて器（.yt-play は .yt のパディングボックス＝画像と同一矩形）
   に対する % で与えるので、1920〜320px のどの幅でも
   コントロール上端は画像高の約 0.79 に落ち着き、見出しに触れない。
   font-size だけは % が使えないため 700px で 1 段だけ切り替える。

   変更しないもの: 画像バイト / トリミング / 縦横比 / 文言「動画を再生する」/
   href / DOM 構造 / 1 本目のカード / <head> / 構造化データ。
   .yt-play は従来どおり inset:0 の全面リンクなので、タップ領域と
   クリック挙動（facade → iframe 差し替え）は R3K と同一。 */
.yt>.yt-art~.yt-play{
  --ytc:clamp(24px,15%,52px);          /* コントロール高 = 器の高さの 15% */
  flex-direction:row;
  align-items:flex-end;
  justify-content:flex-end;
  gap:0;
  padding:0 clamp(12px,3.8%,32px) clamp(10px,3.4%,28px);
  /* 暗幕は下端だけに残す。見出しの金文字にはほぼ掛からない。 */
  background:linear-gradient(180deg,
    rgba(4,20,15,.06) 0%,rgba(4,20,15,.06) 52%,rgba(4,20,15,.30) 100%);
}

/* 左キャップ = 再生アイコン。丸バッジから角丸の矩形キャップへ。 */
.yt>.yt-art~.yt-play .yt-badge{
  width:auto;aspect-ratio:1/1;height:var(--ytc);
  border:1px solid var(--gold-l);border-right:0;
  border-radius:5px 0 0 5px;
  background:linear-gradient(180deg,rgba(6,28,21,.93),rgba(3,16,12,.95));
  box-shadow:-5px 8px 20px rgba(0,0,0,.45);
}
.yt>.yt-art~.yt-play .yt-badge::after{
  left:38%;top:26%;width:34%;height:48%;
  transform:none;border:0;
  background:var(--gold-h);
  clip-path:polygon(0 0,100% 50%,0 100%);
}

/* 右側 = 文言。文言そのものは 1 文字も変えていない。 */
.yt>.yt-art~.yt-play .yt-lab{
  display:flex;align-items:center;white-space:nowrap;
  height:var(--ytc);
  padding:0 clamp(10px,1.6%,22px);
  border:1px solid var(--gold-l);
  border-radius:0 5px 5px 0;
  background:linear-gradient(180deg,rgba(6,28,21,.93),rgba(3,16,12,.95));
  box-shadow:5px 8px 20px rgba(0,0,0,.45);
  font-size:clamp(11px,1.31vw,17px);
  line-height:1;
  letter-spacing:.08em;text-indent:.08em;
  color:var(--gold-h);
}
@media (max-width:699px){
  /* 700px 未満は 1 カラムなのでカード幅 ≈ 0.885vw。同じ比率を保つ係数へ。 */
  .yt>.yt-art~.yt-play .yt-lab{font-size:clamp(11px,2.6vw,17px)}
}

/* 器 .yt は overflow:hidden なので、UA 既定のフォーカスリング
   （outline-offset:1px = 器の外側）は刈り取られて見えない。これは R3D 以来の
   既存挙動で R3L は .yt / .yt-play のボックスを変えていないが、再生 UI を
   動かした以上フォーカスの所在は明確であるべきなので、このカードだけ
   内側に金のリングを描く。DOM・文言・href・レイアウトは変更なし。 */
.yt>.yt-art~.yt-play:focus-visible{
  outline:3px solid var(--gold-h);
  outline-offset:-5px;
}


/* ==========================================================================
   R3M · 親犬スライダー par-g1 のみ 4:3 カードへ整合
   ------------------------------------------------------------------------
   差替え後の par-g1.jpg（IMG_0947）だけが 1024x683（3:2）で、他の7枚は
   1024x768（4:3）。既定の `.gal-card img{height:auto}` のままだと par-g1 の
   画像だけが低くなり、キャプションとの間に測定値で 25.4-47.5px の空きが出て
   カードが1枚だけ崩れる（R3M 実測 / qa-prefix）。
   ここでは **par-g1 の img 1枚だけ** を 4:3 の枠に合わせる。
   ・aspect-ratio で枠を他の7枚と同じ 4:3 にする
   ・object-fit:cover なので**縦は 100% 残る＝頭も足も切れない**。
     切れるのは左右のみ、原画 1024px のうち 910.7px（88.93%）が見え、
     左右 56.7px ずつの余白（下草と右手前の岩）が外れるだけ。
     犬の全身（尾の先 x≈130 〜 前足 x≈700）は完全に枠内に残る。
   ・object-position は既定の中央。犬は枠内でやや左に寄り、顔の向く右側に
     余白が残る＝視線方向のリードスペースになる。
   他の par-g*.jpg / 子犬スライダー / .gal-card の共通ルールには一切触れない。
   ========================================================================== */
#parents-track img[src$="par-g1.jpg"]{
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
  object-position:50% 50%;
}

/* ------------------------------------------------------------------------
   R3P · .pano-art — a finished artwork plate whose headline is baked into
   the image (koinutop.png, 1836x857). Same principle as .pano-band: the
   plate is shown WHOLE at its own aspect ratio at every width, so no crop
   can ever cut a puppy or a character of the burned-in copy. This block is
   last in the sheet and carries .sec-pup, so it also wins over the cover
   heights .pano-in declares inside the 1199px / 699px queries.
   Scoped to this one image only - .pano, .pano-in and .pano-band elsewhere
   are untouched.
   ------------------------------------------------------------------------ */
.pano.pano-art img,
.sec-pup .pano.pano-in.pano-art img{
  width:100%;height:auto;object-fit:contain;object-position:50% 50%;display:block;
}

/* R3Q · the plate is now art-directed: koinutop.png (1836x857) at >=700px,
   the portrait mujakideai.png (1122x1402) at <=699px, selected by <picture>.
   Both need the same contract - full width, natural height, never a fixed
   height - so the rule above already covers the portrait source: it sits
   after the 699px block that gives .pano img a clamp() height, and the
   .pano-art class is what wins there. Nothing below re-introduces a height.
   The wrapper is only declared block so the inline <picture> cannot leave a
   baseline gap under a 1672px-tall plate. Scoped to this figure alone. */
.pano.pano-art picture{display:block}

/* ------------------------------------------------------------------------
   R3S · .pano-bay — the VISIT panorama in the final CTA. The plate changed
   from visit-pano.jpg (3.35:1) to sabamibayfinal.png (2172x724, exactly
   3:1), a wider view in which the whole of Sagami Bay, the coastline, the
   town and the foreground greenery all matter. Every one of the clamp()
   heights .pano / .pano-cta declare — base, the 699px query, and the FINAL
   CTA block — is a fixed height paired with object-fit:cover, i.e. a crop.
   On a 3:1 source those crops cut the bay. So this figure alone opts out:
   full width, natural height, contain, no crop, no stretch. Last in the
   sheet and at .pano.pano-cta.pano-bay specificity, so it wins over the
   690/1199px queries without touching them. Scoped to this one panorama —
   .pano, .pano-in, .pano-band and .pano-art elsewhere are unchanged.
   The .pano-cta::after gradient that blends the plate into the CTA ground
   is intentionally kept; it is a percentage height and follows the image.
   ------------------------------------------------------------------------ */
.pano.pano-cta.pano-bay img{
  width:100%;height:auto;object-fit:contain;object-position:50% 50%;display:block;
}


/* ==========================================================================
   R3T · FINAL VISUAL / PERFORMANCE PASS — 20260909
   ------------------------------------------------------------------------
   (1) <picture> transparency, (2) S3 環境の非対称エディトリアル見開き,
   (3) 抑制したセクション接続。既存の R3C〜R3S の規則は上をそのまま残し、
   ここでは上書きではなく追加のみを行う。
   ========================================================================== */

/* --- 1. <picture> はレイアウトに存在しない ------------------------------
   AVIF / WebP 派生を配るために 20 枚あまりの <img> を <picture> で包む。
   包んだことでボックスツリーが変わるとこれまでの寸法が崩れるので、
   picture 自体は display:contents にして「無かったこと」にする。
   例外は R3Q で display:block と明示済みの .pano.pano-art picture
   （より詳細度が高いのでそちらが勝つ）と、.yt 内の picture
   （高さ 100% を解決させるため box が要る）。 */
picture{display:contents}
.yt>picture{display:block;width:100%;height:100%}

/* --- 2. S3 ENVIRONMENT · 非対称エディトリアル見開き ---------------------
   旧 .duo.duo-nocrop は 2 等分グリッド + align-items:stretch だった。
   figure の高さが揃えられ、比率の低い kyukei（16:9）側のキャプションが
   margin-top:auto で底に押し出されるため、画像下に深緑の空白が残った
   （1920 で 179.4px / 1440 で 134.5px / 768 で 44.7px)。
   ここでは高さを揃えることをやめ、各カードが自分の画像の比率で立つ。 */
.env-spread{
  --es-gap:clamp(22px,2.6vw,52px);
  --es-drop:clamp(30px,5.0vw,100px);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  column-gap:var(--es-gap);
  align-items:start;                 /* ← 空白の原因だった stretch を解除 */
  margin-top:var(--gap-ph);
  padding-inline:var(--gut);
}
.es-card{
  position:relative;
  margin:0;
  padding:clamp(9px,.72vw,14px);
  background:linear-gradient(180deg,var(--green) 0%,var(--green-d) 78%);
  border:1px solid rgba(176,139,46,.46);
  box-shadow:0 16px 44px rgba(6,26,19,.20);
}
.es-card img{width:100%;height:auto;display:block}
.es-card>figcaption{
  margin-top:clamp(10px,.86vw,16px);
  padding:clamp(11px,.92vw,16px) clamp(3px,.4vw,8px) clamp(3px,.3vw,6px);
  border-top:1px solid rgba(176,139,46,.38);
  font-family:var(--jp);font-size:clamp(16px,1.02vw,17.5px);line-height:1.68;
  letter-spacing:.04em;color:#DCE7E0;
}
/* 右カードを落として、2 枚が「並べただけ」に見えないようにする */
.es-b{margin-top:var(--es-drop)}
/* 外側の角だけに紋章由来のコーナーブラケット（金の細線 2 本） */
.es-card::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  width:clamp(20px,2.0vw,34px);height:clamp(20px,2.0vw,34px);
  left:-1px;top:-1px;
  border-top:1px solid var(--gold-l);border-left:1px solid var(--gold-l);
}
.es-b::before{
  left:auto;right:-1px;top:auto;bottom:-1px;
  border-top:0;border-left:0;
  border-bottom:1px solid var(--gold-l);border-right:1px solid var(--gold-l);
}
/* 2 枚を結ぶ 1 本の細い金の罫。右カードの上辺の高さで、間の余白の中に引く */
.es-a::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:100%;top:var(--es-drop);height:1px;
  width:var(--es-gap);
  background:linear-gradient(90deg,var(--gold),rgba(176,139,46,0));
}

/* タブレット（700–1199px）はページ全体が 1 カラムに落ちる幅なので、
   ここだけ 2 列を維持すると 275px の小さなカードになって周囲と揃わない。
   1 カラムのまま、幅と寄せで非対称を作る（広い方＝場所を示す 16:9 が主）。 */
@media (min-width:700px) and (max-width:1199px){
  .env-spread{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(20px,3.2vw,38px);
  }
  .es-a{width:100%}
  .es-b{width:80%;margin-top:0;margin-left:auto}
  .es-a::after{
    left:auto;right:14%;top:auto;bottom:calc(-1 * clamp(10px,1.6vw,19px));
    width:clamp(60px,10vw,120px);
    background:linear-gradient(90deg,rgba(176,139,46,0),var(--gold));
  }
}
@media (max-width:699px){
  /* スマホは縦積み。各画像は原比率のまま画面幅いっぱい近くまで使う。 */
  .env-spread{
    grid-template-columns:1fr;
    row-gap:clamp(22px,6vw,34px);
    padding-inline:clamp(8px,2.4vw,16px);
  }
  .es-a,.es-b{width:100%}
  .es-b{margin-top:0}
  .es-a::after{display:none}
  .es-card>figcaption{font-size:16px}
}

/* --- 3. セクション接続（抑制版） ---------------------------------------
   a) 親犬 / 子犬のギャラリー帯はアイボリーの地に深緑の板が硬く切り替わる。
      既存の金の border-block はそのままに、板の内側だけへアイボリーの
      薄い光を落として、切り替わりを 1 本の線ではなく面で受ける。
   b) 動画 2 枚はアイボリーの上に浮いていたので、上に細い金の罫と菱形を
      1 つだけ置いて、前のセクションから続いていることを示す。
   どちらも新しい要素・文言・見出しを追加しない。 */
.gal-lux{
  background:
    linear-gradient(180deg,rgba(247,242,228,.16),rgba(247,242,228,0) clamp(46px,5vw,104px)),
    linear-gradient(0deg,rgba(247,242,228,.11),rgba(247,242,228,0) clamp(40px,4.4vw,92px)),
    radial-gradient(120% 74% at 20% 0%,rgba(26,80,57,.78),rgba(4,21,15,0) 66%),
    linear-gradient(180deg,var(--green) 0%,var(--green-d) 56%,var(--green-x) 100%);
}
.vids.vids-light{position:relative}
.vids.vids-light::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:0;right:0;top:calc(-1 * clamp(22px,2.2vw,44px));height:1px;
  background:linear-gradient(90deg,
    rgba(176,139,46,0),rgba(176,139,46,.46) 22%,
    rgba(176,139,46,.46) 78%,rgba(176,139,46,0));
}
.vids.vids-light::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:50%;top:calc(-1 * clamp(22px,2.2vw,44px));
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-h),var(--gold-a) 55%,var(--gold-d));
  box-shadow:0 0 0 1px rgba(126,95,28,.55);
}

/* ==========================================================================
   R3U · CROSS-DEVICE TAP TARGETS AND FINAL VISUAL POLISH
   TASK EIKOKUGOLDEN-R3U-CROSS-DEVICE-UX-TAP-TARGET-AND-FINAL-VISUAL-POLISH

   Nothing here changes a type size, a colour, a word, a heading, an href or
   an image source. Every rule either lifts a hit area to 44x44 without
   touching the visible type, or repairs a break that only appears once the
   vw-based type scale outgrows a fixed em-based column.
   ========================================================================== */

/* ------------------------------------------------------- A. tap targets --
   Two techniques, chosen per element:

   (1) min-height + centring, where the element already owns its band and a
       few extra pixels are invisible or an improvement (nav rows, footer
       bar, top utility bar).
   (2) an invisible centred ::after overlay, where real padding would move a
       hairline underline away from its text or disturb section rhythm. The
       overlay is 44px tall, sits inside the element's own margin box, and
       never reaches a neighbouring target.                                  */

/* (1) brand lockup — baseline alignment of 英国… / VILLA must not move, so
       the box keeps its intrinsic height and gains an overlay instead. */
.gnav-brand{position:relative}
.gnav-brand::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* (1) desktop nav rows: 41px at 1440, 42px on the utility bar. */
.gnav-main a{display:flex;align-items:center;min-height:44px}
/* .gnav-sp-only is display:none on desktop at a lower specificity than the
   rule above, so its hidden state is restated here and re-enabled with the
   mobile panel. Without this the two SP-only links appear in the PC nav. */
.gnav-main a.gnav-sp-only{display:none}
@media (max-width:1199px){.gnav-main a.gnav-sp-only{display:flex}}
.util-r a{display:flex;align-items:center;justify-content:center;min-height:44px}

/* (1) footer legal bar: 37-40px everywhere. The dividing rules grow with the
       rows, which reads as intended rather than as padding. */
.foot-bar nav a{display:flex;align-items:center;min-height:44px}

/* (2) underlined text links — 「…をくわしく見る」/「くわしく見る」. Real
       padding here would push the 1px underline away from its text. */
.sub-link a,.kc-link{position:relative}
.sub-link a::after,.kc-link::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* (2) knowledge-card headings are links. The anchor takes the full card
       width so the whole heading line is tappable, and the overlay lifts a
       single-line heading from 27-33px to 44px. */
.kc h3 a{display:block;position:relative}
.kc h3 a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* citation links wrap onto several rows, so an overlay would let two rows'
   hit areas overlap. These get real vertical padding instead, and the
   underline is redrawn by a pseudo-element at its original offset so the
   type does not appear to sit on a separator rule. */
.src a{position:relative;padding-block:7px;border-bottom-color:transparent}
.src a::after{
  content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;
  background:rgba(176,139,46,.55);
}
/* the vertical rule between citations must not stretch with the new padding */
.src-l li+li::before{top:50%;bottom:auto;height:1.15em;transform:translateY(-50%)}

@media (max-width:1199px){
  /* mobile already stacks the citations as full-width 44px rows with a
     border-top rule and no underline — leave that exactly as it was. */
  .src a{padding-block:11px}
  .src a::after{display:none}
}

/* breadcrumb on the evergreen detail pages (golden-retriever-colour.html …):
   26px rows. The list wraps, so these take real padding rather than an
   overlay, the underline is redrawn at its original offset, and the bar's
   own padding is trimmed by the same amount so the band keeps its height. */
.bc a{display:inline-block;position:relative;padding-block:10px;border-bottom-color:transparent}
.bc a::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:rgba(176,139,46,.5);
}
.bc{padding-block:clamp(4px,.55vw,10px)}
@media (max-width:1199px){.bc{padding-block:4px}}

/* DOCUMENTED EXCEPTION — two link classes stay below 44px on purpose:
     .gal-note a  「当犬舎のレトリバー」 inside the parents gallery note
     .art .cite   「FCI 第111番」「GRCA」… inside article sentences
   Both are inline links inside a sentence of running copy, which is the
   WCAG 2.5.8 (Target Size, Minimum, AA) "Inline" exception. Raising them
   would need a hit area taller than the line box, so it would swallow the
   lines above and below — and where two citations land on neighbouring
   lines their hit areas would overlap. Every destination they point to is
   also reachable from a full-size target: /aboutgolden.html from the header
   nav, the 60px 「当犬舎のレトリバーを見る」 button directly above the note,
   its knowledge card and the footer; each cited standard from the 44px
   出典 list at the foot of the same section.                              */

/* --------------------------------------------- B. large-viewport breaks --
   --measure is 42em of the ROOT font size, so the narrow reading column is
   a fixed 800px, while .h2 and .pull scale with vw. Above roughly 1500 the
   type outgrew the column: the KNOWLEDGE heading fell to two lines and the
   breed pull-quote lost its three authored <br> breaks, leaving a
   two-character orphan line. Widen only those two blocks. Neither block's
   running copy moves: .body and .src keep their own --measure cap and stay
   centred on the same axis. */
@media (min-width:1500px){
  .sec-know .sec-in.narrow{max-width:calc(1000px + 2 * var(--pad))}
  .sec-breed .sec-in.narrow{max-width:calc(1000px + 2 * var(--pad))}
  .sec-breed .pull{max-width:none}
}

/* NOTE: the 「…とは」/「は」 break in the first knowledge card was measured
   under text-wrap:pretty and text-wrap:balance as well as the existing
   word-break:auto-phrase — Chromium produces the identical break in all
   three, and the card column is far too narrow for a one-line heading at
   any viewport. Left as authored rather than forcing it with markup. */

/* ═════════════════════════════════ R4M45 ════════════════════════════════
   パンくずの HOME だけを、控えめなボタン面にする。

   構造・文言・href・BreadcrumbList は 1 バイトも動かない。動くのは
   .bc の 1 番目の <li> の <a> の見え方だけで、追加はこのブロックのみ
   （既存セレクタの書き換えなし・247 ページの markup は PRE のまま）。

   なぜ CSS だけで足りるか: 全 247 ページのパンくずは
   template-parts/lower/breadcrumb.php が 1 本で吐いていて、先頭 <li> は
   villa_lp_crumbs() / villa_post_crumbs() のどちらでも必ず HOME。
   :first-child で正確にそこだけに当たる。

   高さは中立。既存の .bc a は padding-block:10px ＋ border-bottom:1px
   （色は transparent）で lh+21px。枠を 4 辺に出すと +1px 高くなるので
   下パディングを 1px 削って lh+21px に戻してある。帯の高さは変わらない。
   押しやすさは横方向で稼ぐ（左右パディング）ので、既存の 44px 以上の
   タップ高さもそのまま。                                                  */
.bc li:first-child a{
  color:var(--green);
  padding:10px 12px 9px;
  border:1px solid rgba(176,139,46,.45);
  border-radius:3px;
  background:var(--ivory);
  transition:background-color .18s ease,border-color .18s ease;
}
/* 枠が下線の役目を兼ねるので、2463 行の再描画下線はここでは出さない */
.bc li:first-child a::after{display:none}
/* 小さな家。DOM には何も足さないので、読み上げにもテキスト抽出にも
   出ない（既存の可視テキストは「HOME」のまま）。 */
.bc li:first-child a::before{
  content:"";display:inline-block;width:.95em;height:.95em;
  margin-right:.45em;vertical-align:-.12em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E3527' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.1 7.5 8 2.4l5.9 5.1'/%3E%3Cpath d='M3.6 8.7v4.9h8.8V8.7'/%3E%3Cpath d='M6.5 13.6V9.9h3v3.7'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (hover:hover){
  .bc li:first-child a:hover{background:var(--paper);border-color:var(--gold)}
}
.bc li:first-child a:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .bc li:first-child a{transition:none}
}
/* ---- スマホ ------------------------------------------------------------
   天地は据え置き（帯の高さを動かさないため）。横は広げるが、広げた分だけ
   トレイル全体が折り返しやすくなるので、その分を区切り「›」の余白から
   返す。実測（bcfit_r4m45.py・247ページ×3幅）:

     HOME だけ広げた場合   390px 25ページ / 360px 11 / 320px 7 が1行増える
     この組み合わせ        390px  5ページ / 360px  7 / 320px 3

   区切りの 10px→6px は 699px 以下だけ・加算のみで、既存の .bc li+li::before
   は書き換えていない（`ol` を挟んだ別セレクタで上書きしている）。       */
@media (max-width:699px){
  .bc li:first-child a{padding-inline:8px}
  .bc li:first-child a::before{width:.8em;height:.8em;margin-right:.3em}
  .bc ol li+li::before{padding:0 6px}
}

/* R4M45 - .yt が実プレーヤーを直に抱えるようになったので、UA 既定の
   inset ボーダーを落とす。既存の 442 行 .yt>iframe{width/height} は
   そのまま。クリック再生で JS が差し込む iframe にも同じく効く。 */
.yt>iframe{border:0}