:root { color-scheme: light; --mark-color:#fff; --logo-width:119px; --brand-space:20px; --links-space:10px; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; }
body { background:#e5e7dc; font-family:Arial, "Hiragino Kaku Gothic ProN", sans-serif; }
.scene { position:relative; width:100%; min-height:100vh; min-height:100svh; height:100dvh; overflow:hidden; }
.photo { position:absolute; inset:0; display:block; }
.photo-link { position:absolute; inset:0; display:block; }
.photo-link:focus-visible { outline:2px solid var(--mark-color); outline-offset:-4px; }
.photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--desktop-position,center); }
.identity { position:absolute; top:0; left:7%; display:flex; align-items:flex-end; height:75px; color:var(--mark-color); }
.property-caption { position:absolute; right:calc(32px + env(safe-area-inset-right,0px)); bottom:calc(32px + env(safe-area-inset-bottom,0px)); max-width:calc(100% - 64px); min-height:44px; color:var(--mark-color); text-align:right; text-decoration:none; }
.property-caption:focus-visible { outline:1px solid var(--mark-color); outline-offset:4px; }
.property-caption p { margin:0; overflow-wrap:anywhere; }
.property-name { display:block; width:max-content; margin-left:auto; white-space:nowrap; font-size:16px; font-weight:400; line-height:1.25; letter-spacing:.06em; }
.property-caption .property-location { width:max-content; margin-left:auto; margin-top:2px; white-space:nowrap; font-size:12px; line-height:1.3; letter-spacing:0; }
/* Bの動き: logo fade, separator drop, then five individual icon pops. */
@keyframes b-logo-reveal {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes b-line-drop {
  from { transform:translateY(-100%); }
  to { transform:translateY(0); }
}
@keyframes b-icon-pop {
  0% { opacity:0; transform:translateY(var(--icon-y,0px)) scale(.45); }
  60% { opacity:1; transform:translateY(var(--icon-y,0px)) scale(1.16); }
  100% { opacity:1; transform:translateY(var(--icon-y,0px)) scale(1); }
}
/* Tint the envelope after the final icon has appeared, retaining its outline. */
@keyframes mail-tint {
  from { opacity:0; }
  to { opacity:.30; }
}
/* C動作: the mobile logo and links rise together from below the screen. */
@keyframes c-rise {
  from { transform:translateY(calc(100% + 64px + env(safe-area-inset-bottom,0px))); }
  to { transform:translateY(0); }
}
/* D動作: the line grows upward from the viewport bottom to the logo top. */
@keyframes d-line-rise {
  from { transform:scaleY(0); }
  to { transform:scaleY(1); }
}
.brand { position:relative; display:flex; align-items:flex-end; height:100%; margin:0; padding:0 var(--brand-space) 7px 0; border-right:1px solid transparent; }
.brand::after { content:""; position:absolute; top:0; bottom:0; right:-1px; width:1px; background:currentColor; }
.brand img { display:block; width:var(--logo-width); height:auto; }
.links { display:flex; align-items:center; gap:var(--links-space); padding:0 0 0 15px; margin-bottom:-8px; }
.links a { display:flex; flex-shrink:0; align-items:center; justify-content:center; min-width:30px; height:44px; color:inherit; text-decoration:none; transition:opacity .2s ease; }
.links a:hover { opacity:.65; }
.links a:focus-visible { outline:1px solid #fff; outline-offset:3px; }
.links img { display:block; height:auto; }
.mail { position:relative; display:block; width:15px; }
.mail::before { content:""; position:absolute; inset:10% 8.54% 11.67% 7.32%; background:#fff; opacity:.30; pointer-events:none; }
.mail img { position:relative; width:100%; height:auto; }
.instagram { width:15px; }
.x svg { display:block; width:14px; height:14px; }
.tecture img { width:18px; }
.note span { --icon-y:-1px; font-size:20px; font-weight:800; letter-spacing:0; line-height:1; transform:translateY(-1px); }
@media(min-width:768px) and (prefers-reduced-motion:no-preference) {
  .identity[data-motion="b"] .brand img { animation:b-logo-reveal 1.35s ease-in-out .15s both; }
  .identity[data-motion="b"] .brand::after { animation:b-line-drop .72s cubic-bezier(.22,1,.36,1) 1.5s both; }
  .identity[data-motion="b"] .links a:nth-child(1) { --icon-delay:2.28s; }
  .identity[data-motion="b"] .links a:nth-child(2) { --icon-delay:2.52s; }
  .identity[data-motion="b"] .links a:nth-child(3) { --icon-delay:2.76s; }
  .identity[data-motion="b"] .links a:nth-child(4) { --icon-delay:3s; }
  .identity[data-motion="b"] .links a:nth-child(5) { --icon-delay:3.24s; }
  .identity[data-motion="b"] .links a > * { animation:b-icon-pop .4s ease-out var(--icon-delay) both; transform-origin:center; }
  .identity[data-motion="b"] .mail::before { animation:mail-tint .8s ease 3.84s both; }
}
@media(max-width:767px) {
  :root { --logo-width:clamp(100.7px,29.45vw,136.8px); --brand-space:16px; --links-space:6px; --mobile-lift:5vh; --mobile-bottom:calc(16px + var(--mobile-lift) + env(safe-area-inset-bottom,0px)); --mobile-logo-height:calc(var(--logo-width) * 57 / 646); }
  .identity { top:auto; bottom:var(--mobile-bottom); left:4%; right:4%; height:84px; }
  .property-caption { top:calc(24px + env(safe-area-inset-top,0px)); right:calc(4% + env(safe-area-inset-right,0px)); bottom:auto; max-width:88%; }
  .property-name { font-size:12px; letter-spacing:.03em; }
  .property-caption .property-location { margin-top:0; font-size:10px; letter-spacing:0; }
  .photo img { object-position:var(--mobile-position,center); }
  .brand { padding-bottom:0; flex-shrink:0; }
  .brand::after { top:auto; bottom:calc(0px - var(--mobile-bottom)); height:calc(var(--mobile-bottom) + var(--mobile-logo-height)); transform-origin:center bottom; pointer-events:none; }
  .links { flex:1; min-width:0; padding-left:10px; margin-bottom:0; }
  .links a { flex:1; min-width:0; max-width:40px; align-items:flex-end; }
  .mail, .instagram { width:13.3px; }
  .x svg { width:13.3px; height:13.3px; }
  .tecture img { width:16px; }
  .note span { --icon-y:0px; font-size:17.1px; transform:none; }
}
@supports(height:100dvh) {
  @media(max-width:767px) { :root { --mobile-lift:5dvh; } }
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference) {
  .identity[data-mobile-motion="c"] { animation:c-rise 1.35s cubic-bezier(.22,1,.36,1) .15s both; }
  .identity[data-mobile-motion="d"] .brand img { animation:b-logo-reveal 1.35s ease-in-out .15s both; }
  .identity[data-mobile-motion="d"] .brand::after { animation:d-line-rise .72s cubic-bezier(.22,1,.36,1) 1.5s both; }
  .identity[data-mobile-motion="d"] .links a:nth-child(1) { --icon-delay:2.28s; }
  .identity[data-mobile-motion="d"] .links a:nth-child(2) { --icon-delay:2.52s; }
  .identity[data-mobile-motion="d"] .links a:nth-child(3) { --icon-delay:2.76s; }
  .identity[data-mobile-motion="d"] .links a:nth-child(4) { --icon-delay:3s; }
  .identity[data-mobile-motion="d"] .links a:nth-child(5) { --icon-delay:3.24s; }
  .identity[data-mobile-motion="d"] .links a > * { animation:b-icon-pop .4s ease-out var(--icon-delay) both; transform-origin:center; }
  .identity[data-mobile-motion="d"] .mail::before { animation:mail-tint .8s ease 3.84s both; }
}
@media(max-width:359px) {
  :root { --brand-space:12px; --links-space:4px; }
  .links { padding-left:6px; }
}
@media(prefers-reduced-motion:reduce) { .links a { transition:none; } }

/* The photograph and original identity remain beneath one quiet, warm veil. */
body.contact-is-open { overflow:hidden; }
.contact-dialog {
  --contact-ink:#393d38;
  --contact-muted:#686c63;
  position:fixed; inset:0; margin:0; padding:0;
  width:100%; max-width:none; height:100%; height:100dvh; max-height:none;
  border:0; color:var(--contact-ink);
  background:linear-gradient(90deg,rgba(247,246,241,.08),rgba(247,246,241,.67) 28%,rgba(247,246,241,.67) 72%,rgba(247,246,241,.08));
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#b5b6ac transparent;
}
.contact-dialog::backdrop { background:rgba(243,242,235,.9); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.contact-dialog[open] { animation:contact-reveal .4s ease both; }
.contact-dialog[open]::backdrop { animation:contact-reveal .4s ease both; }
@keyframes contact-reveal { from { opacity:0; } to { opacity:1; } }
.contact-close {
  position:fixed; z-index:2; top:calc(25px + env(safe-area-inset-top,0px)); right:calc(34px + env(safe-area-inset-right,0px));
  display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  padding:0; border:0; border-radius:50%; background:rgba(247,246,241,.96); color:var(--contact-ink);
  cursor:pointer;
}
.contact-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1; }
.contact-close:hover { background:#eaeae2; }
.contact-content { width:min(640px,calc(100% - 96px)); margin:0 auto; padding:101px 0 76px; }
.contact-heading { margin-bottom:42px; }
.contact-eyebrow { margin:0 0 14px; font-size:11px; line-height:1.5; letter-spacing:.23em; }
.contact-heading h2 { margin:0 0 24px; font-size:19.2px; font-weight:400; line-height:1.5; letter-spacing:.15em; }
.contact-heading h2:focus, .contact-review h3:focus { outline:none; }
.contact-heading #contact-intro { margin:0; font-size:13px; line-height:2.1; letter-spacing:.05em; }
.contact-required-note { margin:0 0 22px; text-align:right; color:var(--contact-muted); font-size:10px; letter-spacing:.06em; }
.contact-required-note span, .contact-field label > span { color:#777458; }
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact-field { min-width:0; margin-bottom:28px; }
.contact-field label { display:block; margin-bottom:12px; font-size:12px; line-height:1.7; letter-spacing:.09em; }
.contact-field label > span { margin-left:6px; font-size:10px; }
.contact-field small { margin-left:8px; color:var(--contact-muted); font-size:10px; font-weight:400; }
.contact-field input, .contact-field select, .contact-field textarea {
  display:block; width:100%; min-width:0; min-height:46px; padding:11px 12px;
  border:0; border-bottom:1px solid #a8aaa0; border-radius:0;
  background:rgba(255,255,253,.42); color:var(--contact-ink); font:inherit; font-size:16px; line-height:1.6;
  transition:background .2s,border-color .2s;
}
.contact-field select { padding-right:30px; cursor:pointer; }
.contact-field textarea { resize:vertical; min-height:144px; }
.contact-field input::placeholder, .contact-field textarea::placeholder, .contact-field select:required:invalid { color:#777b72; opacity:1; font-size:12px; }
.contact-field select option { color:var(--contact-ink); font-size:16px; }
.contact-field select option[value=""] { color:#777b72; font-size:12px; }
.contact-field input:hover, .contact-field select:hover, .contact-field textarea:hover { background:rgba(255,255,253,.65); }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline:1px solid #6b7261; outline-offset:2px; background:rgba(255,255,253,.86); border-color:#6b7261; }
.contact-actions { display:flex; justify-content:center; margin-top:38px; }
.contact-primary {
  display:inline-flex; align-items:center; justify-content:space-between; gap:36px; min-height:54px; width:270px; max-width:100%; min-width:0;
  padding:16px 24px; border:1px solid #606958; border-radius:0; background:#606958; color:#fff;
  font:inherit; font-size:12px; line-height:1.6; letter-spacing:.1em; text-decoration:none; cursor:pointer; transition:background .2s;
}
.contact-primary:hover { background:#4d5845; }
.contact-primary > span { font-size:18px; line-height:1; }
.contact-dialog button:focus-visible, .contact-dialog a:focus-visible { outline:2px solid #444e3c; outline-offset:4px; }
.contact-footnote { margin:17px 0 0; color:var(--contact-muted); text-align:center; font-size:11px; line-height:1.9; letter-spacing:.02em; }
.contact-footnote a { color:inherit; text-underline-offset:4px; }
.contact-review h3 { margin:0 0 28px; font-size:16px; font-weight:400; letter-spacing:.1em; }
.contact-review dl { margin:0; }
.contact-review dt { margin:22px 0 8px; color:var(--contact-muted); font-size:11px; letter-spacing:.08em; }
.contact-review dd { margin:0; padding:0 0 18px; border-bottom:1px solid #c9cbc0; font-size:15px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.contact-review-note { margin-top:32px; font-size:12px; line-height:2; }
.contact-review-actions { align-items:center; gap:28px; }
.contact-back { min-height:44px; padding:10px 0; border:0; background:transparent; color:var(--contact-muted); font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:5px; cursor:pointer; }
.contact-dialog [hidden] { display:none !important; }
@media(max-width:767px) {
  .contact-dialog { background:rgba(247,246,241,.45); }
  .contact-dialog::backdrop { background:rgba(243,242,235,.86); }
  .contact-content { width:auto; margin:0 26px; padding:94px 0 calc(50px + env(safe-area-inset-bottom,0px)); }
  .contact-close { top:calc(12px + env(safe-area-inset-top,0px)); right:calc(13px + env(safe-area-inset-right,0px)); }
  .contact-heading { margin-bottom:30px; }
  .contact-heading h2 { font-size:17.6px; margin-bottom:20px; }
  .contact-heading #contact-intro { font-size:12px; }
  .contact-row { grid-template-columns:1fr; gap:0; }
  .contact-field { margin-bottom:24px; }
  .contact-field label { margin-bottom:9px; }
  .contact-review-actions { flex-direction:column-reverse; gap:18px; }
  .contact-footnote { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .contact-dialog[open], .contact-dialog[open]::backdrop { animation:none; }
  .contact-dialog input, .contact-dialog select, .contact-dialog textarea, .contact-primary { transition:none; }
}

/* Contact guidance and completion layout */
.contact-field-hint { margin:10px 0 0; color:var(--contact-muted); font-size:11px; line-height:1.9; letter-spacing:.02em; }
.contact-dialog.is-complete .contact-content { min-height:80svh; display:flex; flex-direction:column; justify-content:center; padding-top:72px; padding-bottom:72px; box-sizing:border-box; }
.contact-dialog.is-complete .contact-heading { margin-bottom:24px; text-align:center; }
.contact-dialog.is-complete .contact-heading h2,
.contact-dialog.is-complete #contact-intro { display:none; }
#contact-success { text-align:center; }
#contact-success h3 { font-size:15px; line-height:1.9; margin-bottom:22px; }
#contact-success .contact-review-note { margin:0; }
#contact-success .contact-actions { margin-top:36px; }
#contact-done { width:auto; min-width:160px; min-height:48px; padding:12px 22px; }

/* Discreet photo navigation; hit areas are larger than the visible dots. */
.photo-navigation { position:absolute; z-index:2; top:50%; right:calc(15px + env(safe-area-inset-right,0px)); transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; width:44px; max-height:calc(100svh - 180px); color:var(--mark-color); filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.photo-navigation button { display:flex; flex:none; align-items:center; justify-content:center; width:44px; padding:0; border:0; border-radius:0; background:transparent; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.photo-dots { position:relative; flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.photo-dots::-webkit-scrollbar { display:none; }
.photo-dot { height:24px; }
.photo-dot::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.55; transition:opacity .2s, transform .2s; }
.photo-dot[aria-current="true"]::before { opacity:1; transform:scale(1.7); }
.photo-navigation button:focus-visible { outline:1px solid currentColor; outline-offset:-5px; border-radius:4px; }
@media(hover:hover) { .photo-dot:hover::before { opacity:1; } }
.photo-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:767px) {
  .photo-navigation { left:calc(5px + env(safe-area-inset-left,0px)); right:auto; top:46%; max-height:calc(100svh - 240px); }
}
@media(prefers-reduced-motion:reduce) { .photo-dot::before { transition:none; } }

/* Keep the contact action last, with a larger mobile touch target. */
@media(max-width:767px) {
  .links { position:relative; }
  .links::before { content:""; position:absolute; inset:-10px -6px -14px; }
  .links a { position:relative; z-index:1; }
  .links #contact-open { flex:0 0 44px; min-width:44px; max-width:44px; }
  .links #contact-open::after { content:""; position:absolute; inset:-8px 0 -12px; }
}

/* Dots greet the visitor, then retreat beyond the same edge. */
.photo-navigation { opacity:0; transform:translate(calc(100% + 32px + env(safe-area-inset-right,0px)),-50%); pointer-events:none; transition:transform 1.5s cubic-bezier(.45,0,.55,1), opacity 1.35s ease-in-out .15s; }
.photo-navigation.is-visible, .photo-navigation:has(:focus-visible) { opacity:1; transform:translate(0,-50%); pointer-events:auto; transition:transform .8s cubic-bezier(.25,.1,.25,1), opacity .65s ease; }
.photo-reveal { position:absolute; z-index:1; top:50%; right:env(safe-area-inset-right,0px); width:64px; height:min(408px,calc(100svh - 180px)); transform:translateY(-50%); padding:0; border:0; background:transparent; color:var(--mark-color); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.photo-reveal:focus-visible { outline:1px solid currentColor; outline-offset:-8px; }
body.contact-is-open .photo-navigation, body.contact-is-open .photo-reveal { visibility:hidden; }
@media(max-width:767px) {
  .photo-navigation { transform:translate(calc(-100% - 24px - env(safe-area-inset-left,0px)),-50%); }
  .photo-navigation.is-visible, .photo-navigation:has(:focus-visible) { transform:translate(0,-50%); }
  .photo-reveal { left:env(safe-area-inset-left,0px); right:auto; top:46%; width:54px; height:min(360px,calc(100svh - 240px)); }
}
@media(prefers-reduced-motion:reduce) { .photo-navigation { transition:none; } }

#contact-form .contact-primary { justify-content:center; gap:16px; text-align:center; }