/* ==========================================================
   物件ページ v2（page-lp-v2.php）専用。旧テンプレート（page-lp.php）とお問い合わせページには読み込まない
   1. 書体と色使いを、親ページ（トップページ、css/top.css）に合わせる
   2. ヒーロー下のカードスライダー（inc/card-carousel.php の compact）
   3. 住宅設備（Facilities）: 参考 https://j-ortho.jp/ の Feature
   4. ヒーロー（#kv）: 写真を画面に留め、その上をメインコピーと物件名の枠がスクロールで流れる。写真は角度を変えるカメラワークで見せる
   文字と写真の現れ方は、トップページと共通の css/reveal.css
   ========================================================== */
:root{
  --paper:#f3f2ee;--white:#fff;--ink:#111211;--muted:#686b67;--copy:#4f524e;--line:#d8d8d2;--rule:#c9c9c2;
  --green-dark:#4b513d;--sand:#c8bb91;--accent:#7bd100;--mist:#e8eadf;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-serif:'Shippori Mincho','Noto Serif JP','YuMincho','游明朝',serif;
  /* 本文・表・注記のゴシック体。石井ゴシックに近い無料の書体として選定（tasks/font-candidates.html）。読み込みは header-lp.php */
  --font-gothic:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif;
  --font-en:'Montserrat',sans-serif;
  /* 本文の幅: 親ページ（top.css の .inner）と同じ。PC（1200px以上）は左右の余白を広めにとる */
  --lp-w:min(100% - 80px,1280px);
}
@media (min-width:1200px){:root{--lp-w:min(100% - 200px,1280px)}}
@media (max-width:1000px){:root{--lp-w:min(100% - 48px,1280px)}}
@media (max-width:720px){:root{--lp-w:min(100% - 32px,1280px)}}

/* ---------- 1. 全体 ---------- */
/* 明朝は、物件名と同じ しっぽり明朝 Medium（500）にそろえる。太さを指定していない文字もそうなるよう、ページの基本を 500 にする
   英字ラベル（Montserrat）とアイコンは、それぞれの指定のまま */
body{background:var(--paper);color:var(--ink);font-family:var(--font-serif);font-weight:500}
.eng{font-family:var(--font-serif)}
/* 明朝の太さを、旧テンプレートと共通の lp.css・lp-common.css で決めているところも 500 にする
   トップページと共通の部品（流れの図・住まい一覧・フッター・来場予約の枠）は、部品の CSS で 500 にしている */
#map .link p{font-weight:500}
/* 本文・表・注記はゴシック体にする。見出し・名前・キャッチ・ボタン・図のラベルは明朝のまま
   書体は 500 と 700 だけを読み込むので、普通の太さ（400）の文字は 500 で表示される。Zen Kaku Gothic New は約物の詰め（palt）に対応していない */
#location .ctn ul.root li,
#story .bloc .txt,#story .bloc .txt p,#story .bloc figure span,
#creators .txt>p:not(.name):not(.name-eng),
#features .ctn .txt>p,#features .ctn .txt li,#features .ctn figure span,
.fac__read p,.fac__desc,.fac__note,
#plan .ctn .detail,#amenities .ctn ul,#overview .ctn,
#aftercare .read p,#aftercare ul li dl dd.txt{font-family:var(--font-gothic);letter-spacing:.04em}
/* 流れの図の説明・住まい一覧の説明は、トップページと共通の部品の CSS でゴシック体にしている */
.wrap{padding-bottom:0}
.slick-arrow{background:rgba(17,18,17,.82)}
.slick-dots li button{background:var(--rule)}
.slick-dots li.slick-active button{background:var(--green-dark)}

/* ページ上部へ戻るボタン（ヘッダーとメニューは、トップページと共通の css/site-header.css） */
.pagetop a{border-color:rgba(17,18,17,.3);background:rgba(243,242,238,.92)}
.pagetop a svg path{fill:var(--ink)!important}

/* 見出し: 住宅設備（Facilities）と同じ形。左に日本語、右に英字（どちらも明朝）。日本語の下線を #7bd100 の区切り線に重ねる */
.stl h1,.stl h2,.fac__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:1px solid var(--accent);text-align:left}
.stl h1 span.jp,.stl h2 span.jp,.fac__label{margin-bottom:-1px;padding-bottom:14px;border-bottom:2px solid var(--accent);font-size:clamp(20px,2.2vw,30px);font-weight:500;line-height:1.2;letter-spacing:.1em;color:var(--ink)}
.stl h1 span.eng,.stl h2 span.eng,.fac__title{position:static;transform:none;padding-bottom:14px;font-family:var(--font-serif);font-size:clamp(14px,1.3vw,18px);font-weight:500;line-height:1.2;letter-spacing:.06em;color:var(--ink)}
.stl,#map .stl,#amenities .stl,#overview .stl,#aftercare .stl{margin-bottom:60px}
/* 見出しの下の余白は、どのセクションも見出しの margin だけで決める（直後のブロックの上の余白は 0 にする） */
#story .stl+.bloc,#creators .stl+.ctn,#features .stl+.bloc,#plan .stl+.bloc{padding-top:0}
/* 見出し・本文・写真・表の幅を、親ページと同じ --lp-w にそろえる */
.stl,#location .city,#location .ctn,#story .bloc figure,#creators .ctn,#features .ctn,.cta .inner,#plan .ctn,#map .map-bloc,#amenities .ctn,#overview .ctn,#aftercare .read,#aftercare ul{width:var(--lp-w);max-width:none}

/* ヒーロー */
#kv .inner-kv{padding-bottom:0}

/* セクションの背景: 生成りを基本に、白・薄い緑・墨色を挟む（親ページと同じ組み立て） */
#story,#features,#plan,#map,#amenities,#overview{background:var(--paper)}
#creators,#housing{background:var(--white)}
#aftercare{background:var(--mist)}

/* 所在地と物件名 */
/* 物件名の枠: ヒーローの写真の上を流れる（4 を参照）。1画面の高さを取り、文字は真ん中に置く。灰色になった写真の上なので文字は白 */
#location .inner-sct{min-height:100vh;min-height:100svh;display:grid;align-content:center;padding:120px 0}
#location .city p{color:rgba(255,255,255,.88);font-size:clamp(14px,1.3vw,18px);letter-spacing:.1em}
#location .city p span.eng{font-family:var(--font-en);font-size:clamp(.74rem,.95vw,.9rem);font-weight:700;letter-spacing:.22em;text-transform:uppercase}
#location .city p span.jp{padding-left:76px}
#location .city p span.jp:before{width:44px;height:2px;left:16px;background:var(--accent)}
#location .ctn h1,#location .ctn h3{color:#fff;font-weight:500;letter-spacing:.08em;font-size:clamp(28px,3.4vw,44px);line-height:1.5}
#location .ctn ul.root li{color:rgba(255,255,255,.92)}
#location .ctn p{color:rgba(255,255,255,.86)}
/* 写真は薄いグレーまでしか暗くしないので、文字の影で読みやすくする */
#location .city,#location .ctn{text-shadow:0 0 18px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.32)}
/* 物件名と説明は、ページの顔になる部分。中央にそろえて見せる
   説明文だけはゴシック体にして読みやすくする（書体の参考: https://sunpro-resort.jp/for-architects/） */
#location .city,#location .ctn{text-align:center}
#location .ctn ul.root{margin-bottom:34px}
#location .ctn p.txt{max-width:40em;margin-inline:auto;font-family:var(--font-gothic);font-size:clamp(14px,1.1vw,16px);line-height:2.1;letter-spacing:.04em}

/* ストーリー・クリエイター */
#story .bloc .tit h3{color:var(--ink);font-weight:500;letter-spacing:.09em}
/* スマホ・タブレットの本文は、いちばん長い行の幅で中央に置く（改行のない段落は 50字前後で折り返す） */
#story .bloc .txt{width:fit-content;max-width:min(var(--lp-w),50em);color:var(--copy)}
/* 1000px 以下（写真と本文を縦に並べる表示）: 見出しの幅を写真と同じにして、左右の余白をそろえる */
@media (max-width:1000px){#story .bloc .tit{width:var(--lp-w);margin-inline:auto}}
/* ストーリーの本文の大きさは、物件のみどころの説明文（lp.css の #features .ctn .txt p）と同じ段階でそろえる
   本文は入力欄の文字をそのまま出すので p で囲まれておらず、lp.css の「.txt p」の指定が当たらない */
@media (max-width:1001px){#story .bloc .txt{font-size:16px}}
@media (max-width:801px){#story .bloc .txt{font-size:14px}}
@media (max-width:481px){#story .bloc .txt{font-size:13px}}
/* PC は、縦書きのタイトルを本文の幅の左端に置き、その右に写真、写真の下に本文を置く
   見出し（Story）・タイトル・写真・本文の左端が1本の線にそろい、右側に余白が残る */
@media (min-width:1001px){
  /* 行は「写真の高さ」と「残り全部」。縦書きのタイトルが写真＋本文より長いとき、余った高さが写真と本文のあいだに入らず、本文の下に逃げる */
  #story .bloc{display:grid;grid-template-columns:clamp(96px,10vw,148px) minmax(0,1fr);grid-template-rows:auto 1fr;justify-content:start;column-gap:0;align-items:start;width:var(--lp-w);margin-inline:auto}
  /* 縦書きのタイトルは、左の余白（本文の左端から写真の左端まで）の中央に置く */
  #story .bloc .tit{grid-column:1;grid-row:1 / span 2;margin-bottom:0;display:flex;justify-content:center}
  #story .bloc .tit h3{writing-mode:vertical-rl;white-space:nowrap;font-size:clamp(26px,3vw,44px);line-height:1.5;letter-spacing:.12em;text-align:start}
  #story .bloc figure{grid-column:2;grid-row:1;width:100%;max-width:none;margin:0}
  #story .bloc .txt{grid-column:2;grid-row:2;width:100%;max-width:none;margin:0;padding-top:34px}
}
.line:before{background:var(--accent)}
#creators .txt h3{color:var(--green-dark);font-weight:500;letter-spacing:.12em}
#creators .txt p{color:var(--copy)}
#creators .txt p.name-eng{color:var(--ink);font-family:var(--font-serif);font-weight:500;letter-spacing:.04em}
#creators .txt p.name{color:var(--ink)}
/* PC は、写真の高さを文章（役職から紹介文まで）の高さに合わせる。写真は縦横比を保ったまま小さくなる
   文章が短い物件でも写真が小さくなりすぎないよう、最低の高さを決めておく */
@media (min-width:802px){
  #creators .ctn{align-items:stretch;gap:clamp(28px,3vw,56px);min-height:clamp(260px,22vw,380px)}
  /* 写真は絶対配置にして、高さの計算から外す。こうすると行の高さは文章で決まり、写真はその中に収まる */
  #creators .pht{position:relative;flex:0 0 auto;width:clamp(240px,28%,360px)}
  #creators .pht figure{position:absolute;inset:0;margin:0}
  #creators .pht figure img{width:100%;height:100%;object-fit:contain;object-position:left center}
  /* 写真が右側に来る回（.re）は、写真を右端にそろえる */
  #creators .ctn.re .pht figure img{object-position:right center}
  #creators .txt{flex:1 1 auto;width:auto;max-width:none;align-self:center}
}

/* 物件のみどころ */
/* 写真は、登録した画像の大きさに関わらず同じ枠で表示する（場所ごとに縦横がばらつかないように）
   景色や室内の写真は枠いっぱいに切り抜き（cover）、人物と図面は切らずに収める（contain） */
#features .ctn .pht figure img{aspect-ratio:630/460;object-fit:cover}
#story .bloc figure img{aspect-ratio:980/610;object-fit:cover}
#creators .pht figure img{aspect-ratio:440/460;object-fit:contain}
#plan .ctn .pht figure img{width:100%;height:auto;aspect-ratio:630/460;object-fit:contain;background:#fff}
#features .ctn .txt .tips h3{color:var(--ink);font-weight:500;line-height:1.6;letter-spacing:.08em}
#features .ctn .txt .tips h3 span{display:flex;align-items:center;gap:14px;margin-bottom:14px;color:var(--green-dark);font-family:var(--font-en);font-size:.72rem;font-weight:700;line-height:1.2;letter-spacing:.22em;text-transform:uppercase}
#features .ctn .txt .tips h3 span::before{content:'';flex:none;width:28px;height:2px;background:var(--accent)}
#features .ctn .txt p{color:var(--copy)}
#features .ctn .txt ul li{color:var(--ink)}
#features .ctn .txt ul li:before{width:8px;height:8px;border-radius:50%;background:var(--accent);top:.62em}
/* PC は、みどころを1つずつ画面上部で止め、次のみどころが上に重なって進む（参考: https://companycoc.com/ の OUR BRAND）
   各ブロックに生成りの背景を敷いて、下のブロックを隠す
   スマホ・タブレットは、これまでどおり上から順に流す */
@media (min-width:1001px){
  /* 見出しの高さ（上の余白 24px + 英字の大きさ + 下の余白 14px + 罫線 1px） */
  #features{--feat-head:calc(clamp(34px,4.2vw,58px) + 39px)}
  #features .inner-sct{padding-bottom:0}
  /* 見出しは画面上部に留める。重なってくるブロックを隠すため、左右いっぱいに生成りの背景を敷く
     見出しより上に出たブロックも隠れるよう、背景は上にも伸ばす。ひとまとまりの外には出ないよう clip する
     （clip は position:sticky を妨げない） */
  /* flow-root にして、最後のカードの下余白がまとまりの外へ抜けないようにする（抜けると、ひとつ前のカードが早く剥がれる） */
  #features .features-stack{overflow:clip;display:flow-root}
  #features .features-stack .stl::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:100vh;background:var(--paper)}
  #features .features-stack .stl{position:sticky;top:96px;z-index:3;width:100%;max-width:none;margin-bottom:20px;padding:24px calc((100% - var(--lp-w)) / 2) 16px;background:var(--paper)}
  #features .bloc{padding:56px 0 64px;background:var(--paper)}
  /* ひとまとまりの中のブロックは、見出しの下で止まり、次のブロックが上に重なる
     ブロックの下に余白を足して、カードの境目に「送っても次のカードが出てこない区間」を作る
     （下まで読み終えてから次に進めるように。スクロール自体は止めない） */
  #features .features-stack .bloc{position:sticky;top:calc(96px + var(--feat-head) + 16px);z-index:1;margin-bottom:clamp(270px,42vh,510px)}
  /* 見出しの下端と、カードが止まる位置のあいだ（約20px）から後ろのカードがのぞくので、カードの背景を上へ伸ばして塞ぐ
     （見出しは z-index が上なので隠れない。カードどうしは後のカードが上に重なる） */
  #features .features-stack .bloc::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:30px;background:var(--paper)}
  /* 最後のカードの下には余白を置かない（置くと、カードが流れたあとに空白が見えてしまう）。
     代わりに下の「末尾の余白」で、ひとつ前のカードを留めておく時間と、最後のカードが留まる時間を作る
     （末尾の余白が最後の子になるので、カードの指定は nth-last-child(2)） */
  #features .features-stack .bloc:nth-last-child(2){margin-bottom:0}
  /* 先頭のブロックは、見出しとのあいだに余白を入れる */
  /* まとまりの末尾の余白。ひとつ前のカードは、最後のカードに覆われるまでここで留まり、
     そのあと最後のカードがこの長さだけ画面上部に留まってから、次の節へ流れていく
     （カードの高さの違いを吸収するため、カードの間隔より少し長くしている） */
  #features .features-stack__tail{height:calc(clamp(270px,42vh,510px) + 120px)}
  #features .stl+.bloc{padding-top:56px}
  /* 最後のブロックはひとまとまりの外。止めずに、前のブロックの上を通って流れる */
  #features .inner-sct>.bloc{position:relative;z-index:2}
}

/* 来場予約・お問い合わせの枠（inc/lp-cta.php）の見た目は、トップページと共通の css/cta.css。幅だけ本文にそろえる（上の幅の一覧） */

/* プラン・マップ・近隣施設・物件概要: 表の線を緑から薄いグレーに */
#plan .ctn .detail ul{border-top-color:var(--rule)}
#plan .ctn .detail ul li{border-bottom-color:var(--rule)}
#plan .ctn .detail dt{color:var(--copy)}
#plan .ctn .detail dd.note{color:var(--muted)}

/* プランの図面（部品は inc/lp-plan-photos-v2.php）。拡大ボタンを写真の上に重ねるので、枠を基準にする */
#plan .ctn .pht figure{position:relative;margin:0}
/* 成約済みのプラン: 図面に白い覆い（50%）と「成約済み」を重ねる。表は物件名だけ（page-lp-v2.php） */
#plan .bloc.is-sold .pht{position:relative}
#plan .plan-sold{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(255,255,255,.5)}
#plan .plan-sold span{padding:10px 28px;border:1px solid var(--ink);background:rgba(255,255,255,.9);color:var(--ink);font-family:var(--font-serif);font-size:clamp(16px,1.6vw,22px);letter-spacing:.24em;text-indent:.24em}
/* 2枚以上のとき: 左右に送るスライド（動きは js/lp-v2.js） */
.plan-photos{position:relative}
.plan-photos .swiper{width:100%}
.plan-photos__ui{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;font-family:var(--font-en)}
.plan-photos__count{font-size:.67rem;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.plan-photos__count b{color:var(--ink);font-size:.88rem}
.plan-photos__nav{display:flex;gap:6px}
.plan-photos__btn{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:1.1rem;cursor:pointer;transition:background .25s ease,color .25s ease}
.plan-photos__btn:hover,.plan-photos__btn:focus-visible{background:var(--ink);color:#fff;outline:0}
#map .map-bloc{background:var(--white)}
/* 地図は、広げた幅に合わせて高さも足す（スマホは lp.css のまま） */
@media (min-width:802px){
  #map .map-bloc{height:clamp(420px,36vw,560px)}
}
#map .link p a{color:var(--ink);letter-spacing:.08em}
#map .link p a:after{background:var(--accent)}
#map .link p a:hover{color:var(--green-dark)}
#amenities .ctn ul li,#overview .ctn ul li{border-bottom-color:var(--rule)}
#amenities .ctn ul li:nth-child(1),#amenities .ctn ul li:nth-child(2),#overview .ctn ul li:nth-child(1),#overview .ctn ul li:nth-child(2){border-top-color:var(--rule)}
#overview .ctn ul li dl dt{color:var(--copy)}
#overview .ctn aside{border-bottom-color:var(--rule)}
#overview .ctn aside p.tips{color:var(--green-dark)}

/* アフターケア（inc/lp-aftercare.php）・販売中の分譲住宅（inc/lp-housing.php） */
#aftercare .read p{color:var(--copy)}
#aftercare .care-wrap{width:var(--lp-w);margin:0 auto 48px}
#aftercare ul li dl dt{color:var(--green-dark);font-family:var(--font-serif);font-weight:500;letter-spacing:.12em}
#aftercare ul li dl dd.txt{color:var(--copy)}
#aftercare ul li dl dd.point{background:var(--green-dark);color:#fff;font-family:var(--font-serif)}
#housing h3{color:var(--ink);font-weight:500;letter-spacing:.09em}
/* 販売中の住まい: トップページと同じ一覧（inc/top-residence-group.php、css/residence-slider.css） */
#residences{overflow:clip;background:var(--white)}
#residences .inner-sct{width:var(--lp-w);margin-inline:auto;padding:96px 0 104px}
.slider .slide dl dd.city{color:var(--green-dark)}
.slider .slide dl dd.name{color:var(--ink)}
.slider .slide dl dd.txt{color:var(--copy)}

/* ---------- 2. ヒーロー下のカードスライダー ---------- */
.feature-cards{position:relative;overflow:hidden;padding:28px 0 72px;background:var(--paper)}
.feature-cards__inner{width:var(--lp-w);margin:0 auto}

@media (max-width:800px){
  .stl h1,.stl h2,.fac__head{gap:12px}
  .stl h1 span.jp,.stl h2 span.jp,.fac__label{padding-bottom:10px;font-size:clamp(18px,5.2vw,22px)}
  .stl h1 span.eng,.stl h2 span.eng,.fac__title{padding-bottom:10px;font-size:13px}
  .plan-photos__ui{margin-top:12px}
  .plan-photos__btn{width:38px;height:38px;font-size:1rem}
  .stl,#map .stl,#amenities .stl,#overview .stl,#aftercare .stl{margin-bottom:32px}
  .feature-cards{padding:20px 0 48px}
}


/* ---------- 3. 住宅設備（Facilities）: 墨色の背景。写真を下端そろえで横一列に並べ、選ばれている1枚だけを大きくする ---------- */
.fac{
  --fac-h:clamp(440px,37.5vw,640px);
  --fac-active-w:calc(var(--fac-h) * 500 / 580);
  --fac-ease:cubic-bezier(.19,1,.22,1);
  position:relative;overflow:hidden;overflow:clip;padding:120px 0 110px;background:var(--ink);color:#fff;
}

/* 見出し行の形は、上の .stl h2 と共通。暗い背景なので文字だけ白にする */
.fac__inner{position:relative;width:var(--lp-w);margin:0 auto}
.fac__title,.fac__label{color:#fff}
.fac__read{max-width:none;margin:60px 0 72px}
.fac__read p{font-size:clamp(14px,1.25vw,17px);line-height:2;color:rgba(255,255,255,.74)}

/* スライダー: 右は画面の右端まで、左は画面の外へ --fac-l だけ伸ばし、中央にそろう「選ばれている写真」の左端を本文の幅の左端に合わせる
   --fac-l =（1画面の枚数 × 本文の幅 − 画面の幅 + 写真の間の合計）÷（1画面の枚数 + 1）。枚数と間は js/lp-v2.js の Swiper の設定（PC は12枚・8px）と同じにする
   Swiper は全部の写真を同じ幅で並べるので、選ばれている写真だけ !important で幅を広げ、後ろの写真を右へ押し出す */
.fac__group{position:relative;--fac-l:calc((var(--lp-w) * 12 - 100% + 88px) / 13)}
.fac__strip{width:calc(100% + var(--fac-l));height:var(--fac-h);margin-left:calc(var(--fac-l) * -1)}
.fac__slide{display:flex;align-items:flex-end;cursor:pointer;transition:width .64s var(--fac-ease)}
.fac__slide.swiper-slide-active{width:var(--fac-active-w)!important;cursor:default}
.fac__img{display:block;width:100%;height:auto;aspect-ratio:500/580;object-fit:cover;border-radius:4px;filter:brightness(.78);transition:filter .64s var(--fac-ease);user-select:none;-webkit-user-drag:none}
.fac__slide:hover .fac__img,.fac__slide.swiper-slide-active .fac__img{filter:none}

/* 右側: 番号と進み具合の線、前後ボタン、設備名、説明 */
.fac__meta{position:absolute;top:0;left:calc((100% - var(--lp-w)) / 2 + var(--fac-active-w) + clamp(40px,4vw,72px));right:calc((100% - var(--lp-w)) / 2);z-index:2}
.fac__meta-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:34px}
.fac__progress{display:flex;align-items:center;gap:16px;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.06em}
.fac__bar{position:relative;width:80px;height:1px;overflow:hidden;background:rgba(255,255,255,.22)}
.fac__bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.fac__nav{display:flex;gap:6px}
.fac__btn{width:58px;height:48px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:24px;background:transparent;color:#fff;font-size:15px;cursor:pointer;transition:border-color .25s ease,color .25s ease}
.fac__btn:hover,.fac__btn:focus-visible{border-color:var(--sand);color:var(--sand);outline:0}
.fac__name{font-size:clamp(22px,2vw,30px);font-weight:500;line-height:1.6;letter-spacing:.1em;word-break:auto-phrase;transform-origin:left top}
.fac__desc{margin-top:14px;font-size:15px;line-height:2;color:rgba(255,255,255,.74)}
.fac__note{width:var(--lp-w);margin:18px auto 0;font-size:12px;text-align:right;color:rgba(255,255,255,.6)}

/* 設備名と説明の切り替え: 左へ消え、少し遅れて右から現れる */
.fac__name,.fac__desc{transition:opacity .22s cubic-bezier(.215,.61,.355,1),transform .22s cubic-bezier(.215,.61,.355,1)}
.fac__text.is-out .fac__name,.fac__text.is-out .fac__desc{opacity:0;transform:translateX(-10px)}
.fac__text.is-in-start .fac__name{opacity:0;transform:translateX(7px) scaleX(1.04);transition:none}
.fac__text.is-in-start .fac__desc{opacity:0;transform:translateX(7px);transition:none}
.fac__text.is-in .fac__name{transition:opacity 1.22s cubic-bezier(.075,.82,.165,1) .3s,transform 1.22s cubic-bezier(.075,.82,.165,1) .3s}
.fac__text.is-in .fac__desc{transition:opacity 1.22s cubic-bezier(.075,.82,.165,1) .5s,transform 1.22s cubic-bezier(.075,.82,.165,1) .5s}

/* 写真が1枚だけのとき */
.fac__group.is-single .fac__strip{width:auto;margin-left:calc((100% - var(--lp-w)) / 2)}
.fac__group.is-single .fac__slide{width:var(--fac-active-w)}
.fac__group.is-single .fac__img{filter:none}
.fac__group.is-single .fac__progress,.fac__group.is-single .fac__nav{display:none}

/* タブレット: 文章を写真の下に置く（1画面9枚・間 6px） */
@media (max-width:1100px){
  .fac{--fac-h:clamp(300px,40vw,440px);padding:90px 0 80px}
  .fac__group{--fac-l:calc((var(--lp-w) * 9 - 100% + 48px) / 10)}
  .fac__meta{position:static;width:var(--lp-w);margin:34px auto 0}
  .fac__meta-top{margin-bottom:22px}
}
/* スマホ: 前後ボタンは出さず、スワイプで切り替える（1画面8枚・間 4px） */
@media (max-width:800px){
  .fac{--fac-h:clamp(220px,60vw,320px);padding:70px 0 60px}
  .fac__group{--fac-l:calc((var(--lp-w) * 8 - 100% + 28px) / 9)}
  .fac__read{margin:32px 0 40px}
  .fac__read p{font-size:13px;line-height:1.9}
  .fac__nav{display:none}
  .fac__meta{margin-top:26px}
  .fac__meta-top{margin-bottom:14px}
  .fac__progress{font-size:11px}
  .fac__name{font-size:20px}
  .fac__desc{margin-top:10px;font-size:13px;line-height:1.9}
  .fac__note{margin-top:14px;font-size:10px}
}
/* 480px 以下は1画面6枚（間 4px） */
@media (max-width:480px){
  .fac__group{--fac-l:calc((var(--lp-w) * 6 - 100% + 20px) / 7)}
}
@media (prefers-reduced-motion:reduce){
  .fac__slide,.fac__img,.fac__name,.fac__desc{transition:none!important}
}

/* ---------- 4. ヒーロー（#kv） ----------
   写真は画面に留め（sticky）、その上をメインコピー（.kv-copy）と物件名の枠（#location）がスクロールで流れる（参考: https://yurumaru.life/）
   写真はコピーの枠ごとに、スクロールに合わせて切り替える（時間では切り替えない）
   物件名の枠の文字が画面の下から入ってくるのに合わせて、写真を薄いグレーにし、下から暗いグラデーションを重ねる（--kv-shade 0〜1。js/lp-v2.js が更新）
   枠が流れきると写真の留まりが外れ、ヒーロー下のカードが続く。#kv の高さは1画面のまま（js/lp.js が固定ナビを出す位置に使う）
*/
.kv-scroll{position:relative}
#kv{position:sticky;top:0;z-index:0;height:100vh;height:100lvh;overflow:hidden}
#kv .inner-kv{position:relative;z-index:1;height:100%}
#kv .kv-slide{height:100%;padding-top:0}
/* グレーにする: 写真のまとまり全体に、薄いグレーを透かして重ねたような見た目のフィルターをかける（--kv-shade に合わせて強くなる）
   最後まで写真が見える薄さにとどめる（2026-09-17 ユーザー指定。不透明なグレーにはしない）。最後は 彩度 70%・コントラスト 80%・明るさ 94%（白は #d8d8d8 くらい）
   上に重ねる層（mix-blend-mode など）では、切り替え中の写真に効かないことがあったため、フィルターにしている */
#kv .inner-kv{filter:grayscale(calc(var(--kv-shade,0) * .3)) contrast(calc(1 - var(--kv-shade,0) * .2)) brightness(calc(1 - var(--kv-shade,0) * .06));will-change:filter}
.kv-flow{position:relative;z-index:1;margin-top:-100vh;margin-top:-100lvh}
/* メインコピー: 1つずつ1画面の高さを取り、真ん中に置く。入力した <br> で改行する */
.kv-copy{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:120px 24px}
.kv-copy p{max-width:min(100%,1100px);color:#fff;font-family:var(--font-serif);font-size:clamp(20px,3vw,48px);font-weight:500;line-height:2;letter-spacing:.12em;text-align:center;text-shadow:0 0 12px rgba(0,0,0,.35);font-feature-settings:'palt';word-break:auto-phrase;text-wrap:balance}

/* 写真の切り替え: スクロールでコピーの枠が替わるのに合わせ、ワイプ（1.4秒）で替える（js/lp-v2.js が .is-active を付け替える）
   下へ進むときは右から左、上へ戻るときは左から右へ（.is-reverse）。前の写真（.is-leaving）は、ワイプが終わるまで下に残す
   表示している間は、写真ごとに決めた向きへカメラがゆっくり動く。傾けても端が見えないよう、写真の層は枠より一回り大きく敷く */
#kv .kv-slide{isolation:isolate}
#kv .kv-slide .slide{height:100%;opacity:1;z-index:1;clip-path:inset(0 0 0 100%);perspective:1800px}
#kv .kv-slide .slide.is-reverse{clip-path:inset(0 100% 0 0)}
#kv .kv-slide .slide.is-leaving{z-index:1;clip-path:inset(0 0 0 0)}
#kv .kv-slide .slide.is-active{z-index:2;clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.65,0,.35,1)}
#kv .slide .bg{position:absolute;inset:-6%;width:auto;height:auto;padding-top:0;transform:var(--cam-a);backface-visibility:hidden;will-change:transform;animation:kvCam 12s cubic-bezier(.37,0,.63,1) infinite alternate;animation-play-state:paused}
#kv .slide.is-active .bg,#kv .slide.is-leaving .bg{animation-play-state:running}
#kv .slide:nth-child(1){--cam-a:translate3d(2%,0,0) rotateY(-3deg) rotateX(0deg) scale(1.1);--cam-b:translate3d(-2%,-1%,0) rotateY(3deg) rotateX(1deg) scale(1.16)}
#kv .slide:nth-child(2){--cam-a:translate3d(0,2%,0) rotateY(1.5deg) rotateX(3deg) scale(1.12);--cam-b:translate3d(0,-2%,0) rotateY(-1.5deg) rotateX(-2deg) scale(1.16)}
#kv .slide:nth-child(3){--cam-a:translate3d(-2.5%,0,0) rotateY(2.5deg) rotateX(0deg) scale(1.12);--cam-b:translate3d(2.5%,0,0) rotateY(-2.5deg) rotateX(0deg) scale(1.14)}
#kv .slide:nth-child(4){--cam-a:translate3d(0,0,0) rotateY(-2deg) rotateX(1deg) scale(1.08);--cam-b:translate3d(0,-1%,0) rotateY(2deg) rotateX(-1deg) scale(1.18)}
#kv .slide:nth-child(5){--cam-a:translate3d(-2%,1%,0) rotateY(3deg) rotateX(-1deg) scale(1.16);--cam-b:translate3d(2%,0,0) rotateY(-3deg) rotateX(0deg) scale(1.1)}
@keyframes kvCam{from{transform:var(--cam-a)}to{transform:var(--cam-b)}}
/* 物件名の枠が入ってくるときは、下から暗いグラデーションを重ねて文字を読みやすくする（--kv-shade に合わせ、下から浮かび上がりながら濃くなる）
   写真と同じまとまり（.kv-slide）の中の一番上に置き、切り替え中の写真にも確実に重なるようにする。上のほうは透明なので写真は見えたまま */
#kv .kv-slide::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(22,23,21,.8) 0%,rgba(22,23,21,.58) 36%,rgba(22,23,21,.22) 66%,rgba(22,23,21,0) 88%);opacity:var(--kv-shade,0);transform:translate3d(0,calc((1 - var(--kv-shade,0)) * 30%),0)}
/* スマホ（801px以下）は枠が小さいので、遠近の距離を短くして傾きが見えるようにする */
@media (max-width:801px){
  #kv .kv-slide .slide{perspective:1000px}
}
/* 動きを減らす設定の端末では、写真を傾けず、動かさず、ワイプなしで切り替える */
@media (prefers-reduced-motion:reduce){
  #kv .kv-slide .slide.is-active{transition:none}
  #kv .slide .bg{animation:none!important;transform:none}
}