@charset "UTF-8";
/*!
 * pet-stay-v2 — /guides/pet-stay/ 専用のレイアウト
 * ds-core-v1.css の部品を、このページの構成に合わせて組む。
 */

html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body.petStayPage{ margin:0; background:var(--ds-paper); overflow-x:clip; }

.ds-skip{
  position:absolute; left:12px; top:12px; z-index:100;
  padding:12px 18px; background:var(--ds-dark); font-size:13px;
  clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.ds-skip,.ds-skip:link,.ds-skip:visited{ color:#ffffff; }
.ds-skip:focus{ clip-path:none; width:auto; height:auto; }

/* ---------- ページ内ナビ（ヒーローに重ねる） ---------- */
.petNav{
  position:absolute; inset:0 0 auto 0; z-index:40; pointer-events:none;
  padding-block:20px;
  color:#fff;
}
.petNav__in{ pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.petNav__brand{
  font-family:var(--ds-serif); font-size:15px; letter-spacing:.16em; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.petNav__links{ display:flex; gap:26px; }
.petNav__links a{
  position:relative; font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.9);
  padding-bottom:4px; text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.petNav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left center; transition:transform var(--ds-hover) var(--ds-ease);
}
.petNav__links a:hover::after,.petNav__links a:focus-visible::after{ transform:scaleX(1); }
@media (max-width:900px){
  .petNav__links{ display:none; }
}

/* ---------- 導入 ---------- */
.petIntro__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,88px); align-items:start;
  margin-bottom:var(--ds-7);
}
.petIntro__body p + p{ margin-top:var(--ds-3); }
.petIntro__body p{ font-size:15px; line-height:2.15; color:var(--ds-ink-soft); }
@media (max-width:900px){ .petIntro__grid{ grid-template-columns:minmax(0,1fr); gap:var(--ds-4); } }

/* ---------- エリア（ベント） ---------- */
.petAreas{ background:var(--ds-surface); }

/* ---------- 選び方（sticky シーン） ---------- */
.petAxes{ background:var(--ds-paper); }

/* ---------- 一覧 ---------- */
.petList{ background:var(--ds-surface); padding-top:var(--ds-7); }
.petList .ds-filterbar{ margin-block:var(--ds-4) var(--ds-6); background:color-mix(in srgb, var(--ds-surface) 92%, transparent); }
.petList__empty{ text-align:center; padding-block:var(--ds-6); }
.petHero__decisionNote{ max-width:58em; margin-top:14px; font-size:12px; line-height:1.75; color:rgba(255,255,255,.82); }
.petList__promise{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px; padding:14px 16px; border-left:3px solid var(--ds-gold); background:rgba(255,255,255,.72); color:var(--ds-ink); font-size:12px; line-height:1.7; }
.petList__promise span{ font-weight:600; }

/* 先頭3枚を大きく見せる（編集のリズム） */
@media (min-width:981px){
  .petList .ds-cards{ grid-template-columns:repeat(6,1fr); }
  .petList .ds-card{ grid-column:span 2; }
  .petList .ds-card:nth-child(1){ grid-column:span 3; }
  .petList .ds-card:nth-child(2){ grid-column:span 3; }
  .petList .ds-card:nth-child(1) .ds-card__media,
  .petList .ds-card:nth-child(2) .ds-card__media{ aspect-ratio:16/10; }
  .petList .ds-card:nth-child(1) .ds-card__title,
  .petList .ds-card:nth-child(2) .ds-card__title{ font-size:22px; }
}

/* ---------- 比較 ---------- */
.petCompare .ds-compare__scroll{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); }
.petCompare .ds-table tbody td{ border-bottom-color:rgba(255,255,255,.12); color:var(--ds-on-dark); }
.petCompare .ds-table tbody tr:hover{ background:rgba(255,255,255,.06); }
.petCompare .ds-table thead th{ background:#0e120f; }
.petCompare .ds-table__hotel b{ color:#fff; }
.petCompare .ds-table small{ color:var(--ds-on-dark-soft); }
.petCompare .ds-link{ color:#e8c9a8; }
@media (max-width:768px){
  .petCompare .ds-table tbody tr{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
  .petCompare .ds-table tbody td::before{ color:var(--ds-on-dark-soft); }
}

/* ---------- FAQ ---------- */
.petFaq{ background:var(--ds-surface); }
.petFaq__grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(30px,5vw,88px); align-items:start; }
.petFaq__head{ position:sticky; top:12vh; }
.petFaq__shot{ margin:var(--ds-5) 0 0; }
.petFaq__shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.petFaq__shot figcaption{ margin-top:10px; font-size:11.5px; line-height:1.8; color:var(--ds-ink-soft); }
@media (max-width:900px){
  .petFaq__grid{ grid-template-columns:minmax(0,1fr); }
  .petFaq__head{ position:static; }
}

/* ---------- フッター ---------- */
.petFoot{ background:var(--ds-dark); color:var(--ds-on-dark-soft); padding-block:40px calc(40px + 68px); }
.petFoot__in{ display:grid; gap:16px; }
.petFoot p{ font-size:10.5px; line-height:1.75; max-width:68em; }
.petFoot__pr{ color:rgba(242,236,225,.56); }
.petFoot__nav{ display:flex; flex-wrap:wrap; gap:18px; margin-top:4px; }
.petFoot__nav a{ font-size:11px; color:var(--ds-on-dark); border-bottom:1px solid transparent; transition:border-color var(--ds-hover) var(--ds-ease); }
.petFoot__nav a:hover{ border-bottom-color:currentColor; }


/* ---------- 季節 ---------- */
.petSeason{ background:var(--ds-paper); }
.ds-cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ds-card--season .ds-card__media{ aspect-ratio:3/4; }
.ds-season__watch{ margin-top:auto; padding-top:12px; border-top:1px solid var(--ds-line); font-size:12px; line-height:1.8; color:var(--ds-ink-soft); }
.ds-season__watch span{ display:block; font-family:var(--ds-label); font-size:10px; letter-spacing:.1em; color:var(--ds-gold); margin-bottom:5px; }
@media (max-width:1100px){ .ds-cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .ds-cards--4{ grid-template-columns:minmax(0,1fr); } }

/* ---------- 当日の流れ / 失敗 ---------- */
.petDay__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(30px,5vw,86px); align-items:start; }
.ds-tl{ margin:var(--ds-6) 0 0; padding:0; list-style:none; counter-reset:tl; }
.ds-tl__item{ position:relative; padding:0 0 26px 46px; counter-increment:tl; }
.ds-tl__item::before{
  content:counter(tl,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:var(--ds-label); font-size:11px; letter-spacing:.08em; color:var(--ds-gold-on-dark);
}
.ds-tl__item::after{ content:""; position:absolute; left:11px; top:22px; bottom:0; width:1px; background:rgba(242,236,225,.2); }
.ds-tl__item:last-child::after{ display:none; }
.ds-tl__item b{ display:block; font-family:var(--ds-serif); font-size:17px; color:#fff; }
.ds-tl__item p{ margin-top:9px; font-size:13.5px; line-height:2; color:var(--ds-on-dark-soft); }
.petDay__miss{ position:sticky; top:12vh; padding:clamp(24px,3vw,38px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); }
.petDay__miss .ds-h3{ font-size:21px; color:#fff; }
.ds-miss{ margin-top:var(--ds-4); display:grid; gap:20px; }
.ds-miss__item b{ display:block; font-family:var(--ds-serif); font-size:15px; color:#fff; line-height:1.6; }
.ds-miss__item p{ margin-top:7px; font-size:12.5px; line-height:1.95; color:var(--ds-on-dark-soft); }
@media (max-width:1000px){
  .petDay__grid{ grid-template-columns:minmax(0,1fr); }
  .petDay__miss{ position:static; }
}
.ds-card__facility{ font-size:11.5px; line-height:1.85; color:var(--ds-ink-soft); }
.ds-card__facility span{ display:block; font-family:var(--ds-label); font-size:10px; letter-spacing:.1em; color:var(--ds-gold); margin-bottom:4px; }
.ds-table__price{ white-space:nowrap; }
.ds-table__price small{ font-family:var(--ds-sans); font-size:11px; margin-left:2px; }
.ds-table__rating{ white-space:nowrap; font-family:var(--ds-label); font-size:13px; }
.ds-table__rating small{ font-size:11px; opacity:.75; }


/* ---------- 関連の読みもの ---------- */
.petRelated{ background:var(--ds-paper); }
.petRelated__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.petRelated__card .ds-card__media{ aspect-ratio:16/10; }
.petRelated__card .ds-card__body{ gap:8px; }
@media (max-width:900px){ .petRelated__grid{ grid-template-columns:minmax(0,1fr); } }
.photoJourneyPromo{ display:contents; }