@charset "UTF-8";
/*!
 * pet-stay-cinematic-v3
 * LIFE EDIT MARKET /guides/pet-stay/ visual refresh.
 */

body.petStayPage{
  --ds-ink:#171915;
  --ds-ink-soft:#555347;
  --ds-paper:#f2eee5;
  --ds-surface:#fffaf0;
  --ds-line:#d6c8b4;
  --ds-accent:#20372c;
  --ds-gold:#8f5730;   /* 明るい地の上で 4.5:1 に届かせる（#9a5d36 は 4.42） */
  --lem-clay:#8c5144;
  --lem-sage:#5d735f;
  --lem-mist:#dbe2d6;
  --lem-plum:#5c3f49;
  background:
    linear-gradient(180deg,#efe7d8 0,#f6f1e8 18%,#f2eee5 100%);
}
html:has(body.petStayPage){ overflow-x:hidden; }

.petStayPage .ds-wrap{ width:min(1320px,100% - clamp(32px,5.6vw,82px)); }
.petStayPage .ds-section{ position:relative; padding-block:clamp(112px,12vw,190px); }
.petStayPage .ds-section--tight{ padding-block:clamp(96px,10vw,150px); }
.petStayPage .ds-head{ max-width:min(860px,100%); margin-bottom:clamp(42px,6vw,86px); }
.petStayPage .ds-kicker{
  color:var(--ds-gold);
  font-weight:700;
  letter-spacing:.22em;
}
.petStayPage .ds-h2{
  max-width:12.5em;
  font-size:clamp(36px,5.7vw,82px);
  line-height:1.12;
  letter-spacing:0;
}
.petStayPage .ds-lead{
  max-width:48em;
  color:#47473e;
  font-size:clamp(15px,1.25vw,18px);
}

.petStayPage .petNav{
  padding-block:clamp(16px,2.2vw,30px);
  background:linear-gradient(180deg,rgba(9,12,10,.52),rgba(9,12,10,0));
}
.petStayPage .petNav__brand{
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.petStayPage .petNav__links{
  gap:10px;
  padding:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(16,19,17,.18);
  backdrop-filter:blur(18px);
}
.petStayPage .petNav__links a{
  padding:7px 10px;
  color:rgba(255,255,255,.88);
}

.petStayPage .ds-hero{
  min-height:100svh;
  padding-block:clamp(128px,14vw,210px) clamp(78px,8vw,126px);
  align-items:center;
}
.petStayPage .ds-hero__media{ inset:-10% 0 -8%; }
.petStayPage .ds-hero__media img{
  filter:saturate(.9) contrast(1.07) brightness(.82);
  object-position:center 52%;
}
.petStayPage .ds-hero__scrim{
  background:
    radial-gradient(circle at 76% 20%,rgba(255,255,255,.10),rgba(255,255,255,0) 28%),
    linear-gradient(90deg,rgba(7,10,8,.9) 0%,rgba(7,10,8,.72) 38%,rgba(7,10,8,.22) 73%,rgba(7,10,8,.48) 100%),
    linear-gradient(180deg,rgba(7,10,8,.58) 0%,rgba(7,10,8,.08) 42%,rgba(7,10,8,.88) 100%);
}
.petStayPage .ds-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,330px);
  gap:clamp(38px,7vw,118px);
  align-items:end;
}
.petStayPage .ds-hero__eyebrow{
  width:max-content;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.petStayPage .ds-hero__title{
  display:grid;
  gap:.03em;
  max-width:9.6em;
  font-size:clamp(58px,8.6vw,126px);
  line-height:.96;
  letter-spacing:0;
}
.petStayPage .ds-hero__title span{ display:block; white-space:nowrap; }
.petStayPage .ds-hero__sub{
  max-width:42em;
  font-size:clamp(15px,1.28vw,19px);
  line-height:2.05;
}
.petStayPage .ds-hero__stats{
  grid-column:2;
  grid-row:1 / span 4;
  align-self:end;
  display:grid;
  gap:1px;
  margin-top:0;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px);
}
.petStayPage .ds-hero__stat{
  padding:clamp(18px,2.4vw,28px);
  background:rgba(12,14,12,.46);
}
.petStayPage .ds-hero__stat b{ font-size:clamp(34px,4.4vw,58px); }
.petStayPage .ds-hero__actions{ gap:12px; }
.petStayPage .ds-btn{
  min-height:58px;
  border-radius:6px;
  font-weight:700;
  letter-spacing:.04em;
}
.petStayPage .ds-btn--primary{
  background:#f0d6b8;
  color:#172016;
}
.petStayPage .ds-btn--dark{
  background:var(--ds-accent);
  color:#fffaf0;
}
.petStayPage .ds-btn--ghost{
  border-color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.petStayPage .petIntro__grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,7vw,112px);
}
.petStayPage .petIntro__body{
  padding:clamp(24px,4vw,42px) 0 0 clamp(20px,3vw,38px);
  border-left:1px solid var(--ds-line);
}
.petStayPage .petIntro__body p{
  font-size:clamp(15px,1.1vw,17px);
  color:#45453b;
}
.petStayPage .ds-stats{
  border:0;
  gap:10px;
  background:transparent;
}
.petStayPage .ds-stats > div{
  border:1px solid var(--ds-line);
  background:linear-gradient(180deg,#fffaf0,#f8f0e2);
  min-height:164px;
}

.petStayPage .petAreas{
  background:
    linear-gradient(180deg,#fbf7ef,#ede4d3);
}
.petStayPage .ds-bento{
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(180px,13vw);
  gap:12px;
}
.petStayPage .ds-bento__cell{
  grid-column:span 4;
  min-height:300px;
  border-radius:8px;
  box-shadow:0 20px 50px rgba(35,29,20,.12);
}
.petStayPage .ds-bento__cell--xl{
  grid-column:span 7;
  grid-row:span 2;
  min-height:610px;
}
.petStayPage .ds-bento__cell--wide{
  grid-column:span 5;
}
.petStayPage .ds-bento__cell::after{
  background:
    linear-gradient(180deg,rgba(8,10,8,0) 20%,rgba(8,10,8,.34) 54%,rgba(8,10,8,.9) 100%);
}
.petStayPage .ds-bento__body{
  padding:clamp(22px,3.4vw,48px);
}
.petStayPage .ds-bento__cell h3{
  font-size:clamp(26px,3.2vw,50px);
  line-height:1.14;
}
.petStayPage .ds-bento__cell p{ font-size:13.5px; }

.petStayPage .petAxes{
  background:#131914;
  color:#f6eee2;
}
.petStayPage .petAxes .ds-kicker,
.petStayPage .petAxes .ds-lead,
.petStayPage .petAxes .ds-scene p,
.petStayPage .petAxes .ds-scene__facts dd{
  color:rgba(246,238,226,.74);
}
.petStayPage .petAxes .ds-scenes{
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
}
.petStayPage .petAxes .ds-scenes__media{
  height:min(78svh,760px);
  aspect-ratio:auto;
  border-radius:8px;
  box-shadow:0 38px 90px rgba(0,0,0,.38);
}
.petStayPage .petAxes .ds-scene{
  padding:clamp(28px,4vw,48px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}
.petStayPage .petAxes .ds-scene[data-ds-active="1"]{
  background:rgba(255,255,255,.085);
  border-color:rgba(240,214,184,.32);
}
.petStayPage .petAxes .ds-scene h3{ color:#fff; }
.petStayPage .petAxes .ds-scene__facts,
.petStayPage .petAxes .ds-scene__facts div{
  border-color:rgba(255,255,255,.15);
}

.petStayPage .petList{
  background:
    linear-gradient(180deg,#efe6d5 0,#f7f2e8 18%,#f5eee3 100%);
}
.petStayPage .ds-filterbar{
  top:0;
  border-block:1px solid rgba(38,56,45,.2);
  background:rgba(255,250,240,.78);
  backdrop-filter:blur(22px);
}
.petStayPage .ds-chip{
  min-height:46px;
  border-radius:6px;
  background:rgba(255,255,255,.72);
  border-color:#c9b99f;
}
.petStayPage .ds-chip[aria-pressed="true"]{
  background:#18251d;
  color:#fffaf0;
}
.petStayPage .ds-cards{
  grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.4vw,34px);
  align-items:stretch;
}
.petStayPage .ds-card{
  grid-column:span 4;
  border-radius:8px;
  border-color:#d0bea3;
  background:#fffaf0;
  box-shadow:0 18px 44px rgba(40,31,20,.1);
}
.petStayPage .ds-card:hover{
  transform:translateY(-8px);
  border-color:#8a6142;
  box-shadow:0 38px 80px rgba(39,30,20,.22);
}
.petStayPage .petList .ds-card:nth-child(1),
.petStayPage .petList .ds-card:nth-child(2){
  grid-column:span 6;
}
.petStayPage .petList .ds-card:nth-child(3){
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
}
.petStayPage .petList .ds-card:nth-child(3) .ds-card__media{
  height:100%;
  min-height:520px;
}
.petStayPage .ds-card__media{
  aspect-ratio:1/1.08;
  background:#d9d0c1;
}
.petStayPage .ds-card__media img{
  filter:saturate(.94) contrast(1.03);
}
.petStayPage .petList .ds-card:nth-child(1) .ds-card__media,
.petStayPage .petList .ds-card:nth-child(2) .ds-card__media{
  aspect-ratio:16/11;
}
.petStayPage .ds-card__rank{
  border-radius:0 0 8px 0;
  background:#f0d6b8;
  color:#172016;
}
.petStayPage .ds-card__area{
  left:16px;
  bottom:16px;
  border-radius:999px;
  background:rgba(21,25,20,.76);
}
.petStayPage .ds-card__panel{
  background:linear-gradient(180deg,rgba(7,10,8,0),rgba(7,10,8,.92) 38%);
}
.petStayPage .ds-card__body{
  gap:13px;
  padding:clamp(22px,2.7vw,36px);
}
.petStayPage .ds-card__title{
  font-size:clamp(20px,2vw,30px);
  line-height:1.32;
}
.petStayPage .ds-card__fit{
  color:var(--lem-clay);
  font-weight:700;
  font-size:13.5px;
  line-height:1.75;
}
.petStayPage .ds-card__note{
  color:#49483e;
  font-size:13.5px;
}
.petStayPage .ds-card__facility{
  margin:2px 0 0;
  padding:14px 16px;
  border-left:3px solid var(--lem-sage);
  background:#f4eadb;
  color:#514d42;
}
.petStayPage .ds-card__checks{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.petStayPage .ds-card__checks li{
  position:relative;
  padding-left:18px;
  font-size:12.5px;
  line-height:1.65;
  color:#514f44;
}
.petStayPage .ds-card__checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:9px;
  height:1px;
  background:var(--ds-gold);
}
.petStayPage .ds-card__metrics{
  border-top-color:#d3c3ad;
}
.petStayPage .ds-card__price{
  font-size:clamp(26px,2.8vw,38px);
}
.petStayPage .ds-tag{
  border-radius:999px;
  background:#f7f0e5;
}

.petStayPage .petPlans{
  background:#fbf7ef;
}
.petStayPage .ds-tab{
  border-radius:6px 6px 0 0;
}
.petStayPage .ds-tab[aria-selected="true"]{
  background:#fffaf0;
}
.petStayPage .ds-plan__media{
  border-radius:8px;
}
.petStayPage .ds-plan__spot,
.petStayPage .ds-plan__day,
.petStayPage .ds-pack > div,
.petStayPage .ds-move__card{
  border-radius:8px;
}

.petStayPage .petCompare{
  background:#121812;
}
.petStayPage .petCompare .ds-h2,
.petStayPage .petCompare .ds-table__hotel b{
  color:#fff;
}
.petStayPage .petCompare .ds-lead{
  color:rgba(246,238,226,.74);
}
.petStayPage .petFaq{
  background:#f4ecdf;
}
.petStayPage .petFaq__shot img{
  border-radius:8px;
}
.petStayPage .ds-acc__trigger{
  font-size:clamp(18px,1.55vw,22px);
}

.petStayPage .ds-dock{
  background:rgba(18,24,18,.9);
}
.petStayPage .ds-dock__in{
  padding-block:14px;
}

@media (max-width:1100px){
  .petStayPage .ds-hero__inner{
    grid-template-columns:minmax(0,1fr);
  }
  .petStayPage .ds-hero__stats{
    grid-column:auto;
    grid-row:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .petStayPage .ds-bento{
    grid-template-columns:repeat(6,1fr);
  }
  .petStayPage .ds-bento__cell,
  .petStayPage .ds-bento__cell--wide,
  .petStayPage .ds-bento__cell--xl{
    grid-column:span 6;
    grid-row:auto;
    min-height:360px;
  }
  .petStayPage .ds-card,
  .petStayPage .petList .ds-card:nth-child(1),
  .petStayPage .petList .ds-card:nth-child(2){
    grid-column:span 6;
  }
  .petStayPage .petList .ds-card:nth-child(3){
    grid-column:span 12;
  }
}

@media (max-width:768px){
  .petStayPage .ds-wrap{
    width:calc(100vw - 40px);
    max-width:1320px;
  }
  .petStayPage .ds-section{
    padding-block:86px;
  }
  .petStayPage .ds-h2{
    font-size:clamp(34px,12vw,54px);
  }
  .petStayPage .ds-hero{
    min-height:100svh;
    padding-block:118px 78px;
  }
  .petStayPage .ds-hero__title{
    font-size:clamp(46px,13vw,64px);
    line-height:1.02;
  }
  .petStayPage .ds-hero__stats{
    grid-template-columns:minmax(0,1fr);
  }
  .petStayPage .petIntro__grid,
  .petStayPage .petAxes .ds-scenes{
    grid-template-columns:minmax(0,1fr);
  }
  .petStayPage .petIntro__body{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--ds-line);
    padding-top:24px;
  }
  .petStayPage .ds-filterbar{
    position:relative;
  }
  .petStayPage .ds-tablist,
  .petStayPage [data-ds-rail],
  .petStayPage .ds-compare__scroll{
    max-width:100%;
  }
  .petStayPage .ds-cards{
    grid-template-columns:minmax(0,1fr);
  }
  .petStayPage .ds-card,
  .petStayPage .petList .ds-card:nth-child(1),
  .petStayPage .petList .ds-card:nth-child(2),
  .petStayPage .petList .ds-card:nth-child(3){
    grid-column:1;
    display:flex;
  }
  .petStayPage .petList .ds-card:nth-child(3) .ds-card__media{
    min-height:0;
    height:auto;
  }
  .petStayPage .ds-card__media img{
    aspect-ratio:4/3;
  }
  .petStayPage .ds-card__panel{
    padding:16px 22px 0;
  }
  .petStayPage .ds-card__price{
    font-size:30px;
  }
}

@media (max-width:520px){
  .petStayPage .ds-hero__actions{
    width:100%;
  }
  .petStayPage .ds-btn{
    min-height:54px;
    padding-inline:18px;
    font-size:13px;
  }
  .petStayPage .ds-bento__cell,
  .petStayPage .ds-bento__cell--wide,
  .petStayPage .ds-bento__cell--xl{
    min-height:310px;
  }
  .petStayPage .ds-filterbar__row{
    gap:14px;
  }
}

/* 狭い画面でのヒーローの切り出し。
   横長の写真を縦長の枠に cover で当てると、犬の顔が枠の外へ出て
   逆光のボケだけが残る。顔が入る位置へ寄せる。 */
@media (max-width:820px){
  .petStayPage .ds-hero__media img{ object-position:34% 62%; }
}

/* ---------- 狭い画面のヒーロー ---------- */
/* 縦に長いままだと、横長の写真を cover で当てたときの拡大率が上がり、
   犬が枠の外へ出て逆光のボケだけが残る。高さを一画面ぶんに近づける。
   同時に、押せるものが画面の外に出ないようにする狙いもある。 */
@media (max-width:600px){
  body.petStayPage .ds-h2{ font-size:30px; line-height:1.5; letter-spacing:0; }
  body.petStayPage .ds-hero .ds-hero__stat b,
  body.petStayPage .ds-hero .ds-hero__stat b span{ font-size:22px; white-space:nowrap; }
  body.petStayPage .ds-hero .ds-hero__stat b small{ font-size:12px; }
  .petStayPage .ds-hero{ padding-block:clamp(72px,18vw,96px) clamp(40px,9vw,56px); }
  .petStayPage .ds-hero__media{ inset:-4% 0 -4%; }
  .petStayPage .ds-hero__title{ font-size:clamp(40px,10.6vw,50px); }
  .petStayPage .ds-hero__sub{ line-height:1.9; }
  .petStayPage .ds-hero__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .petStayPage .ds-hero__stat{ padding:14px 12px; }
}