@charset "utf-8";
/* ==========================================================================
   HOUSE IN UNAZAWA — COMPASS 奥多摩別荘LP

   Design source : 00_COMPASS_奥多摩別荘LP.ai  (artboard スマホ 375 x 6769.41pt)
   Unit mapping  : 1pt = 1px. 1rem = 10 design px, so every value below is the
                   measured design pixel divided by 10. The root font-size is
                   derived from the viewport, which scales the whole fixed-canvas
                   layout proportionally on any phone width instead of leaving
                   the 375px design stranded in the middle of a 430px screen.
   PC            : the design has no desktop artboard, so the SP layout is
                   capped and centred (方針 P1 in 開発指示書 第6章).
   ========================================================================== */

:root {
  --w: min(100vw, 430px);
  --bar-h: 8rem;                 /* 固定CTA 80px */

  --ink: #464646;
  --accent: #c8c387;
  --rule: #d1d1d1;
  --paper: #fff;
  --surround: #2a2a28;           /* PC で SP レイアウトの左右に出る地色 */

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  font-size: calc(var(--w) / 37.5);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] は display 指定に簡単に負ける。実際、完了画面の「販売図面PDF」
   ボタン（未確定のためHTML側で hidden）が display:inline-flex に上書きされて
   露出していた。リンク先が空のボタンを本番で見せないための保険。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surround);
  color: var(--ink);
  font-family: var(--mincho);
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, p, dl, dd, dt, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.page {
  width: var(--w);
  margin-inline: auto;
  background: var(--paper);
  overflow: hidden;              /* 画像のブリードで横スクロールを出さない */
}

/* --------------------------------------------------------------- typography */
/* 実測: 本文 15px / 行送り27px / 両端揃え / 左13px 右11px */
.body {
  font-size: 1.5rem;
  line-height: 2.7rem;
  text-align: justify;
  line-break: strict;
  padding-inline: 1.3rem 1.1rem;
}
.body--gap { margin-top: 2.6rem; }

/* One <span> per design line. Illustrator justifies each line on its own and
   compresses one that would overflow; CSS justification only expands, so left
   to wrap naturally two paragraphs spilled onto an extra line. The negative
   tracking exists purely to guarantee no line wraps (worst case is 25 full-width
   chars = 375px in a 351px measure) — text-align-last then distributes the slack
   back out, so the rendered spacing is set by the measure, exactly as in the .ai.
   .ragged marks lines that are a forced break or a paragraph end: those are
   left-aligned in the design, not justified. */
.body > span {
  display: block;
  text-align: justify;
  text-align-last: justify;
  letter-spacing: -.07em;
}
.body > span.ragged {
  text-align-last: left;
  letter-spacing: var(--ls, .038em);
  white-space: nowrap;
}
/* Illustrator compresses a line rather than let it overflow the measure. One
   line in the design needs it: 25 full-width characters in a 351px measure.
   Measured ink width in the .ai render is 346px = 13.84px per character. */
.body > span.ragged--tight { letter-spacing: -.0495em; }

/* 実測: セクション英字ラベル 11.664px / #c8c387 / 字送りあり */
.label {
  font-size: 1.1664rem;
  line-height: 1;
  letter-spacing: .076em;
  color: var(--accent);
}
.label--left   { padding-left: 2.6rem; }
.label--center { text-align: center; text-indent: .076em; }
.label--light  { color: var(--accent); }

/* 実測: 見出し 23px / 行送り32.5px */
.title {
  font-size: 2.3rem;
  line-height: 3.25rem;
  font-weight: 400;
  letter-spacing: .08em;
}
/* 短い中央寄せ見出し（物件概要）は原本の字送りが広い */
.title--wide { letter-spacing: .152em; text-indent: .152em; }
.title--left   { padding-left: 2.4rem; }
.title--center { text-align: center; padding-left: 1.35rem; }
.title--wide   { padding-left: 0; }
.title--light  { color: #fff; }

/* ============================================================== FV / hero */
/* 実装指示:「FVは動画になります」「ふわっと文字が現れる仕様。上の文字が先に
   出て、下は少しずれて出てくる」。デザイン上の1画面は 694.5px = 写真614.5 +
   固定CTA 80。写真高さを svh から固定CTA分を引くことで、どの端末でも固定CTA
   がちょうど写真の下端に接する（＝デザインと同じ見え方になる）。 */
.fv {
  position: relative;
  height: 100svh;
  min-height: 56rem;
  background: #0b1112;
}
.fv__media {
  position: absolute;
  inset: 0 0 var(--bar-h);
  overflow: hidden;
}
.fv__media img,
.fv__media video { width: 100%; height: 100%; object-fit: cover; }
/* 原本には写真の下半分に暗幕がかかっている（白のキャッチを読ませるため）。
   .ai のレンダリングから帯ごとの輝度比を測って α を再現。 */
.fv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      transparent 47%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.46) 65%,
      rgba(0,0,0,.52) 75%, rgba(0,0,0,.56) 85%, rgba(0,0,0,.62) 100%);
}

.fv__copy {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--bar-h) + 3.1rem);
  color: #fff;
}
.fv__catch {
  font-size: 2.6705rem;
  line-height: 3.55rem;
  font-weight: 400;
  letter-spacing: .081em;
  padding-left: 2.32rem;
}
.fv__sub {
  font-size: 1.3108rem;
  line-height: 2.05rem;
  letter-spacing: .081em;
  padding-left: 2.55rem;
  margin-top: 2.12rem;
}
.fv__mark {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .052em;
  padding-left: 2.73rem;
  margin-top: 1.5rem;
}

/* ふわっと: 上から順に時間差で出す（stagger は scripts.js が --d を付与） */
[data-fade] {
  opacity: 0;
  transform: translateY(1.6rem);
}
.js-ready [data-fade] {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease) var(--d, 0s),
              transform .9s var(--ease) var(--d, 0s);
}

/* ================================================================ sections */
.sec { position: relative; display: flow-root; }

/* Every media box declares its design aspect ratio. Without it a lazy image has
   no intrinsic size until it loads, so the box collapses to zero height and the
   whole page reflows on scroll (and the render comes out ~1300px short).
   object-fit also absorbs the ~2% aspect drift between the placed frame in the
   .ai and the source photo, so the box stays exactly the measured size. */
.media > img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
}
.media--full       { margin-top: 3.72rem; --ar: 375 / 281.3; }
.media--location   { --ar: 329 / 381.5; }
.media--life       { --ar: 337 / 253; }
.media--overview   { --ar: 295.5 / 325.5; }
.media--plan-site  { --ar: 278.5 / 197; }
.media--plan-floor { --ar: 322.5 / 197.5; }
.media--access     { --ar: 348.5 / 422; }

/* ---------------------------------------------------------------- CONCEPT */
.sec--concept > .label { padding-top: 6.94rem; }
.sec--concept > .title { margin-top: .72rem; }
.sec--concept > .body  { margin-top: 3.04rem; }

/* --------------------------------------------------------------- LOCATION */
/* 画像は左右に白余白（x23–352, w329）。ラベルと見出しは画像上に白で中央配置 */
.media--location { position: relative; margin: 7.58rem 2.3rem 0; }
.media--location::after,
.media--access::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.media--location::after {
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.33) 18%, rgba(0,0,0,.30) 32%, transparent 45%);
}
.media--access::after {
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.39) 25%, transparent 45%);
}
.overlay { position: absolute; left: 0; right: 0; z-index: 1; }
.overlay--center { top: 3.94rem; text-align: center; }
.overlay--center .title { margin-top: .92rem; }
.sec--location > .body { margin-top: 3.02rem; }

/* ------------------------------------------------ ARCHITECTURE & DESIGN */
.sec--arch > .label { padding-top: 9.42rem; }
.sec--arch > .title { margin-top: .72rem; }
.sec--arch > .body  { margin-top: 3.87rem; }

/* ずらし配置は意図的な非対称。中央揃えに"直さない"こと */
.gallery { position: relative; height: 79.2rem; margin-top: 4.77rem; }
.gallery .g { position: absolute; }
.gallery .g img { width: 100%; height: 100%; object-fit: cover; }
.g--terrace  { left: 0;      top: 0;      width: 29rem;    height: 19.45rem; }
.g--interior { left: 8.4rem; top: 22rem;  width: 29.1rem;  height: 18.75rem; }
.g--exterior { left: 1.35rem; top: 43.3rem; width: 16.75rem; height: 12.7rem; }
.g--bath     { left: 19.4rem; top: 43.3rem; width: 16.75rem; height: 12.7rem; }
.g--night    { left: 3.5rem; top: 58.85rem; width: 30.5rem; height: 20.35rem; }

/* -------------------------------------------------------------- LIFESTYLE */
.sec--life > .label { padding-top: 10.22rem; }
.sec--life > .title { margin-top: .72rem; }
.media--life { margin: 3.62rem 1.9rem 0; }
.duo { position: relative; margin-top: 2.75rem; height: 12.25rem; }
.duo .g { position: absolute; top: 0; height: 100%; }
.duo .g img { width: 100%; height: 100%; object-fit: cover; }
.duo--life .g:first-child { left: 1.9rem;  width: 16.35rem; }
.duo--life .g:last-child  { left: 19.4rem; width: 16.2rem; }
.sec--life > .body { margin-top: 3.57rem; }
.sec--life > .body--gap { margin-top: 2.65rem; }

/* ------------------------------------------------------ PROPERTY OVERVIEW */
.sec--overview > .label { padding-top: 10.32rem; }
.sec--overview > .title { margin-top: .72rem; }
.media--overview { margin: 2.77rem 3.95rem 0; }

/* 実測: 表 x30–345 / 行送り50.3px / 各行下に1px罫線 #d1d1d1 */
.spec { margin: 2.72rem 3rem 0; }
.spec__row {
  display: flex;
  align-items: flex-start;
  height: 5.03rem;
  padding-top: 1.83rem;
  border-bottom: 1px solid var(--rule);
}
.spec dt {
  flex: 0 0 auto;
  width: 13.097rem;
  padding-left: .845rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .122em;
}
.spec dd {
  font-size: 1.4rem;
  line-height: 1;
  padding-top: .1rem;
  letter-spacing: .119em;
  margin-left: 0;
}

/* ------------------------------------------- FLOOR PLANS & DRAWINGS */
.sec--plans > .label { padding-top: 11.51rem; }
.sec--plans > .title { margin-top: .77rem; }
.media--plan-site  { margin: 3.67rem 4.8rem 0; }
.media--plan-floor { margin: 5.43rem 2.6rem 0; }
.caption {
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  letter-spacing: .156em;
  text-indent: .156em;
  margin-top: 1.27rem;
}
.media--plan-floor .caption { margin-top: 2.67rem; }
.sec--plans > .body { margin-top: 5rem; }

/* ----------------------------------------------------------------- ACCESS */
/* 画像は左端ブリード（x0–348.5）。見出しは画像上に白・左揃え */
.media--access { position: relative; margin: 9.68rem 2.65rem 0 0; }
.overlay--left { top: 4.6rem; padding-left: 2.26rem; }
.label--access { font-size: 1.1rem; padding-left: 0; }
.title--access {
  font-size: 1.8rem;
  line-height: 2.937rem;
  letter-spacing: .012em;
  padding-left: 0;
  margin-top: .39rem;
}
.sec--access > .body { margin-top: 2.52rem; }
.sec--access > .body--gap { margin-top: 2.6rem; }

/* ======================================================= CONTACT CTA BAND */
.band {
  display: flow-root;
  margin-top: 6.83rem;
  padding: 2.72rem 0 2.62rem;
  background: var(--accent);
  text-align: center;
}
.band__lead {
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: .022em;
  text-indent: .022em;
}
.band__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23.55rem;
  height: 4.3rem;
  margin: 1.41rem auto 0;
  background: var(--ink);
  color: #fff;
  padding-right: 1.75rem;
  font-size: 1.6rem;
  letter-spacing: .041em;
  text-indent: .041em;
  transition: opacity .4s var(--ease);
}
.band__btn .chev {
  position: absolute;
  right: 1.5rem;
  width: .8rem;
  height: 1.4rem;
}

/* ================================================================= FOOTER */
.footer {
  padding: 5.61rem 0 calc(4.71rem + var(--bar-h));
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.footer__mark {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .08em;
  text-indent: .08em;
}
.footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.38rem;
  font-size: .9rem;
  letter-spacing: .086em;
}
.footer__links a { transition: opacity .4s var(--ease); }
.footer__div {
  width: 1px;
  height: 1.7rem;
  margin: 0 2.6rem;
  background: rgba(255, 255, 255, .45);
}

/* ========================================================= FIXED CTA BAR */
/* レイヤー名「固定CTA」。デザイン上は写真直下（614.5–694.5）に描かれており、
   これは1画面目における固定バーの位置。 */
.ctabar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: var(--w);
  height: var(--bar-h);
  background: var(--paper);
  padding-right: 5.55rem;        /* ハンバーガー分 */
}
.ctabar__lead {
  padding-top: 1.35rem;
  padding-left: .9rem;
  font-size: 1.1664rem;
  line-height: 1.42rem;
  letter-spacing: .037em;
  text-indent: .037em;
  text-align: center;
}
.ctabar__btns {
  display: flex;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.23rem;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.2rem;
  height: 3.15rem;
  font-size: 1.1664rem;
  letter-spacing: .04em;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.btn--fill { background: var(--ink); color: #fff; }
.btn--line { border: 1px solid var(--ink); color: var(--ink); background: var(--paper); }

/* 実装指示:「こちらの三本線を押すと↑上のアコーディオンメニューが開く」 */
.burger {
  position: absolute;
  top: 0; right: 0;
  width: 5.55rem;
  height: var(--bar-h);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .56rem;
}
.burger span {
  display: block;
  width: 2.7rem;
  height: 1px;
  background: #ababab;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}

/* ========================================================= ACCORDION MENU */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: var(--w);
  margin-inline: auto;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; visibility: visible; }

.menu__bg {
  position: absolute;
  inset: 0;
  /* 実測: ページ平均輝度から逆算すると #464646 を α.82 で重ねた値と一致する。
     ブランドのインクカラーをそのまま幕に使っている。 */
  background: rgba(70, 70, 70, .82);
}

.menu__close {
  position: absolute;
  top: 2.45rem;
  right: 2.5rem;
  width: 2.45rem;
  height: 2.45rem;
  color: #fff;
}
.menu__close svg { width: 100%; height: 100%; }

.menu__list {
  position: absolute;
  top: 6.75rem;
  left: 3.73rem;
  right: 2rem;
}
.menu__list li + li { margin-top: 3.064rem; }
.menu__list a { display: block; }
.menu__list .en {
  display: block;
  font-size: 1.64246rem;
  line-height: 1;
  letter-spacing: .04em;
  transition: color .4s var(--ease);
}
.menu__list .ja {
  display: block;
  margin-top: .578rem;
  font-size: .90335rem;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--accent);
}
.menu__list li:nth-last-child(-n+2) .en { font-size: 1.73rem; }

body.is-locked { overflow: hidden; }

/* ============================================================ interaction */
/* ホバーはポインタ端末のみ。タッチでは :hover が張り付くため。 */
@media (hover: hover) {
  .btn--fill:hover  { background: #5c5c5c; }
  .btn--line:hover  { background: var(--ink); color: #fff; }
  .band__btn:hover  { opacity: .82; }
  .footer__links a:hover { opacity: .65; }
  .menu__list a:hover .en { color: var(--accent); }
}

.btn:active, .band__btn:active { opacity: .78; }

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-fade] { opacity: 1 !important; transform: none !important; }
  .js-ready [data-fade] { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}