/* ==========================================================
   カードスライダー（inc/card-carousel.php、js/card-carousel.js）
   トップページの考え方・品質と、物件ページ（v2）のヒーロー下で共通
   1枚ずつ横にスライドし、前後のカードを端に薄く見せる
   ========================================================== */
.card-carousel{--card-w:min(960px,calc(100vw - 280px));--card-gap:48px;position:relative}
.card-carousel__stage{position:relative}
.card-carousel__viewport{overflow:hidden;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);touch-action:pan-y;cursor:grab}
.card-carousel.is-dragging .card-carousel__viewport{cursor:grabbing;user-select:none}
.card-carousel__track{display:flex;gap:var(--card-gap);transition:transform .9s var(--ease,cubic-bezier(.16,1,.3,1));will-change:transform}
.card-carousel.is-dragging .card-carousel__track{transition:none}
.card-carousel__item{flex:0 0 var(--card-w);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:36px;padding:28px;border-radius:40px;background:#fff;opacity:.35;transition:opacity .9s var(--ease,cubic-bezier(.16,1,.3,1))}
.card-carousel__item.is-active{opacity:1}
.card-carousel__body{position:relative;min-height:340px;padding:30px 4px 30px 22px;display:flex;flex-direction:column;overflow:hidden}
.card-carousel__no{position:relative;z-index:2;font-family:'Montserrat',var(--font-gothic,'Zen Kaku Gothic New','Noto Sans JP',sans-serif);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--green-dark,#4b513d)}
/* 背景の英字は、文字数が多いもの（PERFORMANCE）でも枠に収まる大きさにし、左そろえにする */
.card-carousel__ghost{position:absolute;left:0;top:.35em;z-index:1;max-width:100%;font-family:'Montserrat',sans-serif;font-size:clamp(2rem,calc(var(--card-w) * .05),3.2rem);font-weight:700;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(17,18,17,.1);pointer-events:none}
.card-carousel__item h3{position:relative;z-index:2;margin-top:auto;font-size:clamp(1.4rem,2.1vw,1.95rem);font-weight:500;line-height:1.7;letter-spacing:.09em}
.card-carousel__item p{position:relative;z-index:2;margin-top:18px;color:var(--muted,#686b67);font-family:var(--font-gothic,'Zen Kaku Gothic New','Noto Sans JP',sans-serif);font-size:.94rem;line-height:1.7;letter-spacing:.04em}
/* 写真は正方形を基準に、文章が長いカードではその高さまで伸ばす（写真の下に余白を作らない） */
.card-carousel__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:28px;background:#e7e6e0}
/* 写真は枠より少し大きく置き、カードが動くあいだ枠の中をゆっくり逆向きに動かす（パララックス。ずれ幅 --card-px は JS が入れる）
   切り抜かない写真（図面）は大きくすると端が切れるので、そのままの大きさで動かす */
.card-carousel__media img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--card-px,0px),0,0) scale(var(--card-zoom,1.12));transition:transform 1.1s var(--ease,cubic-bezier(.16,1,.3,1))}
.card-carousel__item.is-active:hover .card-carousel__media img{--card-zoom:1.17}
/* 動かしているあいだは、写真を指やカードの動きにそのまま合わせる（遅れて付いてこないように） */
.card-carousel.is-moving .card-carousel__media img,.card-carousel.is-dragging .card-carousel__media img{transition:none}
.card-carousel__media--contain img{object-fit:contain;padding:16px;background:#eef0e8;--card-zoom:1}
.card-carousel__item.is-active:hover .card-carousel__media--contain img{--card-zoom:1.03}
.card-carousel__nav{position:absolute;top:50%;z-index:3;width:72px;height:72px;display:grid;place-items:center;border:1px solid var(--ink,#111211);border-radius:50%;background:#fff;color:var(--ink,#111211);font-size:1.45rem;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .35s ease,background .25s ease,color .25s ease}
.card-carousel__nav--prev{left:0}.card-carousel__nav--next{left:var(--card-w)}
.card-carousel__nav:hover:not(:disabled),.card-carousel__nav:focus-visible:not(:disabled){background:var(--ink,#111211);color:#fff;outline:0}
.card-carousel__nav:disabled{opacity:0;pointer-events:none}
.card-carousel__dots{width:var(--card-w);display:flex;justify-content:center;gap:12px;margin-top:30px}
.card-carousel__dot{width:9px;height:9px;padding:0;border:1px solid var(--green-dark,#4b513d);border-radius:50%;background:transparent;cursor:pointer;transition:background .3s ease}
.card-carousel__dot.is-active{background:var(--green-dark,#4b513d)}
.card-carousel--dark .card-carousel__item{background:#1d1e1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff}
.card-carousel--dark .card-carousel__no{color:var(--sand,#c8bb91)}
.card-carousel--dark .card-carousel__ghost{-webkit-text-stroke:1px rgba(255,255,255,.1)}
.card-carousel--dark .card-carousel__item p{color:rgba(255,255,255,.7)}
.card-carousel--dark .card-carousel__media{background:#2a2c28}
.card-carousel--dark .card-carousel__media img{filter:saturate(.85) brightness(.92)}
.card-carousel--dark .card-carousel__media--contain img{filter:none}
.card-carousel--dark .card-carousel__nav{border-color:#fff}
.card-carousel--dark .card-carousel__nav:hover:not(:disabled),.card-carousel--dark .card-carousel__nav:focus-visible:not(:disabled){background:var(--sand,#c8bb91);border-color:var(--sand,#c8bb91);color:var(--ink,#111211)}
.card-carousel--dark .card-carousel__dot{border-color:var(--sand,#c8bb91)}.card-carousel--dark .card-carousel__dot.is-active{background:var(--sand,#c8bb91)}

/* カード内のリンク（物件ページでは、各特長の説明へ移動する）。リンクの上からでもカードをドラッグできるよう、リンク自体のドラッグは止める */
.card-carousel .card-carousel__link{-webkit-user-drag:none;position:relative;z-index:2;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding-bottom:5px;border-bottom:1px solid currentColor;font-family:'Montserrat',var(--font-gothic,'Zen Kaku Gothic New','Noto Sans JP',sans-serif);font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--ink,#111211);text-decoration:none;transition:color .25s ease}
.card-carousel .card-carousel__link:hover,.card-carousel .card-carousel__link:focus-visible{color:var(--green-dark,#4b513d);outline:0}
.card-carousel__link i{font-size:.9rem}
/* 黒いカード（--dark）の中では、リンクも白にする */
.card-carousel--dark .card-carousel__link{color:#fff}
.card-carousel--dark .card-carousel__link:hover,.card-carousel--dark .card-carousel__link:focus-visible{color:var(--sand,#c8bb91)}

/* 小さめのカード（物件ページのヒーロー下）: 番号・見出し・リンクだけを出す */
.card-carousel--compact{--card-w:min(700px,calc(100vw - 240px));--card-gap:28px}
.card-carousel--compact .card-carousel__item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:16px;border-radius:28px}
.card-carousel--compact .card-carousel__body{min-height:0;padding:14px 0 10px 12px}
.card-carousel--compact .card-carousel__no{font-size:.66rem}
/* 見出しは物件ごとに長さが違うので、1行に収まらないときは文節の切れ目で折り返す */
.card-carousel--compact .card-carousel__item h3{font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.75;letter-spacing:.06em;word-break:auto-phrase}
.card-carousel--compact .card-carousel__media{aspect-ratio:630/460;border-radius:18px}
.card-carousel--compact .card-carousel__nav{width:52px;height:52px;font-size:1.1rem}
.card-carousel--compact .card-carousel__dots{margin-top:22px}

@media(max-width:1000px){
  .card-carousel{--card-w:calc(100vw - 160px);--card-gap:28px}.card-carousel__item{grid-template-columns:1fr;gap:0;padding:16px;border-radius:32px}.card-carousel__media{order:-1;aspect-ratio:16/10;border-radius:22px}.card-carousel__body{min-height:0;padding:26px 12px 18px}.card-carousel__nav{top:calc((var(--card-w) - 32px) * .3125 + 16px);width:56px;height:56px;font-size:1.2rem}.card-carousel__nav--prev{left:44px}.card-carousel__nav--next{left:calc(var(--card-w) - 44px)}
  .card-carousel--compact{--card-w:min(560px,calc(100vw - 96px))}
  .card-carousel--compact .card-carousel__item{grid-template-columns:1fr;gap:0;padding:12px;border-radius:24px}
  .card-carousel--compact .card-carousel__media{aspect-ratio:630/460;border-radius:16px}
  .card-carousel--compact .card-carousel__body{padding:18px 8px 10px}
  .card-carousel--compact .card-carousel__nav{top:calc((var(--card-w) - 24px) * .365 + 12px);width:48px;height:48px;font-size:1rem}
  .card-carousel--compact .card-carousel__nav--prev{left:36px}.card-carousel--compact .card-carousel__nav--next{left:calc(var(--card-w) - 36px)}
}
@media(max-width:720px){
  /* card-carousel--stack（トップページ）はスライダーをやめて縦に並べる */
  .card-carousel--stack .card-carousel__viewport{margin-inline:0;padding-inline:0;overflow:visible;cursor:auto;touch-action:auto}.card-carousel--stack .card-carousel__track{flex-direction:column;gap:18px;transform:none!important}.card-carousel--stack .card-carousel__item{flex:none;opacity:1;padding:14px;border-radius:26px}.card-carousel--stack .card-carousel__media{border-radius:18px}.card-carousel--stack .card-carousel__body{padding:22px 10px 16px}.card-carousel--stack .card-carousel__ghost{font-size:2.6rem}.card-carousel--stack .card-carousel__nav,.card-carousel--stack .card-carousel__dots{display:none}.card-carousel--stack .card-carousel__item--clone{display:none}
  /* 物件ページはスワイプで切り替える（矢印は出さない） */
  .card-carousel--compact{--card-w:calc(100vw - 72px);--card-gap:14px}
  .card-carousel--compact .card-carousel__nav{display:none}
}
/* card-carousel--edge（物件ページのヒーロー下）: 1枚目を画面の左端から --card-edge 分だけ内側ではじめ、ドットは画面の中央に置く
   --card-x は、本文の枠（.card-carousel__stage）から見たカードの左端。矢印の位置に使う */
.card-carousel--edge{--card-edge:24px;--card-x:calc(var(--card-edge) - 50vw + 50%)}
.card-carousel--edge .card-carousel__viewport{padding-inline:var(--card-edge)}
.card-carousel--edge .card-carousel__nav--prev{left:var(--card-x)}
.card-carousel--edge .card-carousel__nav--next{left:calc(var(--card-x) + var(--card-w))}
.card-carousel--edge .card-carousel__dots{width:auto}
@media(max-width:1000px){
  .card-carousel--edge.card-carousel--compact .card-carousel__nav--prev{left:calc(var(--card-x) + 36px)}
  .card-carousel--edge.card-carousel--compact .card-carousel__nav--next{left:calc(var(--card-x) + var(--card-w) - 36px)}
}
@media(max-width:720px){
  .card-carousel--edge{--card-edge:16px}
}
/* card-carousel--center（物件ページのヒーロー下）: 見せているカードと丸印を、本文の枠ではなく画面の中央に置く
   カードは同じ幅で並ぶので、中央にそろえる分だけ左右に余白をとれば、どの位置でも中央に来る */
.card-carousel--center .card-carousel__viewport{padding-inline:calc(50vw - var(--card-w) / 2)}
.card-carousel--center .card-carousel__nav--prev{left:calc(50% - var(--card-w) / 2)}
.card-carousel--center .card-carousel__nav--next{left:calc(50% + var(--card-w) / 2)}
.card-carousel--center .card-carousel__dots{width:auto}
@media(max-width:1000px){
  .card-carousel--center.card-carousel--compact .card-carousel__nav--prev{left:calc(50% - var(--card-w) / 2 + 36px)}
  .card-carousel--center.card-carousel--compact .card-carousel__nav--next{left:calc(50% + var(--card-w) / 2 - 36px)}
}
@media(prefers-reduced-motion:reduce){
  .card-carousel__track,.card-carousel__item{transition:none!important}
}

/* スマホ（720px以下）: カードの本文の行間と字間を詰める（トップページの本文と合わせる） */
@media(max-width:720px){.card-carousel__item p{line-height:1.6;letter-spacing:.02em}}