:root{
  --paper:#FBFBFA;
  --ink:#14181A;
  --mist:#8A9296;
  --deep:#1B3B47;
  --shallow:#A8BFC4;
  --tide:#E4E7E5;
  --wash:#F3F5F4;

  --display:'Forum',serif;
  --mincho:'Zen Old Mincho',serif;
  --body:'Zen Kaku Gothic New',system-ui,sans-serif;

  --pad:clamp(20px,5vw,80px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ─── 汎用 ─── */
.dsp{font-family:var(--display);font-weight:400;letter-spacing:.06em;line-height:1.1}
.mincho{font-family:var(--mincho)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.rule{height:1px;background:var(--tide);border:0}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* 実写真枠 */
.ph-real{position:relative;overflow:hidden;background:#0C1114;aspect-ratio:4/3;display:flex;align-items:flex-end}
.ph-real img{width:100%;height:100%;object-fit:cover;object-position:0% center;transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.room:hover .ph-real img{transform:scale(1.04)}

/* 写真プレースホルダ（撮影指示を兼ねる） */
.ph{
  position:relative;overflow:hidden;background:var(--wash);
  display:flex;align-items:flex-end;
}
.ph::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(170deg,#C9D6D9 0%,#93A9AF 45%,#5D767F 100%);
  opacity:.85;
}
.ph.warm::before{background:linear-gradient(160deg,#E8D3C0 0%,#C99A78 40%,#7E5F5A 100%)}
.ph.dark::before{background:linear-gradient(165deg,#5A6468 0%,#333C40 55%,#1C2427 100%)}
.ph.pale::before{background:linear-gradient(160deg,#F2F1EC 0%,#D9DEDC 50%,#B4BEBE 100%)}
.ph .tag{
  position:relative;z-index:1;margin:16px;padding:6px 12px;
  background:rgba(255,255,255,.86);color:var(--ink);
  font-size:10.5px;letter-spacing:.1em;line-height:1.5;
}

/* Header, drawer and footer rules moved to site-chrome.css. */

/* ─── ヒーロー：承認モックと同じクロスフェード・コピー演出 ─── */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden}
.hero-slides{position:absolute;inset:0}
/* JavaScript adds .is-ready only after it has established the initial zoom state. */
.hero-slides:not(.is-ready) .hero-slide:first-child{z-index:2;opacity:1;transform:scale(1.085) translateZ(0)}
.hero-slide{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:50% 52%;
  opacity:0;transform:scale(1.085) translateZ(0);
  transition:opacity 2.2s cubic-bezier(.4,0,.2,1),transform 9.4s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;backface-visibility:hidden;
}
.hero-slide.is-on{z-index:2;opacity:1;transform:scale(1) translateZ(0)}
/* The outgoing image fades at the same time as the incoming image; it is never held over the next slide. */
.hero-slide.is-out{z-index:1;opacity:0;pointer-events:none}
.hero-slide.dim::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 16% 30%,rgba(4,10,14,.26) 0%,rgba(4,10,14,.12) 46%,rgba(4,10,14,.04) 70%,transparent 100%);
}
.hero::after{
  content:'';position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,14,.34) 0%,rgba(4,10,14,.10) 30%,rgba(4,10,14,0) 50%,rgba(4,10,14,.42) 100%);
}
.hero-in{
  position:absolute;z-index:3;left:0;top:0;
  padding:clamp(124px,21vh,200px) var(--pad) 0;color:#fff;
  will-change:opacity,transform;
}
.hero h1{
  font-family:var(--mincho);font-weight:400;
  font-size:clamp(19px,3vw,37px);line-height:1.4;letter-spacing:.2em;
  text-shadow:0 1px 3px rgba(0,8,14,.35),0 2px 30px rgba(0,8,14,.55);
}
.hero.dimmed h1{ text-shadow:0 1px 2px rgba(0,8,14,.5),0 0 14px rgba(0,8,14,.4),0 2px 34px rgba(0,8,14,.5) }
.hero h1 .sm{display:block;font-size:.5em;letter-spacing:.34em;margin-bottom:.55em;opacity:.92}
.hero-place{
  font-size:clamp(9px,.85vw,10.5px);letter-spacing:.3em;
  color:rgba(255,255,255,.88);margin-bottom:clamp(14px,2vh,20px);
  text-shadow:0 1px 14px rgba(0,8,14,.8);white-space:nowrap;
  opacity:0;animation:placeIn 1.2s ease .4s forwards;
}
.hero.dimmed .hero-place{ text-shadow:0 1px 2px rgba(0,8,14,.52),0 0 14px rgba(0,8,14,.42),0 2px 34px rgba(0,8,14,.52) }
.hero h1{opacity:0;animation:placeIn 1.2s ease .75s forwards}
@keyframes placeIn{to{opacity:1}}
.hero-dots{position:absolute;z-index:4;right:var(--pad);bottom:30px;display:flex;gap:9px}
.hero-dots .dot{width:26px;height:1px;background:rgba(255,255,255,.42);border:0;padding:0;cursor:pointer;transition:background .5s}
.hero-dots .dot.is-on{background:rgba(255,255,255,.95)}
@media(max-width:900px){.hero-slide{background-position:58% 52%}}
@media(max-width:700px){
  .hero-dots{right:auto;left:var(--pad);bottom:24px}.hero-dots .dot{width:20px}
  .hero-in{padding-top:clamp(96px,15vh,140px)}
}
@media(max-width:560px){.hero-place{font-size:8.5px;letter-spacing:.18em}}

/* ─── セクション共通 ─── */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec-head{text-align:center;margin-bottom:clamp(42px,6vw,72px)}
.sec-head .t{font-family:var(--display);font-size:clamp(32px,5vw,58px);margin-top:14px;letter-spacing:.05em}
.sec-head .jp{margin-top:10px;font-size:12.5px;letter-spacing:.2em;color:#4A5559}

/* ─── コンセプト ─── */
.concept{background:var(--wash)}
.concept-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
.concept .ph{aspect-ratio:4/5}
.concept p{font-family:var(--mincho);font-size:clamp(14.5px,1.5vw,17px);line-height:2.5;letter-spacing:.08em;margin-bottom:1.9em}
.concept p:last-of-type{margin-bottom:0}
.vmap{position:relative;isolation:isolate}
.vmk{position:absolute;z-index:2;left:13.4%;top:72%;width:1px;height:1px;pointer-events:none}
.vmk span{
  position:absolute;left:0;top:0;width:6px;height:6px;border:1.25px solid rgba(255,255,255,.94);border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 0 1px rgba(10,20,22,.12),0 1px 6px rgba(0,0,0,.45);
}
.vmk em{
  position:absolute;left:10px;bottom:80px;font-style:normal;font-family:var(--body);font-size:16px;line-height:1;letter-spacing:.32em;
  color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.45);opacity:0;white-space:nowrap;
}
.vmap.play .vmk span{animation:vrip 5.8s cubic-bezier(.2,.6,.3,1) infinite}
.vmap.play .vmk em{animation:vfin 1.6s ease 1.2s forwards}
@keyframes vrip{0%{width:6px;height:6px;opacity:1}65%{opacity:.9}100%{width:66px;height:66px;opacity:0}}
@keyframes vfin{to{opacity:1}}
@media(max-width:860px){.concept-grid{grid-template-columns:1fr}}

/* ─── ROOMS：断面ダイアグラム（シグネチャー） ─── */
.diagram{margin:0 auto clamp(48px,6vw,80px);max-width:920px}
.diagram-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px)}
.col-h{text-align:center;padding-bottom:18px}
.col-h .en{font-family:var(--display);font-size:clamp(22px,2.8vw,34px);letter-spacing:.08em}
.col-h .ja{font-size:11px;letter-spacing:.3em;color:var(--mist);margin-top:6px}
.floor{border:1px solid var(--tide);padding:20px 16px;text-align:center;transition:background .4s,color .4s}
.floor + .floor{border-top:0}.floor .fl{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.22em;opacity:.62}
.floor .fn{margin-top:8px;font-size:13.5px;letter-spacing:.08em;line-height:1.7}.floor.live{background:var(--deep);border-color:var(--deep);color:#fff}.floor.live .fl{opacity:.55}.col-b .floor.live{background:var(--shallow);border-color:var(--shallow);color:var(--ink)}
.sealine{position:relative;margin-top:0;height:62px;overflow:hidden}
.sealine .line{position:absolute;top:0;left:0;height:1px;background:var(--deep);width:25%;will-change:width}
.sealine .lab{position:absolute;top:10px;left:25%;transform:translateX(-50%);font-size:10px;letter-spacing:.28em;color:var(--mist);background:var(--paper);padding:0 14px;white-space:nowrap;will-change:left,transform}
.sealine .ends{position:absolute;top:38px;left:0;right:0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.22em;color:var(--mist)}
.diagram-note{margin-top:14px;text-align:center;font-size:12.5px;letter-spacing:.08em;color:var(--mist);line-height:2}.diagram-note b{color:var(--ink);font-weight:400;font-family:var(--mincho)}
@media(max-width:620px){.floor{padding:14px 8px}.floor .fn{font-size:12px}.sealine .ends{font-size:8.5px}}

/* ─── 客室カード ─── */
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--tide)}
.room{position:relative;background:var(--paper)}
.room .ph{aspect-ratio:4/3}
.room-body{padding:clamp(24px,3vw,40px)}
.room-body h3{font-family:var(--display);font-size:clamp(26px,3.2vw,38px);letter-spacing:.06em;font-weight:400}
.room-body .ja{font-size:11px;letter-spacing:.32em;color:var(--mist);margin-top:8px}
.room-body .lead{font-family:var(--mincho);font-size:15px;line-height:2.2;letter-spacing:.06em;margin-top:20px}
.room-body dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-top:24px;font-size:12.5px;letter-spacing:.05em}
.room-body dt{color:var(--mist)}
.room-link{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  font-size:12.5px;letter-spacing:.14em;border-bottom:1px solid var(--ink);padding-bottom:6px;
}
.room-link span{transition:transform .35s}
.room-link:hover span{transform:translateX(6px)}
@media(max-width:820px){.rooms{grid-template-columns:1fr}}

.whole-villa-callout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);max-width:1240px;margin:clamp(34px,5vw,64px) auto 0;padding:clamp(28px,4vw,48px) var(--pad);background:var(--deep);color:#fff}
.whole-villa-kicker{font-family:var(--display);font-size:clamp(24px,3vw,34px);letter-spacing:.08em;line-height:1.1;color:rgba(255,255,255,.8)}
.whole-villa-callout h3{margin-top:12px;font-family:var(--mincho);font-size:clamp(18px,2vw,25px);font-weight:400;line-height:1.8;letter-spacing:.08em;white-space:pre-line}
.whole-villa-callout>div:last-child{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.whole-villa-callout p:not(.whole-villa-kicker){font-size:13px;line-height:2.1;letter-spacing:.07em;color:rgba(255,255,255,.84)}
.whole-villa-link{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.8);font-size:12px;letter-spacing:.14em}
.whole-villa-link span{transition:transform .35s}.whole-villa-link:hover span{transform:translateX(6px)}
@media(max-width:820px){.whole-villa-callout{grid-template-columns:1fr;margin-inline:var(--pad);padding-inline:clamp(24px,5vw,40px)}}


/* 共通スペック（横長1行 × 縦積み） */
.spec{padding:clamp(34px,4.4vw,58px) 0 0}
.spec-l{border-top:1px solid var(--tide)}
.spec-l > div{
  display:grid;grid-template-columns:9em 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;
  padding:clamp(15px,1.8vw,20px) 2px;
  border-bottom:1px solid var(--tide);
}
.spec-l dt{font-size:10.5px;letter-spacing:.26em;color:#5A6468}
.spec-l dd{font-size:13.5px;letter-spacing:.05em;line-height:1.8}
@media(max-width:560px){
  .spec-l > div{grid-template-columns:1fr;gap:6px}
}

/* ─── 特徴（ジグザグ） ─── */
.zig{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.zig .ph{aspect-ratio:16/11;height:100%}
.zig .txt{padding:clamp(30px,5vw,72px)}
.zig .txt .rno{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);letter-spacing:.06em;line-height:1;color:var(--tide);margin-bottom:14px}
.zig .txt h3{font-family:var(--display);font-size:clamp(24px,3vw,34px);letter-spacing:.05em;font-weight:400;margin-top:14px}
.zig .txt .jt{font-family:var(--mincho);font-size:16px;letter-spacing:.1em;margin-top:10px}
.zig .txt p{font-size:13.5px;line-height:2.2;letter-spacing:.05em;color:#40484B;margin-top:18px}
.zig .credit{margin-top:20px;padding-top:16px;border-top:1px solid var(--tide);font-size:11.5px;letter-spacing:.06em;color:var(--mist);line-height:2}
.zig:nth-child(even) .ph,.zig:nth-child(even) .ph-real{order:2}

@media(max-width:820px){
  .zig{grid-template-columns:1fr}
  .zig:nth-child(even) .ph{order:0}
}


/* 記念日 */
.anni{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.anni li{
  border:1px solid var(--tide);padding:7px 15px;
  font-size:12px;letter-spacing:.08em;color:#3C4447;
}

/* ─── 料金 ─── */
.rates-row{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:stretch;
  border-top:1px solid var(--tide);
}
.rates-row .rate-card + .rate-card{border-left:1px solid var(--tide)}
.rate-card{display:flex;flex-direction:column}

/* 見出し帯：深海＝紺／浅瀬＝淡い水色 */
.rc-h{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:clamp(15px,1.8vw,20px) clamp(18px,2.4vw,30px);
}
/* 深海 ── 紺 */
.rates-row .rate-card:first-child .rc-h{background:#1B3B47;color:#fff}
.rates-row .rate-card:first-child .rc-h .ja{color:rgba(255,255,255,.66)}
/* 浅瀬 ── 淡いブルー */
.rates-row .rate-card:last-child .rc-h{background:#C3DBE3;color:var(--ink)}
.rates-row .rate-card:last-child .rc-h .ja{color:#4A5559}
/* 一棟貸し ── 紺から淡青へのグラデーション */
.rate-card.whole .rc-h{
  background:linear-gradient(90deg,#1B3B47 0%,#2E5B69 38%,#7BA7B5 70%,#C3DBE3 100%);
  color:#fff;
}
.rate-card.whole .rc-h .ja{color:rgba(255,255,255,.7)}
@media(max-width:820px){
  .rate-card.whole .rc-h{
    background:linear-gradient(90deg,#1B3B47 0%,#2E5B69 55%,#6E9DAC 100%);
  }
}
.rc-h .en{font-family:var(--display);font-size:clamp(19px,2.1vw,26px);letter-spacing:.07em;line-height:1.1}
.rc-h .ja{font-size:10.5px;letter-spacing:.3em;color:#4A5559}

.rc-body{
  padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,30px) clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);flex:1;
}
.rc-m{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rc-m b{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.4vw,52px);letter-spacing:.02em;line-height:1}
.rc-m small{font-size:12px;letter-spacing:.1em;color:#5A6468}
.rc-a{
  margin-top:auto;padding-top:clamp(13px,1.6vw,18px);border-top:1px solid var(--tide);
  font-size:12.5px;letter-spacing:.06em;color:#3C4447;
}
.rc-a b{font-weight:400;font-family:var(--display);font-size:17px;letter-spacing:.03em}
.rates-row .rate-card:first-child .rc-a b{color:#1B3B47}
.rates-row .rate-card:last-child .rc-a b{color:#4E7C8C}

/* 一棟貸し：上の表に密着、横並び */
.rate-card.whole{border-top:1px solid var(--tide);border-bottom:1px solid var(--tide)}
.rate-card.whole .rc-body{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,50px);flex-wrap:wrap;
}

.ph-note{margin-top:10px;font-size:11px;letter-spacing:.08em;color:#8A9296}
.rate-note{margin-top:26px;font-size:11.5px;line-height:2.1;color:#5A6468;letter-spacing:.04em}

@media(max-width:820px){
  .rates-row{grid-template-columns:1fr}
  .rates-row .rate-card + .rate-card{border-left:0;border-top:1px solid var(--tide)}
  .rate-card.whole .rc-body{flex-direction:column;align-items:flex-start}
}

/* ─── 周辺 ─── */
.loc{background:var(--wash)}
.loc-wrap{position:relative;margin-top:clamp(10px,2vw,20px)}
.loc-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,36vw,470px);
  gap:clamp(16px,2.2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px var(--pad) 10px;scroll-padding-left:var(--pad);scrollbar-width:none;-ms-overflow-style:none;
}
.loc-track::-webkit-scrollbar{display:none}.loc-card{scroll-snap-align:start}.loc-card .ph,.loc-card .ph-real{aspect-ratio:3/2}.loc-card .ph{background:var(--tide)}.loc-card .ph::before{opacity:.5}.loc-card h4{font-family:var(--mincho);font-size:15.5px;letter-spacing:.1em;margin-top:18px}.loc-card .meta{font-size:11px;letter-spacing:.14em;color:#5A6468;margin-top:7px}.loc-card p{font-size:13px;line-height:2.1;margin-top:11px;color:#40484B}
.loc-ctrl{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:clamp(18px,2.4vw,28px) var(--pad) 0}
.loc-count{font-family:var(--display);font-size:13px;letter-spacing:.16em;color:#5A6468;margin-right:auto;white-space:nowrap}.loc-count b{font-weight:400;color:var(--ink)}.loc-bar{flex:0 1 180px;height:1px;background:var(--tide);position:relative;margin-right:10px}.loc-bar i{position:absolute;left:0;top:0;height:1px;background:var(--ink);width:25%;transition:left .4s,width .4s}.loc-nav{width:48px;height:48px;border-radius:50%;border:1px solid #9AA4A8;background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s,opacity .3s}.loc-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}.loc-nav:hover{background:var(--deep);color:#fff;border-color:var(--deep)}.loc-nav[disabled]{opacity:.3;pointer-events:none}
@media(max-width:560px){.loc-ctrl{gap:9px}.loc-bar{flex-basis:120px;margin-right:4px}.loc-nav{width:42px;height:42px}}

/* ─── お知らせ ─── */
.news-list{border-top:1px solid var(--tide)}.news-row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,34px);padding:clamp(18px,2.4vw,26px) 4px;border-bottom:1px solid var(--tide);transition:padding-left .4s cubic-bezier(.3,.8,.3,1)}.news-row:hover{padding-left:14px}.news-row time{font-family:var(--display);font-size:14px;letter-spacing:.1em;color:var(--mist)}
.news-row .cat{border:1px solid #6F7A7F;background:#fff;padding:4px 12px;font-size:11px;font-weight:500;letter-spacing:.14em;color:#1F272B;white-space:nowrap;line-height:1.45}.news-row p{font-size:14px;letter-spacing:.06em;line-height:1.8}.news-row .arw{color:var(--mist);font-size:13px;transition:transform .35s,color .35s}.news-row:hover .arw{transform:translateX(5px);color:var(--deep)}.news-more{margin-top:34px;text-align:center}.news-more a{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.16em;border-bottom:1px solid var(--ink);padding-bottom:6px}.news-more a span{transition:transform .35s}.news-more a:hover span{transform:translateX(6px)}
@media(max-width:700px){.news-row{grid-template-columns:auto 1fr;row-gap:8px;padding-block:18px}.news-row p{grid-column:1/-1}.news-row .arw{display:none}}

/* ─── アクセス ─── */
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px)}
.acc .ph{aspect-ratio:4/3}
.acc dl{border-top:1px solid var(--tide)}
.acc dl > div{display:grid;grid-template-columns:8em 1fr;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--tide);font-size:13px;letter-spacing:.05em;line-height:1.9}
.acc dt{color:#5A6468;white-space:nowrap}
@media(max-width:560px){.acc dl > div{grid-template-columns:1fr;gap:4px}}
.route-h{font-size:10px;letter-spacing:.32em;color:#4A5559;font-weight:500;margin-bottom:16px}
.route{margin-top:32px;padding-top:26px;border-top:1px solid var(--tide);font-size:13px;line-height:2.2}
.route b{font-weight:400;font-family:var(--mincho);letter-spacing:.08em}
@media(max-width:820px){.acc-grid{grid-template-columns:1fr}}

/* ─── Google Map ─── */
.seen-map-embed{overflow:hidden;aspect-ratio:4/3;background:var(--tide)}
.seen-map-embed iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.78) contrast(.98)}
.seen-map-unavailable{display:grid;place-items:center;min-height:260px;background:var(--wash);color:var(--mist);font-size:12px;letter-spacing:.1em}

/* Legacy footer styles are superseded by site-chrome.css.
.ft{background:var(--ink);color:#fff;padding:clamp(60px,8vw,100px) 0 40px}
.ft-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.14)}
.ft .mark{display:block;line-height:0}
.ft .mark-svg{width:180px;height:auto;display:block}
.ft .addr{margin-top:24px;font-size:12.5px;line-height:2.1;color:rgba(255,255,255,.6);letter-spacing:.05em}
.ft h5{font-size:10px;letter-spacing:.28em;color:rgba(255,255,255,.42);margin-bottom:20px}
.ft ul{list-style:none;font-size:13px;line-height:2.4;letter-spacing:.08em}
.ft ul a{color:rgba(255,255,255,.82)}
.ft ul a:hover{color:#fff}
.ft-btm{padding-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.42)}
	@media(max-width:820px){.ft-top{grid-template-columns:1fr}} */

/* 注記バッジ */
.memo{
  position:fixed;left:0;bottom:0;z-index:95;background:rgba(20,24,26,.82);color:#fff;
  font-size:10px;letter-spacing:.08em;padding:7px 14px;
}
@media(max-width:700px){.memo{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .sealine .line{width:100%}
  .sealine .lab{left:100%;transform:translateX(-100%)}
  .vmap .vmk span{width:18px;height:18px;opacity:.9}
  .vmap .vmk em{opacity:1}
}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}

/* ─── Refined release: stability, touch and keyboard improvements ─── */
html{scroll-padding-top:84px}
.hero-slide{backface-visibility:hidden}
.ph-real img{image-rendering:auto}
.seen-map-link .tag{transition:background .3s ease,color .3s ease}
.seen-map-link:hover .tag{background:var(--deep);color:#fff}
.room-link,.news-more a{transition:color .28s ease,border-color .28s ease}
.room-link:hover,.news-more a:hover{color:var(--deep);border-color:var(--deep)}
@media (hover:none){
  .room:hover .ph-real img{transform:none}
}
	@media (max-width:700px){
	  html{scroll-padding-top:72px}
	}


/* ─── v1.6.0: visual refresh requested for the SEEN top page ─── */
.hero-slide.dim::after{display:none}
.hero::after{background:linear-gradient(180deg,rgba(4,10,14,.18) 0%,rgba(4,10,14,.04) 34%,rgba(4,10,14,0) 58%,rgba(4,10,14,.16) 100%)}
.hero-place{display:inline-block;padding:6px 11px 6px 12px;background:rgba(8,20,24,.32);border-left:1px solid rgba(255,255,255,.82);border-radius:1px;color:#fff;font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.35);backdrop-filter:blur(5px)}
.hero.dimmed .hero-place{background:rgba(8,20,24,.40)}

.whole-villa-full{background:linear-gradient(90deg,#1B3B47 0%,#2E5B69 38%,#7BA7B5 70%,#C3DBE3 100%);color:#fff;margin-top:clamp(42px,6vw,88px)}
.whole-villa-callout{max-width:1240px;margin:0 auto;min-height:clamp(248px,27vw,360px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,7vw,110px);align-items:center;padding-block:clamp(44px,6vw,86px);background:transparent}
.whole-villa-callout h3{margin:0;font-family:var(--mincho);font-weight:400;font-size:clamp(34px,4.7vw,68px);line-height:1.28;letter-spacing:.13em}
.whole-villa-callout h3 span{display:block;margin-top:14px;font-family:var(--body);font-size:clamp(11px,1.1vw,14px);line-height:1.6;letter-spacing:.24em;color:rgba(255,255,255,.86)}
.whole-villa-callout>div:last-child{display:flex;align-items:flex-start;flex-direction:column;gap:26px}
.whole-villa-callout p{max-width:440px;font-family:var(--mincho);font-size:clamp(14px,1.4vw,17px);line-height:2.25;letter-spacing:.09em;color:#fff}
.whole-villa-link{font-size:12px;letter-spacing:.18em;color:#fff;border-color:rgba(255,255,255,.82)}
.rooms-tail{display:none}
.meal-price{margin-top:20px;padding-top:15px;border-top:1px solid var(--tide);font-size:12.5px;line-height:1.8;letter-spacing:.08em;color:#1B3B47}
.diagram-note{display:none}
.sealine{height:45px}
.sealine .ends{display:none}

@media(max-width:820px){.whole-villa-callout{grid-template-columns:1fr;gap:28px;min-height:0;padding-block:52px}.whole-villa-callout h3{font-size:clamp(30px,8.5vw,44px)}}


/* v1.6.3: whole-villa rate heading matches Deep Sea / Shallow Sea scale. */
.rate-card.whole .rc-h .ja{font-family:var(--mincho);font-size:clamp(19px,2.1vw,26px);letter-spacing:.07em;line-height:1.1;color:#fff}

/* ===== v1.7.1 TOP調整 ===== */
/* Nothing, Fine：位置マーカーの円を早く・太く、SEENを太く建物の近くへ */
.vmap.play .vmk span{animation:vrip2 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes vrip2{0%{width:8px;height:8px;opacity:1}70%{opacity:.85}100%{width:70px;height:70px;opacity:0}}
.vmk span{border-width:2.2px}
.vmk em{left:40px;bottom:-8px;font-weight:500;font-size:17px;letter-spacing:.28em;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.45)}
.vmap.play .vmk em{animation:vfin 1s ease .3s forwards}
/* Nothing, Fine：本文を一段落ずつ流れるように表示 */
.concept-grid .reveal p{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
.concept-grid .reveal.in p{opacity:1;transform:none}
.concept-grid .reveal.in p:nth-child(2){transition-delay:.35s}
.concept-grid .reveal.in p:nth-child(3){transition-delay:.7s}
.concept-grid .reveal.in p:nth-child(4){transition-delay:1.05s}
@media(prefers-reduced-motion:reduce){.concept-grid .reveal p{opacity:1;transform:none;transition:none}}
/* 小見出し（日本語）の視認性 */
.sec-head .jp{font-size:clamp(13px,1.1vw,14.5px);letter-spacing:.18em;color:#2F383C}
.room-body .ja,.col-h .ja{font-size:12.5px;letter-spacing:.22em;color:#4A5559}
/* 4reasons：番号を目立たせる */
.zig .txt .rno{display:flex;align-items:center;gap:16px;color:var(--deep);font-size:clamp(38px,4.4vw,58px)}
.zig .txt .rno::after{content:'';width:clamp(40px,5vw,72px);height:1px;background:var(--deep);opacity:.45}
/* 一棟貸し：帯をやめて、客室カードと同じテイストに */
.villa-whole{max-width:1240px;margin:clamp(42px,6vw,88px) auto 0;padding-inline:var(--pad)}
.villa-whole-in{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;border-top:1px solid var(--tide);border-bottom:1px solid var(--tide)}
.villa-whole-ph{aspect-ratio:16/10;overflow:hidden}
.villa-whole-ph img{width:100%;height:100%;object-fit:cover}
.villa-whole-txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.villa-whole .vw-en{font-family:var(--display);font-size:13px;letter-spacing:.32em;color:#4A5559}
.villa-whole h3{font-family:var(--mincho);font-weight:400;font-size:clamp(28px,3.2vw,40px);letter-spacing:.14em;margin-top:10px;line-height:1.3}
.villa-whole .vw-spec{font-size:12.5px;letter-spacing:.22em;color:#4A5559;margin-top:12px}
.villa-whole .vw-copy{font-family:var(--mincho);font-size:15px;line-height:2.2;letter-spacing:.06em;margin-top:22px;max-width:26em}
.villa-whole .room-link{align-self:flex-start;margin-top:26px}
@media(max-width:820px){.villa-whole-in{grid-template-columns:1fr}.villa-whole{padding-inline:0}.villa-whole-in{border-top:0}.villa-whole-txt{padding-inline:var(--pad)}}
.concept-grid .reveal p{word-break:auto-phrase}

/* v1.7.1 rev2 TOP ------------------------------------------------------- */
/* 地名ラベル：帯なし・文字大きめ・影（パターンA） */
.hero-place{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;padding:0!important;border-radius:0!important;font-size:clamp(11px,1vw,13px)!important;letter-spacing:.32em!important;font-weight:500!important;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 24px rgba(0,0,0,.55)!important}
.hero.dimmed .hero-place{background:none!important}
@media(max-width:560px){.hero-place{font-size:11px!important;letter-spacing:.24em!important}}
/* 4reasons 番号：濃紺→淡い青グレー */
.zig .txt .rno{color:#8FA7AF}
.zig .txt .rno::after{background:#8FA7AF;opacity:.7}
/* 一棟貸し：写真が列幅を超えて文字に重なる不具合を修正 */
.villa-whole-in>*{min-width:0}
.villa-whole-ph{aspect-ratio:auto;position:relative;min-height:clamp(260px,30vw,440px)}
.villa-whole-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.villa-whole-ph{min-height:0;aspect-ratio:16/10}}

/* hero 2枚目（明るい写真）：上部を薄く暗くして文字を読みやすく */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,10,14,.62) 0%,rgba(4,10,14,.42) 26%,rgba(4,10,14,.12) 46%,rgba(4,10,14,0) 60%);opacity:0;transition:opacity 1.2s ease}
.hero.dimmed::before{opacity:1}
.hero-in{z-index:3}
.hero.dimmed h1,.hero.dimmed .hero-place{text-shadow:0 1px 3px rgba(0,8,14,.6),0 0 22px rgba(0,8,14,.5)!important}
.hero::before{z-index:3}.hero-in{z-index:4}

/* 一棟貸し：2つの客室カードの下に、両方をつなぐ横長カードとして配置 */
.room-whole{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.rw-join{grid-column:1/-1;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(20px,2.6vw,30px) 0}
.rw-join::before{content:'';position:absolute;left:25%;right:25%;top:50%;height:1px;background:var(--mist);opacity:.55}
.rw-join span{position:relative;justify-self:center;background:var(--paper);padding:0 16px;font-family:var(--display);font-size:clamp(13px,1.2vw,15px);letter-spacing:.2em;color:#4A5559}
.rw-join i{position:relative;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--mist);border-radius:50%;background:var(--paper);font-style:normal;font-size:14px;color:var(--deep)}
.rw-ph{aspect-ratio:16/11}
.rw-body{display:flex;flex-direction:column;justify-content:center}
.rw-body .room-link{align-self:flex-start}
@media(max-width:820px){
  .room-whole{grid-template-columns:1fr}
  .rw-join::before{left:16px;right:16px}
  .rw-join{grid-template-columns:auto auto auto;justify-content:center;gap:0}
  .rw-join span{padding:0 10px}
}

/* 一棟貸し：つなぎ線をやめ、2枚のカードをまたぐ低い横長カードに */
.rw-join{display:none}
.room-whole{grid-template-columns:1fr 1fr;align-items:stretch}
.rw-ph{aspect-ratio:auto;height:clamp(220px,21vw,300px)}
.rw-ph img{object-position:50% 62%}
.rw-body{padding-block:clamp(20px,2.4vw,32px)}
.rw-body .lead{margin-top:12px}
.rw-body .room-link{margin-top:16px}
@media(max-width:820px){.rw-ph{height:auto;aspect-ratio:16/9}}
/* スマホ：TOPヒーローは縦長の専用写真で全画面 */
@media(max-width:700px){.hero-slide{background-image:var(--sp-bg)!important;background-position:50% 50%!important}}
@media(max-width:700px){.hero::before{opacity:1}.hero h1,.hero .hero-place{text-shadow:0 1px 3px rgba(0,8,14,.6),0 0 22px rgba(0,8,14,.5)!important}}

/* ===== v1.7.1 rev4 TOP ===== */
/* SP：一棟貸しカードを1列に（後勝ちの2列指定を上書き） */
@media(max-width:820px){.room-whole{grid-template-columns:1fr}.rw-ph{min-width:0;aspect-ratio:16/10;height:auto}}
/* SP：キャッチコピーを大きく、地名表示は非表示 */
@media(max-width:700px){
  .hero h1{font-size:clamp(28px,8.4vw,36px)!important;letter-spacing:.14em!important}
  .hero h1 .sm{font-size:.46em!important;letter-spacing:.28em!important}
  .hero-place{display:none!important}
}
/* Nothing, Fine：円とSEENの線を細く */
.vmk span{border-width:1.2px}
.vmk em{font-weight:400}
/* SP：4reasonsは全て「写真→文章」の順に */
@media(max-width:820px){.zig .ph-real,.zig:nth-child(even) .ph-real,.zig .ph{order:0!important}.zig .txt{order:1!important}}
/* News：カテゴリー枠は文字幅に */
.news-row .cat{justify-self:start;width:max-content}
/* Information：ACCESSの上の線を削除 */
.route{border-top:0;padding-top:0}
/* Nothing, Fine：写真上のSEEN表記を削除（円のみ） */
.vmk em{display:none}
/* SP：Deep Sea｜Shallow Sea を横並び、一棟貸しはその下 */
@media(max-width:700px){.rates-row{grid-template-columns:1fr 1fr!important}.rates-row .rate-card + .rate-card{border-left:1px solid var(--tide)!important;border-top:0!important}.rates-row .rc-h{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;min-height:58px;justify-content:center}.rates-row .rc-h .en{font-size:17px}.rates-row .rc-h .ja{font-size:9.5px;letter-spacing:.18em}.rates-row .rc-body{padding:18px 14px}.rates-row .rc-m{flex-direction:column;gap:4px}.rates-row .rc-m b{font-size:27px}.rates-row .rc-m small{font-size:10.5px}.rates-row .rc-a{font-size:10.5px;line-height:1.6}}
/* SP：キャッチを少し小さく／上部の暗さを最小限に（文字の影で可読性を確保） */
@media(max-width:700px){.hero h1{font-size:clamp(24px,7vw,30px)!important}.hero::before{background:radial-gradient(ellipse 85% 22% at 22% 22%,rgba(4,10,14,.32) 0%,rgba(4,10,14,0) 100%)!important}.hero h1,.hero h1 .sm{text-shadow:0 0 2px rgba(0,8,14,.55),0 1px 8px rgba(0,8,14,.55),0 0 28px rgba(0,8,14,.45)!important}}
/* SP：2枚目は写真の横幅をすべて見せる（上部は天井色で延長） */
@media(max-width:700px){.hero-slide:nth-child(2){background-size:100% auto!important;background-position:50% 100%!important;background-repeat:no-repeat!important;background-color:#443e32!important}}
/* SP：空室ボタンはすりガラス＋白枠（写真上のみ。バー表示時は濃紺） */
.room-whole h3{font-family:var(--mincho);letter-spacing:.14em}
/* 一棟貸し：Deep Seaの下に、客室カードと同じ大きさで配置 */
.room-whole{grid-column:auto;display:block}
.room-whole .rw-ph{aspect-ratio:4/3;height:auto;min-height:0}
.room-whole .rw-ph img{object-position:50% 60%}
.room-whole .rw-body{display:block;padding-block:clamp(24px,3vw,40px)}
.room-whole .rw-body .lead{margin-top:20px}.room-whole .rw-body .room-link{margin-top:28px}
.rooms::after{content:"";background:var(--paper)}
@media(max-width:820px){.rooms::after{display:none}}

/* News：カテゴリーは枠・背景なしの文字のみ */
.news-row .cat{border:0;background:none;padding:0;color:#4E5A5E;font-weight:400}
.news-row .cat{min-width:5em}

/* News：カテゴリーは枠あり・背景なし */
.news-row .cat{border:1px solid #6F7A7F;background:none;padding:4px 12px;color:#1F272B;min-width:6.6em;box-sizing:border-box;text-align:center}

/* SP：4 Reasons の項目間に余白（区切りを明確に） */
@media(max-width:820px){.zig:not(:last-child){margin-bottom:64px}}

/* hero：切り替え時に一瞬暗くなる現象の修正。
   前の写真は不透明のまま下に残し、次の写真だけを上でフェードインさせる */
.hero-slide.is-out{z-index:1!important;opacity:1!important}

/* Nearby：枚数の数字は表示しない */
.loc-count{display:none!important}
.loc-bar{margin-right:auto}

/* hero：2枚目の上部の暗がりを写真そのものに付ける（写真と同時にフェードさせ、切替時の「一瞬暗くなる」を解消） */
.hero::before,.hero.dimmed::before{display:none!important}
.hero-slide.dim::after{display:block!important;content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,10,14,.62) 0%,rgba(4,10,14,.42) 26%,rgba(4,10,14,.12) 46%,rgba(4,10,14,0) 60%)}

/* SP：上部の陰影は従来どおり .hero::before（常時表示の薄い陰影）を使う */
@media(max-width:700px){.hero::before{display:block!important;opacity:1!important}.hero-slide.dim::after{display:none!important}}
/* 写真の重なり順をスライド群の中で完結させる（前の写真が下に回った瞬間に .hero::after の陰影が掛かり暗くなるのを防ぐ） */
.hero-slides{z-index:2;isolation:isolate}
.rw-body h3+.rw-catch{margin:8px 0 6px}
/* SP：Conceptの本文は折りたたみ／客室カードの間に余白／4 Reasons前の余白を他と同じに */
.concept-toggle{display:none}
#feature .sec-head{padding-top:0!important}
@media(max-width:700px){
  .concept .concept-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
  .concept .concept-more>p:first-child{margin-top:0}
  .concept .concept-more{overflow:hidden}
  .concept .concept-more>div{min-height:0}
  .concept .concept-more.open{grid-template-rows:1fr}
  .concept-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:0 0 4px;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;font-size:12px;letter-spacing:.14em;color:var(--ink);cursor:pointer}
  .concept-toggle::after{content:'＋';font-size:11px}
  .concept-toggle[aria-expanded="true"]::after{content:'－'}
  .rooms{gap:40px;background:none}
}
.concept .concept-grid .reveal>p{margin-bottom:1.9em}
@media(max-width:700px){.concept-toggle{margin-top:0}}