@charset "UTF-8";
/*!
 * ds-core-v1 — 3サイト共通デザインシステム
 * LIFE EDIT MARKET / なわて日和 / ひがしおおさか日和
 *
 * 使い方: このファイルを読み込み、サイト側で --ds-* トークンを上書きする。
 * ds-motion-v1.js と対で動く。JSが無くても内容は必ず見える。
 */

/* ============================================================
   0. トークン（サイト側で上書きする前提の既定値）
   ============================================================ */
:root{
  /* 色 */
  --ds-ink:#171813;
  --ds-ink-soft:#4e493f;
  --ds-paper:#f6f2ea;
  --ds-surface:#fffdf8;
  --ds-line:#ddd3c3;
  --ds-accent:#26382d;
  --ds-accent-ink:#f6f2ea;
  --ds-gold:#9a6e51;
  --ds-dark:#141613;
  --ds-on-dark:#f3ece0;
  --ds-on-dark-soft:rgba(243,236,224,.72);

  /* 書体 */
  --ds-serif:"Shippori Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --ds-sans:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --ds-label:"Jost","Zen Kaku Gothic New",sans-serif;

  /* 余白（大きく取る。ここが「制作会社っぽさ」の芯） */
  --ds-1:8px;   --ds-2:16px;  --ds-3:24px;  --ds-4:36px;
  --ds-5:56px;  --ds-6:80px;  --ds-7:120px; --ds-8:168px; --ds-9:220px;
  --ds-gutter:clamp(20px,5vw,64px);
  --ds-max:1240px;
  --ds-max-narrow:760px;

  /* 文字サイズ：極端なコントラストを付ける */
  --ds-display:clamp(40px,7.4vw,104px);
  --ds-h2:clamp(30px,4.4vw,62px);
  --ds-h3:clamp(20px,2.1vw,30px);
  --ds-lead:clamp(15px,1.15vw,18px);
  --ds-body:15.5px;
  --ds-small:13px;
  --ds-label-size:11px;

  /* モーション */
  --ds-ease:cubic-bezier(.22,.61,.36,1);
  --ds-dur:520ms;
  --ds-dur-slow:1200ms;
  --ds-stagger:70ms;
  --ds-hover:300ms;
  --ds-hover-img:600ms;

  /* 影 */
  --ds-shadow-1:0 1px 2px rgba(20,22,19,.05), 0 12px 28px -14px rgba(20,22,19,.14);
  --ds-shadow-2:0 2px 8px rgba(20,22,19,.07), 0 34px 70px -22px rgba(20,22,19,.28);
}

/* ============================================================
   1. 土台
   ============================================================ */
.ds{ color:var(--ds-ink); background:var(--ds-paper); font-family:var(--ds-sans); font-size:var(--ds-body); line-height:1.95; }
.ds *,.ds *::before,.ds *::after{ box-sizing:border-box; }
.ds img{ display:block; max-width:100%; }
.ds :where(a){ color:inherit; text-decoration:none; }
.ds h1,.ds h2,.ds h3,.ds h4{ font-family:var(--ds-serif); font-weight:600; font-feature-settings:"palt" 1; margin:0; }
.ds p{ margin:0; }
.ds :where(a,button):focus-visible{ outline:2px solid var(--ds-gold); outline-offset:3px; border-radius:2px; }

.ds-wrap{ width:min(var(--ds-max),100% - var(--ds-gutter)*2); margin-inline:auto; }
.ds-wrap--narrow{ width:min(var(--ds-max-narrow),100% - var(--ds-gutter)*2); margin-inline:auto; }
.ds-section{ padding-block:var(--ds-8); }
.ds-section--tight{ padding-block:var(--ds-7); }
.ds-section--dark{ background:var(--ds-dark); color:var(--ds-on-dark); }
.ds-section--dark h2,.ds-section--dark h3{ color:var(--ds-on-dark); }

/* 見出しの組み */
.ds-kicker{
  display:block; font-family:var(--ds-label); font-size:var(--ds-label-size);
  letter-spacing:.14em; color:var(--ds-ink-soft); margin-bottom:var(--ds-2);
}
.ds-section--dark .ds-kicker{ color:var(--ds-on-dark-soft); }
.ds-h2{ font-size:var(--ds-h2); line-height:1.28; letter-spacing:.02em; }
.ds-lead{ margin-top:var(--ds-3); max-width:38em; font-size:var(--ds-lead); line-height:2.05; color:var(--ds-ink-soft); }
.ds-section--dark .ds-lead{ color:var(--ds-on-dark-soft); }
.ds-head{ max-width:44em; margin-bottom:var(--ds-6); }

/* ============================================================
   2. モーションの土台（JSが起動して初めて隠す）
   ============================================================ */
.ds-js [data-ds-reveal]{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
  will-change:opacity,transform;
}
.ds-js [data-ds-reveal="mask"]{
  opacity:1; transform:none;
  clip-path:inset(102% 0 0 0);
  transition:clip-path 900ms var(--ds-ease);
}
.ds-js [data-ds-reveal][data-ds-in]{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

.ds-js [data-ds-stagger] > *{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.ds-js [data-ds-stagger][data-ds-in] > *{ opacity:1; transform:none; }

/* 見出しの行分割 */
.ds-line{ display:block; overflow:hidden; }
.ds-line__i{
  display:block; transform:translate3d(0,105%,0); opacity:0;
  transition:transform 820ms var(--ds-ease), opacity 620ms var(--ds-ease);
}
[data-ds-in] .ds-line__i,
[data-ds-hero-state="run"] .ds-line__i,
[data-ds-hero-state="done"] .ds-line__i{ transform:none; opacity:1; }

/* ============================================================
   3. シネマティックヒーロー（フルブリード）
   ============================================================ */
.ds-hero{
  position:relative; isolation:isolate;
  min-height:min(94svh,900px);
  display:grid; align-items:end;
  padding-block:var(--ds-7) var(--ds-6);
  overflow:clip;
  background:var(--ds-dark);
}
.ds-hero__media{ position:absolute; inset:-6% 0 -6% 0; z-index:0; }
.ds-hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  filter:saturate(.92) contrast(1.02);
}
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__media img,
.ds-js .ds-hero[data-ds-hero-state="done"] .ds-hero__media img{
  transform:scale(1);
  transition:transform 1400ms var(--ds-ease);
}
/* スクリム：文字を必ず読ませる。上下2枚重ね */
.ds-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,12,10,.62) 0%, rgba(10,12,10,.16) 34%, rgba(10,12,10,.72) 78%, rgba(10,12,10,.92) 100%),
    linear-gradient(90deg, rgba(10,12,10,.74) 0%, rgba(10,12,10,.36) 48%, rgba(10,12,10,.10) 100%);
}
/* ロード時に上へ抜ける幕 */
.ds-hero__curtain{
  position:absolute; inset:0; z-index:3; background:var(--ds-dark); pointer-events:none;
  transform:translate3d(0,0,0);
}
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__curtain{
  transform:translate3d(0,-101%,0);
  transition:transform 900ms var(--ds-ease);
}
.ds-js .ds-hero[data-ds-hero-state="done"] .ds-hero__curtain,
.ds-reduce .ds-hero__curtain{ display:none; }
.ds-hero__inner{ position:relative; z-index:2; width:min(var(--ds-max),100% - var(--ds-gutter)*2); margin-inline:auto; color:var(--ds-on-dark); }

.ds-hero__eyebrow{
  font-family:var(--ds-label); font-size:11px; letter-spacing:.16em;
  color:var(--ds-on-dark); opacity:.86; margin-bottom:var(--ds-3);
}
.ds-hero__title{
  font-size:var(--ds-display); line-height:1.14; letter-spacing:.015em;
  max-width:16em; color:#fff; text-wrap:pretty;
  text-shadow:0 2px 26px rgba(0,0,0,.34);
}
.ds-hero__sub{
  margin-top:var(--ds-4); max-width:34em; font-size:var(--ds-lead); line-height:2.0;
  color:rgba(255,255,255,.9);
}
.ds-hero__stats{ margin-top:var(--ds-5); display:flex; flex-wrap:wrap; gap:var(--ds-5) var(--ds-6); }
.ds-hero__stat b{ display:block; font-family:var(--ds-serif); font-size:clamp(30px,3.6vw,46px); line-height:1; color:#fff; font-weight:600; }
.ds-hero__stat span{ display:block; margin-top:10px; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.72); }
.ds-hero__actions{ margin-top:var(--ds-5); display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ヒーロー内要素の登場順（幕→写真→見出し→補助→統計→CTA） */
.ds-js .ds-hero__eyebrow,
.ds-js .ds-hero__sub,
.ds-js .ds-hero__stats,
.ds-js .ds-hero__actions,
.ds-js .ds-hero__cue{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity 620ms var(--ds-ease), transform 620ms var(--ds-ease);
}
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__eyebrow{ opacity:.86; transform:none; transition-delay:640ms; }
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__title .ds-line__i{ transition-delay:calc(760ms + var(--ds-line-i,0) * 90ms); }
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__sub{ opacity:1; transform:none; transition-delay:1180ms; }
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__stats{ opacity:1; transform:none; transition-delay:1320ms; }
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__actions{ opacity:1; transform:none; transition-delay:1520ms; }
.ds-js .ds-hero[data-ds-hero-state="run"] .ds-hero__cue{ opacity:1; transform:none; transition-delay:1700ms; }

.ds-hero__cue{
  position:absolute; left:50%; bottom:22px; z-index:2; translate:-50% 0;
  font-family:var(--ds-label); font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.7);
  display:grid; justify-items:center; gap:8px;
}
.ds-hero__cue::after{ content:""; width:1px; height:40px; background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0)); }
.ds-reduce .ds-hero__cue::after{ animation:none; }
@keyframes ds-cue{ 0%{transform:scaleY(.2);transform-origin:top} 60%{transform:scaleY(1);transform-origin:top} 61%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.ds-js:not(.ds-reduce) .ds-hero__cue::after{ animation:ds-cue 2.4s var(--ds-ease) infinite; }

.ds-hero__credit{
  position:absolute; right:var(--ds-gutter); bottom:18px; z-index:2;
  font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,.62);
  max-width:min(46vw,420px); text-align:right; line-height:1.6;
}

/* ============================================================
   4. ボタン
   ============================================================ */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 30px; border-radius:2px;
  font-family:var(--ds-sans); font-size:14px; font-weight:500; letter-spacing:.06em;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--ds-hover) var(--ds-ease), color var(--ds-hover) var(--ds-ease),
             border-color var(--ds-hover) var(--ds-ease), transform var(--ds-hover) var(--ds-ease),
             box-shadow var(--ds-hover) var(--ds-ease);
}
.ds-btn--primary{ background:var(--ds-gold); color:#fff; box-shadow:var(--ds-shadow-1); }
.ds-btn--primary:hover,.ds-btn--primary:focus-visible{ transform:translateY(-3px); box-shadow:var(--ds-shadow-2); }
.ds-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.ds-btn--ghost:hover,.ds-btn--ghost:focus-visible{ border-color:#fff; transform:translateY(-3px); }
.ds-btn--dark{ background:var(--ds-accent); color:var(--ds-accent-ink); box-shadow:var(--ds-shadow-1); }
.ds-btn--dark:hover,.ds-btn--dark:focus-visible{ transform:translateY(-3px); box-shadow:var(--ds-shadow-2); }
.ds-btn::after{ content:"→"; font-size:13px; transition:transform var(--ds-hover) var(--ds-ease); }
.ds-btn:hover::after{ transform:translateX(4px); }

/* 線のリンク（副CTA） */
.ds-link{
  position:relative; display:inline-block; padding-bottom:4px;
  font-size:13px; letter-spacing:.04em; color:var(--ds-accent);
}
.ds-link::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);
}
.ds-link:hover::after,.ds-link:focus-visible::after{ transform:scaleX(1); }
.ds-section--dark .ds-link{ color:var(--ds-on-dark); }

/* ============================================================
   5. ベントグリッド（非対称）
   ============================================================ */
.ds-bento{
  display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(200px,auto);
}
.ds-bento__cell{
  position:relative; overflow:hidden; isolation:isolate;
  grid-column:span 2; min-height:260px;
  background:var(--ds-dark); color:#fff; display:flex; align-items:flex-end;
  transition:transform var(--ds-hover) var(--ds-ease), box-shadow var(--ds-hover) var(--ds-ease);
}
.ds-bento__cell--xl{ grid-column:span 4; grid-row:span 2; min-height:540px; }
.ds-bento__cell--wide{ grid-column:span 3; }
.ds-bento__cell:hover{ transform:translateY(-3px); box-shadow:var(--ds-shadow-2); }
.ds-bento__cell img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform var(--ds-hover-img) var(--ds-ease);
}
.ds-bento__cell:hover img{ transform:scale(1.03); }
.ds-bento__cell::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,8,0) 34%,rgba(8,10,8,.82) 100%);
}
.ds-bento__body{ padding:clamp(20px,2.4vw,34px); }
.ds-bento__label{ font-family:var(--ds-label); font-size:10px; letter-spacing:.14em; color:rgba(255,255,255,.78); }
.ds-bento__cell h3{ margin-top:10px; font-size:clamp(19px,2vw,32px); line-height:1.4; color:#fff; }
.ds-bento__cell p{ margin-top:10px; font-size:12.5px; line-height:1.9; color:rgba(255,255,255,.8); max-width:30em; }
.ds-bento__cell--xl h3{ font-size:clamp(26px,3.2vw,44px); }

/* ============================================================
   6. 条件チップ
   ============================================================ */
.ds-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.ds-chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 17px; border-radius:999px;
  border:1px solid var(--ds-line); background:var(--ds-surface); color:var(--ds-ink);
  font-size:13px; letter-spacing:.02em; cursor:pointer; white-space:nowrap;
  transition:background var(--ds-hover) var(--ds-ease), color var(--ds-hover) var(--ds-ease),
             border-color var(--ds-hover) var(--ds-ease), transform var(--ds-hover) var(--ds-ease);
}
.ds-chip:hover{ transform:translateY(-2px); border-color:var(--ds-accent); }
.ds-chip[aria-pressed="true"]{ background:var(--ds-accent); border-color:var(--ds-accent); color:var(--ds-accent-ink); }
.ds-chip__n{ font-family:var(--ds-label); font-size:11px; opacity:.7; }
.ds-chip[aria-pressed="true"] .ds-chip__n{ opacity:.85; }
.ds-filterbar{
  position:sticky; top:0; z-index:30;
  padding-block:var(--ds-3);
  background:color-mix(in srgb, var(--ds-paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ds-line);
}
.ds-filterbar__row{ display:flex; align-items:center; gap:var(--ds-3); flex-wrap:wrap; }
.ds-filterbar__count{ font-size:13px; color:var(--ds-ink-soft); white-space:nowrap; }
.ds-filterbar__count b{ font-family:var(--ds-serif); font-size:24px; color:var(--ds-ink); margin-inline:3px; }

/* ============================================================
   7. 写真主導カード
   ============================================================ */
.ds-cards{ display:grid; gap:clamp(16px,2vw,28px); grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.ds-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ds-surface); border:1px solid var(--ds-line);
  transition:transform var(--ds-hover) var(--ds-ease), box-shadow var(--ds-hover) var(--ds-ease), border-color var(--ds-hover) var(--ds-ease);
}
.ds-card:hover{ transform:translateY(-3px); box-shadow:var(--ds-shadow-2); border-color:var(--ds-accent); }
.ds-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#e8e2d6; }
.ds-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--ds-hover-img) var(--ds-ease); }
.ds-card:hover .ds-card__media img{ transform:scale(1.03); }
.ds-card__rank{
  position:absolute; left:0; top:0; z-index:2;
  min-width:52px; padding:8px 12px; background:var(--ds-gold); color:#fff;
  font-family:var(--ds-serif); font-size:20px; line-height:1;
}
.ds-card__area{
  position:absolute; left:14px; bottom:14px; z-index:2;
  padding:6px 12px; background:rgba(10,12,10,.88); color:#fff;
  font-size:11px; letter-spacing:.04em; backdrop-filter:blur(4px);
}
/* ホバーで下から上がる情報パネル */
.ds-card__panel{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:16px 16px 18px;
  background:linear-gradient(180deg,rgba(8,10,8,0),rgba(8,10,8,.9) 42%);
  color:#fff; transform:translate3d(0,100%,0); opacity:0;
  transition:transform 420ms var(--ds-ease), opacity 420ms var(--ds-ease);
}
.ds-card:hover .ds-card__panel,.ds-card:focus-within .ds-card__panel{ transform:none; opacity:1; }
.ds-card__panel dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:11.5px; line-height:1.7; }
.ds-card__panel dt{ color:rgba(255,255,255,.66); }
.ds-card__panel dd{ margin:0; color:#fff; }
.ds-card__body{ display:flex; flex-direction:column; gap:10px; padding:20px 20px 22px; flex:1; }
.ds-card__title{ font-size:17px; line-height:1.55; letter-spacing:.02em; }
.ds-card__note{ font-size:12.5px; line-height:1.85; color:var(--ds-ink-soft); }
.ds-card__metrics{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin-top:auto; padding-top:8px; border-top:1px solid var(--ds-line); }
.ds-card__price{ font-family:var(--ds-serif); font-size:23px; line-height:1; }
.ds-card__price small{ font-family:var(--ds-sans); font-size:11px; color:var(--ds-ink-soft); margin-left:3px; }
.ds-card__rating{ font-family:var(--ds-label); font-size:12px; color:var(--ds-ink-soft); }
.ds-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ds-tag{ font-size:10.5px; letter-spacing:.03em; padding:4px 9px; border:1px solid var(--ds-line); color:var(--ds-ink-soft); background:var(--ds-paper); }
.ds-card__cta{ margin-top:4px; }
.ds-card[hidden]{ display:none !important; }

/* ============================================================
   8. sticky シーン（左に写真固定・右がスクロール）
   ============================================================ */
.ds-scenes{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:start; }
.ds-scenes__media{ position:sticky; top:12vh; aspect-ratio:4/5; overflow:hidden; background:var(--ds-dark); }
.ds-scenes__shot{ position:absolute; inset:0; opacity:0; transition:opacity 700ms var(--ds-ease), transform 1200ms var(--ds-ease); transform:scale(1.04); }
.ds-scenes__shot[data-ds-active="1"]{ opacity:1; transform:scale(1); }
.ds-scenes__shot img{ width:100%; height:100%; object-fit:cover; }
.ds-scenes__shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 18px;
  background:linear-gradient(rgba(8,10,8,0),rgba(8,10,8,.86));
  color:rgba(255,255,255,.86); font-size:11px; line-height:1.7;
}
.ds-scenes__steps{ display:grid; gap:var(--ds-8); padding-block:var(--ds-6) var(--ds-8); }
.ds-scene{ opacity:.62; transition:opacity 520ms var(--ds-ease); }
.ds-scene[data-ds-active="1"]{ opacity:1; }
.ds-scene__n{ font-family:var(--ds-label); font-size:11px; letter-spacing:.18em; color:var(--ds-gold); }
.ds-scene h3{ margin-top:14px; font-size:clamp(24px,2.8vw,38px); line-height:1.4; }
.ds-scene p{ margin-top:16px; font-size:14.5px; line-height:2.05; color:var(--ds-ink-soft); }
.ds-scene__facts{ margin-top:22px; border-top:1px solid var(--ds-line); }
.ds-scene__facts div{ display:grid; grid-template-columns:8.5em 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--ds-line); font-size:13px; }
.ds-scene__facts dt{ color:var(--ds-gold); font-size:11.5px; letter-spacing:.04em; }
.ds-scene__facts dd{ margin:0; color:var(--ds-ink-soft); line-height:1.8; }

/* ============================================================
   9. 比較UI（PCは表・スマホはカード）
   ============================================================ */
.ds-compare{ position:relative; }
.ds-compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.ds-table{ width:100%; min-width:900px; border-collapse:collapse; font-size:13px; }
.ds-table thead th{
  position:sticky; top:0; z-index:5;
  background:var(--ds-dark); color:var(--ds-on-dark);
  font-family:var(--ds-label); font-weight:500; font-size:11.5px; letter-spacing:.06em;
  text-align:left; padding:14px 16px; white-space:nowrap;
}
.ds-table th[data-ds-sort]{ cursor:pointer; user-select:none; }
.ds-table th[data-ds-sort]::after{ content:"↕"; margin-left:7px; opacity:.5; font-size:10px; }
.ds-table th[data-ds-dir="asc"]::after{ content:"↑"; opacity:1; }
.ds-table th[data-ds-dir="desc"]::after{ content:"↓"; opacity:1; }
.ds-table tbody td{ padding:14px 16px; border-bottom:1px solid var(--ds-line); vertical-align:middle; }
.ds-table tbody tr{ transition:background var(--ds-hover) var(--ds-ease); }
.ds-table tbody tr:hover{ background:color-mix(in srgb, var(--ds-gold) 8%, transparent); }
.ds-table__hotel{ display:flex; align-items:center; gap:13px; min-width:230px; }
.ds-table__hotel img{ width:62px; height:46px; object-fit:cover; flex:0 0 auto; }
.ds-table__hotel b{ font-family:var(--ds-serif); font-weight:600; font-size:13.5px; line-height:1.5; }
.ds-table__price{ font-family:var(--ds-serif); font-size:17px; white-space:nowrap; }
.ds-table__cta{ white-space:nowrap; }

/* ============================================================
   10. FAQ アコーディオン
   ============================================================ */
.ds-acc{ border-top:1px solid var(--ds-line); }
.ds-acc__item{ border-bottom:1px solid var(--ds-line); }
.ds-acc__trigger{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:24px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--ds-serif); font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:var(--ds-ink);
}
.ds-acc__trigger::after{
  content:""; flex:0 0 auto; width:15px; height:15px; margin-top:8px;
  background:
    linear-gradient(var(--ds-gold),var(--ds-gold)) center/100% 1px no-repeat,
    linear-gradient(var(--ds-gold),var(--ds-gold)) center/1px 100% no-repeat;
  transition:transform 420ms var(--ds-ease);
}
.ds-acc__item[data-ds-open="1"] .ds-acc__trigger::after{ transform:rotate(90deg); background-size:100% 1px,0 0; }
.ds-acc__panel{ overflow:hidden; height:0; transition:height 420ms var(--ds-ease); }
.ds-acc__panel > div{ padding-bottom:26px; max-width:52em; font-size:14px; line-height:2.05; color:var(--ds-ink-soft); }

/* ============================================================
   11. フローティングCTA
   ============================================================ */
.ds-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  transform:translate3d(0,110%,0); opacity:0; pointer-events:none;
  transition:transform 520ms var(--ds-ease), opacity 320ms var(--ds-ease);
  background:color-mix(in srgb, var(--ds-dark) 94%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.14);
  color:var(--ds-on-dark);
}
.ds-dock[data-ds-dock-on="1"]{ transform:none; opacity:1; pointer-events:auto; }
.ds-dock__in{
  width:min(var(--ds-max),100% - var(--ds-gutter)*2); margin-inline:auto;
  padding:13px 0; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ds-dock__txt{ font-size:12.5px; line-height:1.6; color:var(--ds-on-dark-soft); }
.ds-dock__txt b{ color:#fff; font-family:var(--ds-serif); font-size:17px; margin-inline:3px; }

/* ============================================================
   12. 横スクロール領域（端フェード＋ヒント）
   ============================================================ */
[data-ds-rail]{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; }
[data-ds-rail]::-webkit-scrollbar{ display:none; }
[data-ds-rail] > *{ scroll-snap-align:start; }
.ds-railwrap{ position:relative; }
.ds-railwrap::before,.ds-railwrap::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; pointer-events:none; z-index:4;
  opacity:0; transition:opacity var(--ds-hover) var(--ds-ease);
}
.ds-railwrap::before{ left:0; background:linear-gradient(90deg,var(--ds-paper),transparent); }
.ds-railwrap::after{ right:0; background:linear-gradient(270deg,var(--ds-paper),transparent); }
.ds-railwrap:has([data-ds-rail-start="0"])::before{ opacity:1; }
.ds-railwrap:has([data-ds-rail-scrollable="1"][data-ds-rail-end="0"])::after{ opacity:1; }
.ds-railhint{
  position:absolute; right:12px; top:-34px; z-index:5;
  font-family:var(--ds-label); font-size:10px; letter-spacing:.12em; color:var(--ds-ink-soft);
  display:none;
}
.ds-railwrap:has([data-ds-rail-scrollable="1"]) .ds-railhint{ display:block; }

/* ============================================================
   13. 数字の帯・引用・出典
   ============================================================ */
.ds-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--ds-line); border:1px solid var(--ds-line); }
.ds-stats > div{ background:var(--ds-surface); padding:clamp(22px,3vw,38px); }
.ds-stats b{ display:block; font-family:var(--ds-serif); font-size:clamp(32px,3.6vw,52px); line-height:1; }
.ds-stats span{ display:block; margin-top:12px; font-size:12px; color:var(--ds-ink-soft); line-height:1.7; }
.ds-source{ margin-top:var(--ds-4); font-size:11.5px; line-height:1.9; color:var(--ds-ink-soft); }
.ds-section--dark .ds-source{ color:var(--ds-on-dark-soft); }

/* 全幅の写真帯（パララックス） */
.ds-band{ position:relative; min-height:min(72svh,660px); display:grid; place-items:center; overflow:clip; background:var(--ds-dark); isolation:isolate; }
.ds-band__media{ position:absolute; inset:-8% 0; z-index:-2; }
.ds-band__media img{ width:100%; height:100%; object-fit:cover; }
.ds-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,10,8,.5),rgba(8,10,8,.78)); }
.ds-band__in{ position:relative; text-align:center; color:#fff; width:min(760px,100% - var(--ds-gutter)*2); }
.ds-band__in h2{ font-size:clamp(28px,4vw,54px); line-height:1.32; color:#fff; }
.ds-band__in p{ margin-top:var(--ds-3); font-size:15px; line-height:2; color:rgba(255,255,255,.84); }
.ds-band__in .ds-btn{ margin-top:var(--ds-5); }

/* ============================================================
   14. レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .ds-bento{ grid-template-columns:repeat(4,1fr); }
  .ds-bento__cell--xl{ grid-column:span 4; grid-row:auto; min-height:400px; }
  .ds-bento__cell--wide{ grid-column:span 4; }
  .ds-bento__cell{ grid-column:span 2; }
  .ds-scenes{ grid-template-columns:minmax(0,1fr); }
  .ds-scenes__media{ position:relative; top:auto; aspect-ratio:16/10; }
  .ds-scenes__steps{ gap:var(--ds-6); padding-block:var(--ds-5) 0; }
  .ds-scene{ opacity:1; }
}
@media (max-width:768px){
  :root{ --ds-8:112px; --ds-7:80px; --ds-6:56px; }
  .ds-hero{ min-height:min(88svh,760px); }
  .ds-hero__stats{ gap:var(--ds-4) var(--ds-5); }
  .ds-hero__actions{ flex-direction:column; align-items:stretch; }
  .ds-hero__actions .ds-btn{ width:100%; }
  .ds-bento{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .ds-bento__cell,.ds-bento__cell--wide,.ds-bento__cell--xl{ grid-column:span 2; min-height:260px; }
  .ds-cards{ grid-template-columns:minmax(0,1fr); }
  .ds-card__media{ aspect-ratio:auto; }
  .ds-card__media img{ aspect-ratio:4/5; height:auto; }
  .ds-card__panel{ position:static; transform:none; opacity:1; background:none; color:inherit; padding:16px 20px 0; }
  .ds-card__panel dt{ color:var(--ds-ink-soft); }
  .ds-card__panel dd{ color:var(--ds-ink); }
  .ds-dock__in{ padding:11px 0; gap:11px; }
  .ds-dock__txt{ font-size:11.5px; }
  .ds-dock .ds-btn{ min-height:48px; padding:0 18px; font-size:13px; }
  .ds-hero__credit{ position:static; margin-top:var(--ds-4); text-align:left; max-width:none; }
  .ds-hero__cue{ display:none; }
}
@media (max-width:520px){
  .ds-bento{ grid-template-columns:minmax(0,1fr); }
  .ds-bento__cell,.ds-bento__cell--wide,.ds-bento__cell--xl{ grid-column:span 1; }
}

/* スマホは表をカードに組み替える */
@media (max-width:768px){
  .ds-table{ min-width:0; display:block; }
  .ds-table thead{ display:none; }
  .ds-table tbody,.ds-table tr,.ds-table td{ display:block; width:100%; }
  .ds-table tbody tr{
    margin-bottom:14px; border:1px solid var(--ds-line); background:var(--ds-surface);
    padding:14px 16px;
  }
  .ds-table tbody td{ border:0; padding:7px 0; display:grid; grid-template-columns:7.5em 1fr; gap:12px; align-items:center; }
  .ds-table tbody td::before{ content:attr(data-label); font-size:11px; color:var(--ds-ink-soft); letter-spacing:.04em; }
  .ds-table tbody td:first-child{ grid-template-columns:minmax(0,1fr); }
  .ds-table tbody td:first-child::before{ display:none; }
  .ds-compare__scroll{ overflow-x:visible; }
}

/* ============================================================
   15. 動きを減らす設定
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ds *,.ds *::before,.ds *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .ds-js [data-ds-reveal],.ds-js [data-ds-stagger] > *{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .ds-line__i{ transform:none !important; opacity:1 !important; }
  .ds-hero__media img{ transform:none !important; }
  .ds-hero__curtain{ display:none !important; }
  .ds-js .ds-hero__eyebrow,.ds-js .ds-hero__sub,.ds-js .ds-hero__stats,.ds-js .ds-hero__actions,.ds-js .ds-hero__cue{ opacity:1 !important; transform:none !important; }
  .ds-scene{ opacity:1 !important; }
  .ds-card__panel{ transform:none !important; opacity:1 !important; }
}


/* ============================================================
   16. タブ
   ============================================================ */
.ds-tablist{
  position:relative; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--ds-line); margin-bottom:var(--ds-6);
}
.ds-tablist::-webkit-scrollbar{ display:none; }
.ds-tab{
  flex:0 0 auto; padding:15px 20px; background:none; border:0; cursor:pointer;
  font-family:var(--ds-sans); font-size:14px; letter-spacing:.03em; color:var(--ds-ink-soft);
  white-space:nowrap; transition:color var(--ds-hover) var(--ds-ease);
}
.ds-tab[aria-selected="true"]{ color:var(--ds-ink); }
.ds-tab:hover{ color:var(--ds-ink); }
.ds-tab__ind{
  position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--ds-gold);
  transition:transform 420ms var(--ds-ease), width 420ms var(--ds-ease);
}
.ds-reduce .ds-tab__ind{ transition:none; }

/* 旅程 */
.ds-plan{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,64px); align-items:start; }
.ds-plan__media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.ds-plan__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--ds-hover-img) var(--ds-ease); }
.ds-plan__media:hover img{ transform:scale(1.03); }
.ds-plan__intro{ font-size:15px; line-height:2.15; color:var(--ds-ink-soft); }
.ds-plan__spots{ margin-top:var(--ds-5); display:grid; gap:1px; background:var(--ds-line); border:1px solid var(--ds-line); }
.ds-plan__spot{ background:var(--ds-surface); padding:20px 22px; }
.ds-plan__spot b{ font-family:var(--ds-serif); font-size:16px; }
.ds-plan__spot em{ font-style:normal; margin-left:10px; font-family:var(--ds-label); font-size:10.5px; letter-spacing:.1em; color:var(--ds-gold); }
.ds-plan__spot p{ margin-top:8px; font-size:12.5px; line-height:1.9; color:var(--ds-ink-soft); }
.ds-plan__days{ margin-top:var(--ds-5); display:grid; gap:14px; }
.ds-plan__day{ display:grid; grid-template-columns:6.5em minmax(0,1fr); gap:18px; padding:18px 0; border-top:1px solid var(--ds-line); }
.ds-plan__day b{ font-family:var(--ds-serif); font-size:15px; color:var(--ds-gold); }
.ds-plan__day p{ font-size:13.5px; line-height:2; color:var(--ds-ink-soft); }
@media (max-width:900px){
  .ds-plan{ grid-template-columns:minmax(0,1fr); }
  .ds-plan__media{ aspect-ratio:16/10; }
  .ds-plan__day{ grid-template-columns:minmax(0,1fr); gap:6px; }
}

/* 持ち物 */
.ds-pack{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ds-line); border:1px solid var(--ds-line); }
.ds-pack > div{ background:var(--ds-surface); padding:clamp(22px,3vw,34px); }
.ds-pack h3{ font-size:17px; margin-bottom:16px; }
.ds-pack ul{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.ds-pack li{ position:relative; padding-left:20px; font-size:13px; line-height:1.9; color:var(--ds-ink-soft); }
.ds-pack li::before{ content:""; position:absolute; left:0; top:.85em; width:9px; height:1px; background:var(--ds-gold); }
@media (max-width:900px){ .ds-pack{ grid-template-columns:minmax(0,1fr); } }

/* 移動手段 */
.ds-move{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.ds-move__card{ background:var(--ds-surface); border:1px solid var(--ds-line); overflow:hidden; display:flex; flex-direction:column; }
.ds-move__card figure{ margin:0; aspect-ratio:16/10; overflow:hidden; }
.ds-move__card img{ width:100%; height:100%; object-fit:cover; transition:transform var(--ds-hover-img) var(--ds-ease); }
.ds-move__card:hover img{ transform:scale(1.03); }
.ds-move__body{ padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:16px; }
.ds-move__body h3{ font-size:21px; }
.ds-move__body p{ font-size:13.5px; line-height:2.05; color:var(--ds-ink-soft); }
.ds-move__facts{ margin:0; border-top:1px solid var(--ds-line); }
.ds-move__facts div{ display:grid; grid-template-columns:7em minmax(0,1fr); gap:14px; padding:11px 0; border-bottom:1px solid var(--ds-line); }
.ds-move__facts dt{ font-size:11px; color:var(--ds-gold); letter-spacing:.04em; }
.ds-move__facts dd{ margin:0; font-size:12.5px; line-height:1.8; color:var(--ds-ink-soft); }
@media (max-width:900px){ .ds-move{ grid-template-columns:minmax(0,1fr); } }

/* 濃色面の「小さな文字」にだけ、同系色の明るいトーンを使う。
   ボタンの地色（--ds-gold）は白文字が乗るので変えない。 */
:root{ --ds-gold-on-dark:#d9ab80; }
/* 暗い節の文字色は、ページ側のCSSに上書きされてはいけない。
   ページ側は .ページ名 .ds-kicker（指定度 0,2,0）で色を当ててくるので、
   こちらはクラスを重ねて 0,3,0 にし、読み込み順に関係なく勝たせる。
   （これを怠り、pet-stay の二つの節が暗い背景に暗い文字のまま出ていた） */
.ds-section--dark .ds-kicker.ds-kicker,
.ds-section--dark .ds-scene__n,
.ds-section--dark .ds-move__facts dt,
.ds-section--dark .ds-acc__trigger::after{ color:var(--ds-gold-on-dark); }
.ds-section--dark .ds-lead.ds-lead{ color:var(--ds-on-dark-soft); }

/* ============================================================
   17. Japanese typography finish: preserve natural phrase boundaries across the site.
   （サイト共通の禁則処理。行頭に句読点・小書き仮名が来ないようにする）
   ============================================================ */
html{ font-kerning:normal; text-rendering:optimizeLegibility; }
.ds :where(p,li,dd,dt,figcaption,blockquote,.ds-lead,.ds-card__note,.ds-card__facility,.ds-plan__intro,.ds-scene p,.ds-move__body p,.ds-acc__panel div){
  word-break:normal !important;
  overflow-wrap:break-word !important;
  line-break:strict !important;
  text-wrap:pretty;
}
.ds :where(h1,h2,h3,h4,h5,h6){
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  line-break:strict !important;
}
/* 折り返さない指定は「短いラベル」だけに掛ける。
   a と button をまとめて対象にすると、開閉見出しのような文章まで
   一行に張りつき、枠から文字がはみ出す。 */
.ds :where(.ds-btn,.ds-chip,.ds-link){
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-break:strict !important;
  white-space:normal;
}
.ds :where(.ds-acc__trigger,.ds-tablist button){
  word-break:normal !important;
  overflow-wrap:break-word !important;
  line-break:strict !important;
}
/* 見出しは行分割の対象になるため balance を掛けない（行数が変わって演出がずれる） */
.ds :where(h1,h2,h3):not([data-ds-split]){ text-wrap:balance; }