@charset "UTF-8";
/* ==========================================================================
住まいリアルギャラリー LP — single stylesheet
Self-contained, matching the format of the client's own trial delivery:
the header, drawer, footer and mobile bar below are theirs, taken from
sumai-real-gallery-試し so the chrome matches what they have already
approved. Their placeholder sections are dropped — the class names collide
with ours — and our sections follow from 施設概要 onward.
========================================================================== */
/* ---------------------------------------------------------------------------
Chrome — from the client's trial delivery, unmodified apart from the type
--------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", Meiryo, sans-serif;
  color: #1a1a1a;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, p, address {
  margin: 0;
}

.wholewrapper {
  /* clip, not hidden. overflow-x: hidden computes overflow-y to auto, which
  makes this a scroll container — and 体感内容's sticky backdrop then sticks
  to it instead of the viewport, so the photograph stops partway down and
  the section finishes as flat brown. clip contains the overflow the same
  way without creating that container. hidden stays first as the fallback
  for browsers without clip, where the backdrop simply does not pin. */
  overflow-x: hidden;
  overflow-x: clip;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .wholewrapper {
    padding-bottom: 0;
  }
}
.js-reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal[data-anim=up] {
  transform: translateY(30px);
}

.js-reveal[data-anim=left] {
  transform: translateX(-40px);
}

.js-reveal[data-anim=fade] {
  transform: translateY(-30px);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  transition: box-shadow 0.3s;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

@media (min-width: 768px) {
  .site-header__inner {
    padding: 8px 24px;
  }
}
.site-header__logo img {
  height: 32px;
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 44px;
  }
}
.site-header__nav {
  display: none;
}

@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    align-items: center;
  }
}
.site-header__nav a {
  position: relative;
  padding: 0 20px;
  font-size: 13px;
  color: #1a1a1a;
  transition: opacity 0.2s;
}

.site-header__nav a:hover {
  opacity: 0.6;
}

.site-header__nav a + a {
  border-left: 1px solid #e5e7eb;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .site-header__right {
    gap: 8px;
  }
}
.site-header__sns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__sns img {
  width: 20px;
  height: 20px;
}

.site-header__sns a {
  display: flex;
  transition: opacity 0.2s;
}

.site-header__sns a:hover {
  opacity: 0.6;
}

.site-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-header__menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
}

.site-header__menu-icon span {
  display: block;
  height: 2px;
  background: #2c5a7c;
  border-radius: 1px;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer.is-open .drawer__overlay {
  opacity: 1;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 380px;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 24px;
}

@media (min-width: 768px) {
  .drawer__panel {
    max-width: 440px;
    padding: 32px;
  }
}
.drawer__close {
  position: relative;
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-bottom: 24px;
  background: none;
  border: 0;
  cursor: pointer;
}

.drawer__close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2c5a7c;
}

.drawer__close span:first-child {
  transform: rotate(45deg);
}

.drawer__close span:last-child {
  transform: rotate(-45deg);
}

.drawer__groups > li {
  border-bottom: 1px solid #e5e7eb;
}

.drawer__groups details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #2c5a7c;
  cursor: pointer;
  list-style: none;
}

.drawer__groups details summary::-webkit-details-marker {
  display: none;
}

.drawer__groups details summary a {
  color: inherit;
  pointer-events: none;
}

.drawer__groups details summary::after {
  content: "+";
  flex-shrink: 0;
  margin-left: 12px;
  font-size: 18px;
  font-weight: 400;
  color: #2c5a7c;
}

.drawer__groups details[open] summary::after {
  content: "−";
}

.drawer__thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 4px 12px;
}

.drawer__thumbs a {
  display: block;
}

.drawer__thumbs img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 6px;
}

.drawer__thumbs span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #1a1a1a;
}

.drawer__pref-list {
  padding: 0 4px 16px 12px;
}

.drawer__pref-list li {
  border-top: 1px solid #e5e7eb;
}

.drawer__pref-list a {
  display: block;
  padding: 12px 4px;
  font-size: 14px;
  color: #1a1a1a;
}

.drawer__single a {
  display: block;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #2c5a7c;
}

.drawer__buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.drawer__buttons li {
  flex: 1;
}

.drawer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1b3a6b;
  border: 1px solid #1b3a6b;
  border-radius: 4px;
}

.drawer__button img {
  width: 16px;
  height: 16px;
}

.drawer__button--fill {
  color: #fff;
  background: #1b3a6b;
}

.drawer__circles {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.drawer__circles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #1a1a1a;
}

.drawer__circles img {
  width: 14px;
  height: 14px;
}

.drawer__movie {
  margin-top: 20px;
  text-align: center;
}

.drawer__movie a {
  font-size: 13px;
  color: #2c5a7c;
  text-decoration: underline;
}

.drawer__sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.drawer__sns img {
  width: 20px;
  height: 20px;
}

.eyebrow-script, .contact__eyebrow, .experience__eyebrow, .facility__eyebrow {
  text-align: center;
  font-family: "Pinyon Script", cursive;
  font-size: 34px;
  color: #c8a84e;
  line-height: 1;
}

@media (min-width: 768px) {
  .eyebrow-script, .contact__eyebrow, .experience__eyebrow, .facility__eyebrow {
    font-size: 44px;
  }
}
.tag-chip, .contact__tag, .experience__tag, .facility__tag {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.tag-chip span, .contact__tag span, .experience__tag span, .facility__tag span {
  display: inline-block;
  padding: 4px 20px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
}

.site-footer {
  background: #737270;
  color: #fff;
  padding: 40px 24px;
}

@media (min-width: 768px) {
  .site-footer {
    padding: 56px 24px;
  }
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 48px;
    text-align: left;
  }
}
@media (min-width: 768px) {
  .site-footer__brand {
    flex-shrink: 0;
  }
}
.site-footer__catch {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.site-footer__logo {
  margin: 16px auto 0;
  width: 85%;
  max-width: 300px;
}

@media (min-width: 768px) {
  .site-footer__logo {
    margin: 16px 0 0;
    width: 240px;
  }
}
.site-footer__address {
  margin-top: 20px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.site-footer__sns {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .site-footer__sns {
    justify-content: flex-start;
  }
}
.site-footer__sns img {
  height: 21px;
  width: auto;
}

.site-footer__sns a {
  display: flex;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.site-footer__sns a:hover {
  opacity: 1;
}

.site-footer__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 768px) {
  .site-footer__side {
    align-items: flex-end;
    flex: 1;
  }
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}

@media (min-width: 768px) {
  .site-footer__nav {
    justify-content: flex-end;
  }
}
.site-footer__nav a {
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.site-footer__nav a:hover {
  opacity: 1;
}

.site-footer__tel {
  display: block;
  width: 80%;
  max-width: 330px;
  padding: 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

@media (min-width: 768px) {
  .site-footer__tel {
    width: auto;
    min-width: 260px;
  }
}
.site-footer__tel p {
  font-size: 13px;
  line-height: 1;
}

.site-footer__tel span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 27px;
  line-height: 1;
}

@media (min-width: 768px) {
  .site-footer__tel span {
    font-size: 30px;
  }
}
.site-footer__tel img {
  width: 15px;
  height: 17px;
}

.site-footer__copyright {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

.sp-fixed-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .sp-fixed-nav {
    display: none;
  }
}
.sp-fixed-nav__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 8px;
  background: none;
  border: 0;
  font-size: 10px;
  color: #2c5a7c;
  cursor: pointer;
}

.sp-fixed-nav__item img {
  width: 24px;
  height: 24px;
}

.sp-fixed-nav__menu-icon--close {
  display: none;
}

.sp-fixed-nav__item--menu.is-active .sp-fixed-nav__menu-icon--open {
  display: none;
}

.sp-fixed-nav__item--menu.is-active .sp-fixed-nav__menu-icon--close {
  display: block;
}

/* ---------------------------------------------------------------------------
Page sections — ours, from the pc_B案 Figma frame
--------------------------------------------------------------------------- */
/* ==========================================================================
住まいリアルギャラリー LP — page styles
Header and footer are the site's shared components and are styled by the
common stylesheets, so nothing for them is repeated here.
Values come from the pc_B案 Figma frame, which is drawn on a 1500px canvas
with a 1200px content column.
========================================================================== */
:root {
  --brand-brown: #897040;
  /* 茶色 — rules, script headings, icons */
  --brand-brown-deep: #936f48;
  /* 体感内容 ground */
  --brand-beige: #f3f1ee;
  /* ベージュ — 施設概要 ground */
  --brand-sand: #ebe4d7;
  /* highlighted table column */
  --brand-gray: #d9d9d9;
  /* グレー — table rules */
  --brand-gold: #dcb671;
  /* primary CTA */
  --brand-ink: #333;
  /* secondary CTA, small print */
  --brand-logo: #221714;
  /* logotype */
  --lp-content: 1200px;
}

/* --------------------------------------------------------------- base ---- */
.lp {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", Meiryo, sans-serif;
  color: #000;
  line-height: 1.6;
}

.lp img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp__inner {
  max-width: var(--lp-content);
  margin: 0 auto;
  padding: 0 24px;
}

.lp__script {
  font-family: Corinthia, cursive;
  font-size: 62px;
  line-height: 1.6;
  color: var(--brand-brown);
  text-align: center;
  margin: 0;
}

.lp__script--light {
  color: #fff;
}

/* rule–label–rule mark, used by 施設概要 / 体感内容 / 来場予約 */
.lp__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
}

.lp__label-text {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
}

.lp__label-rule {
  display: flex;
  align-items: center;
  width: 93px;
  flex: none;
}

.lp__label-rule::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand-brown);
  flex: none;
}

.lp__label-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--brand-brown);
}

.lp__label-rule--right {
  flex-direction: row-reverse;
}

.lp__label--light .lp__label-rule::before,
.lp__label--light .lp__label-rule::after {
  background: #fff;
}

.lp__label--light .lp__label-text {
  color: #fff;
}

.lp__heading {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
  margin: 40px 0 0;
}

.lp__heading--light {
  color: #fff;
}

/* --------------------------------------------------------------- hero ---- */
.hero {
  display: flex;
}

.hero__grid {
  width: 69.333%;
  /* 1040 of 1500 */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero__cell {
  position: relative;
  /* the load-in veil is ::after on this */
  aspect-ratio: 520 / 350;
  /* photos butt together, no gap */
  overflow: hidden;
}

/* Oversized and shifted up inside the overflow-hidden cell, leaving ~8% slack
above and below for the scroll-linked inner pan (data-parallax-depth). */
.hero__cell img {
  width: 100%;
  height: 116%;
  position: relative;
  top: -8%;
  object-fit: cover;
}

.hero__panel {
  width: 30.667%;
  /* 460 of 1500 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Supplied as artwork in the real condensed face, which no webfont matched —
Oswald stood in here until it arrived and read 6.8% narrow on Gallery. */
.hero__logo {
  width: 100%;
  max-width: 240px;
  /* the design's logotype block is 239.5 wide */
  margin: 0;
}

.hero__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* The artwork is cut into four strips — Sumai / Real / Gallery / by
SEKISUIHEIM — at the middle of the transparent gaps between lines, so the
stacked strips are the original pixel for pixel and each strip doubles as
the mask its word rises through (see the animation section). Spans, not
divs: the CMS rewrites a div inside a p. */
.hero__logo-part {
  display: block;
}

/* -------------------------------------------------------------- intro ---- */
.intro {
  background: #fff;
  padding: 100px 0;
}

.intro__inner {
  text-align: center;
}

.intro__title {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  margin: 0;
}

.intro__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 20px 0;
}

.intro__sep span {
  background: var(--brand-brown);
}

.intro__sep-line {
  width: 100px;
  height: 1px;
  border-radius: 40px;
}

.intro__sep-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.intro__body {
  font-size: 18px;
  letter-spacing: .1em;
  line-height: 2.4;
  margin: 0;
}

/* ----------------------------------------------------------- facility ---- */
.facility {
  background: var(--brand-beige);
  padding: 100px 0;
}

.facility__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.facility__row {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  margin-top: 40px;
}

/* The photo yields, not the table: the table is pinned at 810 (see below), so
inside the 1152px content row something must give 48px or the wrap scrolls.
overflow-x lives in the stacked-layout media query — up here the table always
fits, and an overflow box would turn the cell entrance offsets into a
phantom scrollbar. */
.facility__photo {
  width: 330px;
  flex: 0 1 auto;
  min-width: 0;
}

/* 横に溢れるので tabindex="0" を付けてキーボードでも送れるようにしている。
焦点が当たったことが分かるように、他の操作部と同じ輪郭を出す。 */
.facility__table-wrap {
  flex: 1 0 auto;
}

.facility__table-wrap:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* Pinned to the design's 810 rather than allowed to flex: any in-between width
lands a line one glyph over and orphans it. */
.facility__table {
  width: 810px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 190fr 310fr 310fr;
}

.facility__cell {
  padding: 10px 20px;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.facility__cell--head {
  justify-content: center;
  text-align: center;
}

/* Every interior rule is drawn by exactly one cell — right and bottom only,
with the header row supplying the line above the first data row. Two cells
each drawing 1px doubles the seam to 2px against 1px outer edges, which is
what this avoids. */
.facility__cell {
  border: 0 solid var(--brand-gray);
}

.facility__cell--label {
  gap: 10px;
  background: #fff;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.facility__cell--ours {
  background: var(--brand-sand);
  border-right-width: 1px;
  border-bottom-width: 1px;
  font-weight: 500;
}

.facility__cell--theirs {
  background: #fff;
  border-bottom-width: 1px;
}

.facility__cell--spacer {
  background: none;
  border-bottom-width: 1px;
}

.facility__head-ours {
  background: var(--brand-sand);
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  font-weight: 500;
}

.facility__head-theirs {
  background: #fff;
  border-bottom-width: 1px;
}

.facility__icon {
  width: 32px;
  height: 32px;
  flex: none;
}

.facility__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
}

.facility__note-rule {
  height: 1px;
  flex: 1;
  background: var(--brand-brown);
}

.facility__note-text {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
  margin: 0;
  flex: none;
}

/* ------------------------------------------------------------ collage ---- */
.collage {
  background: #fff;
}

/* The canvas is the design's own 1500 and stops there. Left to grow with the
viewport it kept scaling: at 1728 it stood 1465 tall, taller than the window
and larger than any other section, and the four photographs drifted apart
because every gap between them is a percentage of that canvas too. */
.collage__canvas {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  aspect-ratio: 1500 / 1272;
}

.collage__item {
  position: absolute;
  overflow: hidden;
}

.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The band still runs edge to edge once the canvas is capped — it is meant to
bleed, and stopping it at 1500 would leave a thin strip of page either side.
.wholewrapper is overflow-x: clip, so the 100vw cannot open a scrollbar. */
.collage__item--band {
  left: 50%;
  top: 0;
  width: 100vw;
  transform: translateX(-50%);
  height: 31.45%;
}

.collage__item--large {
  left: 10%;
  top: 39.31%;
  width: 46.67%;
  height: 36.71%;
}

.collage__item--tall {
  left: 74%;
  top: 29.87%;
  width: 20%;
  height: 35.38%;
}

.collage__item--small {
  left: 62%;
  top: 69.97%;
  width: 28%;
  height: 22.17%;
}

/* --------------------------------------------------------- experience ---- */
.experience {
  position: relative;
  background: var(--brand-brown-deep);
}

/* The backdrop stays put while the cards scroll over it.
Not background-attachment: fixed — iOS Safari sizes that to the document and
makes it jump. Not a sticky layer either: sticky can only stay pinned for
the section height minus its own, so on a section this tall it released
about two thirds down and the rest of it finished as flat brown.
Instead the layer spans the whole section and the photograph inside it is
fixed; clip-path on the parent makes it the containing block for that fixed
child, so the photograph is clipped to the section and pinned for all of it. */
.experience__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0);
}

.experience__backdrop img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.experience__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* No negative margin now: the backdrop is out of flow, so the content simply
sits on top of it. */
.experience__content {
  position: relative;
  padding: 100px 0;
}

.experience__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.experience__cards {
  max-width: 1260px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  /* 5% not 7.94%: the supplied design frames show the text column starting
  much closer to the card edge, and the wider column is what lets the
  headings break in two lines the way the design does. */
  padding: 60px 5%;
}

/* the 40px 茶色 square notching the corner */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: var(--brand-brown);
}

.card__row {
  display: flex;
  gap: 8.49%;
}

.card__text {
  flex: 0 0 36.79%;
  padding-top: 80px;
}

.card__eyebrow {
  font-family: Corinthia, cursive;
  font-size: 28px;
  line-height: 1.6;
  color: var(--brand-brown);
  margin: 0;
}

/* 25px, not the 28px this started at: the design's headings are longer than
the copy first built here, and 28 wrapped 実際に建てる大きさを"体感!" onto four
lines. 25 is the largest size that still breaks two-and-two as drawn. */
.card__title {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
  margin: 10px 0 0;
  padding-bottom: 20px;
  position: relative;
}

/* the underline lives in ::after so the reveal can draw it left to right */
.card__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand-brown);
}

.card__body {
  font-size: 16px;
  line-height: 2;
  margin: 40px 0 0;
}

.card__media {
  flex: 0 0 54.72%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 580 / 392;
  overflow: hidden;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  /* faded-out slides still stack above the active one and would swallow
  the pointer — hidden slides take no events */
  pointer-events: none;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.card__caption {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  padding-left: 20px;
}

.card__caption-rule {
  width: 1px;
  height: 49px;
  flex: none;
  background: var(--brand-brown);
}

.card__caption-text {
  font-size: 18px;
  letter-spacing: .1em;
  line-height: 1.6;
  margin: 0;
  padding-top: 20px;
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 44px;
}

.carousel__arrow {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-brown);
  color: #ededea;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s;
}

.carousel__arrow:hover {
  opacity: .8;
}

.carousel__arrow svg {
  width: 16px;
  height: 16px;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.carousel__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gray);
  cursor: pointer;
  transition: background .3s;
}

.carousel__dot.is-active {
  background: var(--brand-brown);
}

/* ------------------------------------------------------------ contact ---- */
.contact {
  background: #fff;
  padding: 80px 0;
}

/* 1248 = the design's 1200 column plus the 24px gutters. The shared 1200 max
leaves 1152, which shrinks the three cards from the drawn 347 to 330. */
.contact .lp__inner {
  max-width: 1248px;
}

.contact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 一覧から探す／地図から探す — 選択中は65px・墨地に金の下帯、非選択は60px・
白地に罫線。下端で揃う。見出しから選択中タブの上端まで55px（部品の上余白
40 + 部品内のずれ15）。 */
.finder__tabs {
  display: flex;
  align-items: flex-end;
  max-width: 920px;
  margin: 55px auto 0;
}

.finder__tab {
  flex: 1;
  height: 60px;
  padding: 0;
  border: 1px solid var(--brand-ink);
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  cursor: pointer;
  position: relative;
}

/* Hover tint is instant, and only where there is a real pointer. A fade here
also ran on tab switches, where the text colour flips at once — white on a
light ground, or black on ink when a hovered tab lost selection from the
keyboard. State changes are instant; the gold band carries the motion. */
@media (hover: hover) {
  .finder__tab:not(.is-active):hover {
    background: var(--brand-beige);
  }
}
.finder__tab.is-active {
  height: 65px;
  background: var(--brand-ink);
  color: #fff;
  cursor: default;
}

/* The design's gold band: the tab's bottom 5px, across its full width (it
covers the 1px border there). Drawn out from the centre on the tab being
chosen; the previous tab's band goes at once. */
.finder__tab::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 5px;
  background: var(--brand-gold);
  transform: scaleX(0);
}

.finder__tab.is-active::after {
  transform: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* first draw waits for the tabs to scroll in */
.js .finder__tabs.reveal:not(.is-visible) .finder__tab.is-active::after {
  transform: scaleX(0);
}

/* ink, not gold: gold on the white ground is 1.9:1, under the 3:1 a focus ring needs */
.finder__tab:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.finder__panel {
  margin-top: 40px;
}

.finder__panel[hidden] {
  display: none;
}

/* 都道府県ごとのまとまり — ピン＋県名の見出しの下に3列のカード */
.pref + .pref {
  margin-top: 60px;
}

/* The rule under the name is a pseudo-element rather than a border so it can
draw out from the pin (see the animation section); 6px of padding = the
design's 5 plus the 1px line. */
.pref__name {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 6px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
}

.pref__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand-ink);
}

/* The pin and its shadow are separate so the pin can drop onto the shadow:
the body is the SVG, the shadow the ::after ellipse beneath it. Together
they are the design's 18x30 icon. */
/* 押すともう一度落ちる（JS）。飾りなので操作要素にはせず、合図はカーソルだけ */
.pref__pin {
  position: relative;
  flex: none;
  width: 18px;
  height: 30px;
  cursor: pointer;
}

.pref__pin img {
  display: block;
  width: 18px;
  height: 26px;
}

/* 着地の輪。既定は透明で、アニメーションのときだけ見える */
.pref__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 20px;
  height: 7px;
  margin-left: -10px;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.pref__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 11px;
  height: 3px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--brand-gold);
  opacity: .7;
}

.pref__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
  align-items: start;
  margin-top: 40px;
}

.site {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

/* The grey ground is the design's own mask colour, and what shows until a
photograph arrives. */
.site__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 347 / 200;
  overflow: hidden;
  background: var(--brand-gray);
}

.site__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site__photo--soon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.site__soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  letter-spacing: .05em;
  line-height: 1.4;
  color: #fff;
  z-index: 1;
}

/* the mask the label rises through (animation section); plain blocks without JS */
.site__soon-mask, .site__soon-mask > span {
  display: block;
}

/* 名称と住所は8px。カード自体の gap 24 の外に置くため、ひとつにまとめる */
.site__info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site__names {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--brand-ink);
}

.site__brand {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  margin: 0;
}

.site__name {
  font-size: 24px;
  letter-spacing: .05em;
  line-height: 1.4;
  margin: 4px 0 0;
}

.site__address {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

/* 住所 = 「地図で見る」。JS が座標のあるカードにだけ付ける。見た目は住所の
まま、前に小さな金のピンと、茶の細い下線で押せることを示す。 */
/* vertical-align: top — sitting on the baseline, the inline-flex box added a
pixel to the address line and made those cards 1px taller than the rest */
.site__maplink {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: rgba(137, 112, 64, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.site__maplink:hover {
  text-decoration-color: var(--brand-brown);
}

.site__maplink:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

.site__maplink-pin {
  flex: none;
  width: 9px;
  height: 13px;
}

/* PCは横並び、モバイルは縦積み（メディアクエリで戻す） */
.site__actions {
  width: 100%;
  display: flex;
  gap: 24px;
}

.site__actions .site__btn {
  flex: 1;
}

.site__btn {
  position: relative;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: opacity .3s;
}

/* 触れたときの主役は右下の切り欠き（下のホバー用ブロック）。面全体は
ほんのわずかに沈むだけ。.9 は反応が大きすぎた */
.site__btn:hover {
  opacity: .96;
}

/* リンク先が未定のボタン（href なし）。触れたときの反応は出す：死んでいるように
見せないため。ただしカーソルは矢印のままにして、行き先がないことは示す。
押しても何も起きない（href が無いので遷移しない）。 */
.site__btn:not([href]) {
  cursor: default;
}

.site__btn--gold {
  background: var(--brand-gold);
  color: var(--brand-ink);
}

.site__btn--dark {
  background: var(--brand-ink);
  color: #fff;
}

/* 8px corner notch, inset 3px */
.site__btn::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
}

.site__btn--gold::after {
  border-bottom: 8px solid var(--brand-ink);
}

.site__btn--dark::after {
  border-bottom: 8px solid var(--brand-gold);
}

/* 下端の罫線 — ホバーで左から引かれる（下のホバー用ブロック）。
既定は scaleX(0) で見えない。金のボタンには墨、墨のボタンには金。 */
.site__btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-ink);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.site__btn--dark::before {
  background: var(--brand-gold);
}

/* 地図タブ。高さは明示が必要（Google Maps は親の高さを使う）。
地色は Google の読み込み前の色に合わせ、タイルが来るまでの白い抜けを防ぐ。 */
.finder__map {
  height: 600px;
  background: #e5e3df;
}

.finder__map.is-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ---- マーカー（OverlayView 上の HTML ボタン。JS が作る）----
外側のボタンは地図上の位置（JS が transform を書く）だけを持ち、動きは
すべて内側の span に付ける。重なりは南が手前（--mk-z）、ホバー・フォーカス
中と選択中はさらに手前。 */
.finder-mk {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--mk-z, 1);
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.finder-mk:hover, .finder-mk:focus-visible {
  z-index: 900;
}

.finder-mk.is-active {
  z-index: 1000;
}

.finder-mk:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* 指で押しやすいよう、タッチ端末では当たり判定を 44px に広げる */
@media (pointer: coarse) {
  .finder-mk::before {
    content: "";
    position: absolute;
    inset: -4px;
  }
}
.finder-mk__body {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
}

.finder-mk svg {
  display: block;
  width: 36px;
  height: 36px;
}

/* 選択中：金地に墨の家が下からせり上がる（外枠が上へ、中身は逆へ動いて、家の
絵は止まったまま金の面だけが上がる）。基準の側に transition を付けないので、
前に選ばれていたものは即座に茶に戻り、動くのはいつも一つだけ。 */
.finder-mk__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(100%);
}

.finder-mk__fill > span {
  display: block;
  transform: translateY(-100%);
}

.finder-mk.is-active .finder-mk__fill,
.finder-mk.is-active .finder-mk__fill > span {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 名前札：ホバーかキーボードのフォーカスで、見出しと同じ行マスクで立ち上がる。
離れたら即座に消える（基準側に transition なし）。選択中は吹き出しに名前が
出るので札は出さない。地図の上端近くでは札を下側に出す（is-flip、JS）。 */
.finder-mk__tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  overflow: hidden;
  padding: 3px 8px 4px;
  background: var(--brand-ink);
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.finder-mk__tag > span {
  display: block;
  transform: translateY(105%);
}

.finder-mk.is-flip .finder-mk__tag {
  bottom: auto;
  top: calc(100% + 6px);
}

@media (hover: hover) {
  .finder-mk:hover .finder-mk__tag {
    opacity: 1;
    transition: opacity .2s ease;
  }

  .finder-mk:hover .finder-mk__tag > span {
    transform: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.finder-mk:focus-visible .finder-mk__tag {
  opacity: 1;
  transition: opacity .2s ease;
}

.finder-mk:focus-visible .finder-mk__tag > span {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.finder-mk.is-active .finder-mk__tag {
  display: none;
}

/* ---- 吹き出し（OverlayView。JS が作る）----
外側 = 地図上の位置、anchor = 中央寄せ（固定）、box = 動く箱。
しっぽは箱の中にあるので、箱と一緒に現れて消える。 */
.finder-pop {
  position: absolute;
  left: 0;
  top: 0;
}

.finder-pop__anchor {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, -8px);
}

.finder-pop__box {
  position: relative;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
}

.finder-pop.is-open .finder-pop__box {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.05s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.finder-pop.is-closing .finder-pop__box {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease-in, transform .2s ease-in;
}

.finder-pop__tail {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

/* 物件名は見出しと同じ行マスクで、箱に少し遅れて立ち上がる */
.finder-pop .finder-iw__name {
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.finder-pop .finder-iw__name > span {
  display: block;
  transform: translateY(105%);
}

.finder-pop.is-open .finder-iw__name > span {
  transform: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}

.finder-iw {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 20px 16px;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", Meiryo, sans-serif;
  color: #000;
}

/* .finder-iw を前に付けて .lp img の height: auto に勝たせる */
.finder-iw .finder-iw__photo {
  flex: none;
  width: 148px;
  height: 99px;
  object-fit: cover;
  background: var(--brand-gray);
}

.finder-iw__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.finder-iw__brand {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
}

.finder-iw__name {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.4;
}

.finder-iw__body .site__btn {
  margin-top: 14px;
  height: 36px;
  font-size: 14px;
}

.finder-iw__route {
  align-self: center;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--brand-brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.finder-iw__route:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.finder-iw__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.finder-iw__close::before,
.finder-iw__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--brand-ink);
  transform: translate(-50%, -50%) rotate(45deg);
}

.finder-iw__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.finder-iw__close:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -4px;
}

/* 地図が狭いとき（スマホ：地図幅 − 32px ≒ 295px）。縦積みにすると 420px の
地図の大半を覆うので、写真を小さくして横並びのまま詰める。 */
.finder-pop.is-narrow .finder-iw {
  gap: 12px;
  padding: 16px 28px 14px 12px;
}

.finder-pop.is-narrow .finder-iw .finder-iw__photo {
  width: 88px;
  height: 59px;
}

/* 字間を詰めて SEKISUIHEIM Sumai Real Galley を1行に収める */
.finder-pop.is-narrow .finder-iw__brand {
  font-size: 10px;
  letter-spacing: 0;
}

.finder-pop.is-narrow .finder-iw__name {
  font-size: 15px;
}

.finder-pop.is-narrow .finder-iw__body .site__btn {
  margin-top: 10px;
  height: 34px;
  font-size: 13px;
  padding-left: 10px;
}

.finder-pop.is-narrow .finder-iw__route {
  margin-top: 8px;
  font-size: 11px;
}

/* ---- 初回表示：地図が浮かび上がり、マーカーが北から順に落ちる ----
都道府県見出しのピンと同じ着地の曲線。落差・つぶれ・間隔は変数で、スマホ
では小さく速くする（モバイルの動きは控えめに、という以前の指示どおり）。 */
.finder__map {
  --mk-fall: -20px;
  --mk-sx: 1.06;
  --mk-sy: .9;
  --mk-stagger: 45ms;
}

@keyframes marker-drop {
  0% {
    opacity: 0;
    transform: translateY(var(--mk-fall));
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(var(--mk-sx), var(--mk-sy));
    animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1);
  }
  75% {
    transform: translateY(-4px) scale(0.98, 1.03);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  88% {
    transform: translateY(0) scale(1.02, 0.98);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.js .finder__map .gm-style {
  opacity: 0;
  transition: opacity .6s ease;
}

.js .finder__map.is-ready .gm-style {
  opacity: 1;
}

.js .finder__map:not(.is-landed):not(.is-settled) .finder-mk__body {
  opacity: 0;
}

.js .finder__map.is-landed .finder-mk__body {
  transform-origin: 50% 100%;
  animation: marker-drop 0.7s calc(var(--mk-i, 0) * var(--mk-stagger)) both;
}

/* ---------------------------------------------------------- animation ---- */
/* Gated on .js, set by the page script. Without scripts nothing here applies
and the content is simply visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 2方向パララックス。transform はスクロールに連動して JS が更新する */
.js [data-parallax] [data-parallax-depth] {
  will-change: transform;
}

/* ヒーロー — 写真の上の白い幕が消えていき、写真自身は 1.03 からゆっくり
落ち着く。写真を透過させないのが要点：透明な要素は「表示された」と数えられ
ないので、写真をフェードさせるとスマホの主画像の計測が遅れる。幕なら写真は
最初の描画から不透明のまま。
幕が引き始めるのは is-ready（JS）が付いてから＝ロゴと1枚目の写真が用意
できてから。回線が遅いと、以前は写真の到着前に演出が終わっていた。
1.03 の一瞬の拡大は、まだ不透明な幕の下で起きるので見えない。 */
@keyframes hero-veil-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes hero-photo-settle {
  from {
    transform: scale(1.03);
  }
  to {
    transform: none;
  }
}
/* opacity のみ — 大きな PNG を動かすとデコード中にカクつく */
@keyframes hero-logo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.js .hero__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
}

.js .hero.is-ready .hero__cell::after {
  animation: hero-veil-out 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* forwards にしない：終わったあとの img の transform は、スクロールに連動する
インナーパララックス（JS のインラインスタイル）が書く */
.js .hero.is-ready .hero__cell img {
  animation: hero-photo-settle 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .hero.is-ready .hero__cell:nth-child(1)::after,
.js .hero.is-ready .hero__cell:nth-child(1) img {
  animation-delay: .1s;
}

.js .hero.is-ready .hero__cell:nth-child(2)::after,
.js .hero.is-ready .hero__cell:nth-child(2) img {
  animation-delay: .28s;
}

.js .hero.is-ready .hero__cell:nth-child(3)::after,
.js .hero.is-ready .hero__cell:nth-child(3) img {
  animation-delay: .46s;
}

.js .hero.is-ready .hero__cell:nth-child(4)::after,
.js .hero.is-ready .hero__cell:nth-child(4) img {
  animation-delay: .64s;
}

/* ロゴタイプ — 写真が出そろう頃に、Sumai・Real・Gallery の3語が見出しと
同じ行マスクで順に下から立ち上がり、最後に by SEKISUIHEIM が浮かび上がる。
各語は小さな切り出し画像なので、動かしてもデコードでカクつかない
（一枚の大きな PNG を動かしていた頃は不透明度だけにしていた）。 */
@keyframes hero-word-in {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}
/* 語は is-ready まで下に待機させておく（待機を base に置かないと、is-ready が
付いた瞬間に見えていた語が隠れてから立ち上がり、ちらつく） */
.js .hero__logo-part {
  overflow: hidden;
}

.js .hero__logo-part img {
  transform: translateY(105%);
}

.js .hero__logo-part--by img {
  transform: none;
  opacity: 0;
}

.js .hero.is-ready .hero__logo-part img {
  animation: hero-word-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js .hero.is-ready .hero__logo-part:nth-child(1) img {
  animation-delay: .7s;
}

.js .hero.is-ready .hero__logo-part:nth-child(2) img {
  animation-delay: .85s;
}

.js .hero.is-ready .hero__logo-part:nth-child(3) img {
  animation-delay: 1s;
}

.js .hero.is-ready .hero__logo-part--by img {
  animation: hero-logo-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.45s forwards;
}

/* 区切り線 — reveal コンテナの is-visible に合わせて中央から外へ広がる。
リード文の line–dot–line は中央のドットが先、ラベル罫線はテキスト側から
線が伸び、先端のドットが後から現れる。facility__note-rule はパララックスが
inline transform を持つため対象外。 */
.js .reveal .intro__sep-dot {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.js .reveal .intro__sep-line {
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.js .reveal .intro__sep-line:first-child {
  transform-origin: right center;
}

.js .reveal .intro__sep-line:last-child {
  transform-origin: left center;
}

.js .reveal.is-visible .intro__sep-dot {
  transform: scale(1);
}

.js .reveal.is-visible .intro__sep-line {
  transform: scaleX(1);
}

.js .reveal .lp__label-rule::after {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.js .reveal .lp__label-rule--right::after {
  transform-origin: left center;
}

.js .reveal .lp__label-rule::before {
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.js .reveal.is-visible .lp__label-rule::after {
  transform: scaleX(1);
}

.js .reveal.is-visible .lp__label-rule::before {
  transform: scale(1);
}

/* カードキャプションの縦罫 — カード出現に続いて上から下へ引かれる */
.js .reveal .card__caption-rule {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.js .reveal.is-visible .card__caption-rule {
  transform: scaleY(1);
}

/* カード見出しの下線 — カード出現に続いて左から右へ引かれる */
.js .reveal .card__title::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.js .reveal.is-visible .card__title::after {
  transform: scaleX(1);
}

/* 都道府県の見出し — ピンが上から落ちて着地し（接地で少しつぶれ、一度だけ
跳ねる。影は着地に合わせて広がる）、続いて下の罫線がピンの側から右へ
引かれる。見出し自体は持ち上げず不透明度だけにして、動きはピンと罫線に
任せる。区間ごとの easing で、落下は加速、跳ね返りは減速にしている。 */
/* 落ちるあいだ少し傾いて、着地でまっすぐに戻る（落ちてきた感じが出る） */
@keyframes pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-24px) rotate(-11deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  52% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1.08, 0.88);
    animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1);
  }
  70% {
    transform: translateY(-5px) rotate(2deg) scale(0.97, 1.04);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  84% {
    transform: translateY(0) rotate(0deg) scale(1.03, 0.96);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* 着地の瞬間、影から細い輪が静かに広がって消える。ごく控えめに：
いちばん濃いところで不透明度 .28、広がりも 1.1 倍までにとどめる */
@keyframes pin-ring {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  46% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: .28;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
/* 落下の逆再生。いったん沈み込んでから、上へ戻って消える。
触れたとき・押したとき・画面から外れたときは、まずこれで「戻して」から
もう一度落とす。前は落下アニメーションが入れ替わった拍子に先頭へ飛び、
消えてから落ちてくるように見えていた。 */
@keyframes pin-undrop {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 0.5);
  }
  28% {
    opacity: 1;
    transform: translateY(0) scale(1.06, 0.92);
    animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px) rotate(-11deg);
  }
}
/* 影も一緒に引いていく */
@keyframes pin-shadow-out {
  0% {
    opacity: .7;
    transform: none;
  }
  28% {
    opacity: .7;
    transform: scaleX(1.12);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.2);
  }
}
@keyframes pin-shadow {
  0% {
    opacity: 0;
    transform: scaleX(0.2);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  52% {
    opacity: .7;
    transform: scaleX(1.2);
    animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1);
  }
  70% {
    opacity: .45;
    transform: scaleX(0.8);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  84% {
    opacity: .7;
    transform: scaleX(1.05);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: .7;
    transform: none;
  }
}
.js .pref__name.reveal {
  transform: none;
}

.js .reveal .pref__pin img {
  opacity: 0;
  transform-origin: 50% 100%;
}

.js .reveal .pref__pin::after {
  opacity: 0;
}

/* opacity: 1 をここで明示する。落下アニメーションの both による残り値に
頼っていると、ホバーの跳ね（opacity を持たない）に差し替わった瞬間に
既定の opacity: 0 へ戻り、ピンが消えてしまう。落下中の 0 → 1 は
アニメーション側が勝つので、フェードインはそのまま。 */
.js .reveal.is-visible .pref__pin img {
  opacity: 1;
  animation: pin-drop .85s .1s both;
}

.js .reveal.is-visible .pref__pin::after {
  animation: pin-shadow .85s .1s both;
}

.js .reveal.is-visible .pref__pin::before {
  animation: pin-ring .95s .1s both;
}

/* 戻している間（JS が is-out を付ける）。落下の規則（0,4,1）より詳細度を高く */
.js .reveal.is-visible .pref__pin.is-out img {
  animation: pin-undrop .42s both;
}

.js .reveal.is-visible .pref__pin.is-out::after {
  animation: pin-shadow-out .42s both;
}

.js .reveal.is-visible .pref__pin.is-out::before {
  animation: none;
}

/* 30秒ごとに、画面に入っているピンだけもう一度落とす（JS）。
同じアニメーションをやり直すには、いったん animation を外して再適用する。
影は擬似要素でインラインスタイルが使えないので、親のクラスで切る。
詳細度は上の is-visible の規則（0,4,1）より高くしておく。 */
.js .reveal.is-visible .pref__pin.is-restart img,
.js .reveal.is-visible .pref__pin.is-restart::after,
.js .reveal.is-visible .pref__pin.is-restart::before {
  animation: none;
}

.js .pref__name.reveal::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.js .pref__name.reveal.is-visible::after {
  transform: none;
}

/* 物件カード — 行の中で左から順に、90ms ずつ。--reveal-i は列番号で、JS が
実際のレイアウトから数える（3列・2列・1列で同じ式）。比較表で先方が了承
した、一方向・行ごとの時間差と同じ考え方。 */
.js .site.reveal {
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

/* Coming Soon — 見出しと同じ行マスクで下から立ち上がる。暗幕は動かさない：
一瞬でも明るい写真が見えると、公開中の物件に見えてしまう。下端の .1em は
Coming の g が切れないための余白（同じ分だけ負のマージンで戻す）。 */
.js .site__soon-mask {
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.js .reveal .site__soon-mask > span {
  transform: translateY(105%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) calc(.35s + var(--reveal-i, 0) * 90ms);
}

.js .reveal.is-visible .site__soon-mask > span {
  transform: none;
}

/* タブを切り替えたとき、出てきたパネルがふわっと現れる。不透明度だけ：
一覧は縦に長く、地図は Google の初回レイアウト中に動かしたくないため。
display: none から戻るたびにアニメーションは最初から再生される。 */
@keyframes finder-panel-in {
  from {
    opacity: 0;
  }
}
.js .finder.is-switched .finder__panel:not([hidden]) {
  animation: finder-panel-in .4s ease;
}

/* 遅延読み込み画像 — 読み込み完了時にふわっと現れる */
.js img.img-wait {
  opacity: 0;
}

.js img.img-done {
  opacity: 1;
  transition: opacity .5s ease;
}

/* 写真にホバーの拡大は付けない。指示により全画像で無効。
.img-done の opacity フェードだけが残る。 */
/* ホバーの応答 — クリックできるものは触れるとわずかに動く。
タッチ端末と reduced-motion では触れない。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .carousel__arrow {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }

  .carousel__arrow[data-carousel-prev]:hover {
    transform: translateX(-1px);
  }

  .carousel__arrow[data-carousel-next]:hover {
    transform: translateX(1px);
  }

  .carousel__dot {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .carousel__dot:hover {
    transform: scale(1.4);
  }

  /* 触れると下端に罫線が左から引かれ、右下の切り欠きが角へ寄りながら
  1.4倍に育つ。ボタン自体の大きさと位置は変えない（持ち上げは不評だった）。
  切り欠きは 8px なので 1.4倍でも約 11px。 */
  .site__btn {
    transition: opacity .3s;
  }

  .site__btn::before {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .site__btn:hover::before {
    transform: none;
  }

  /* 切り欠きは 0x0 の箱に border で描いているので、transform-origin: 100% 100%
  は三角形の直角（＝ボタン隅から 3px 内側）に来る。そこから拡大すると隅とは
  反対方向に育ち、内側の 3px にボタンの地色が残って見えてしまう。
  ホバー時は 3px 動かして直角をボタンの隅にぴったり合わせ、そこから 1.5倍。 */
  .site__btn::after {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: 100% 100%;
  }

  .site__btn:hover::after {
    transform: translate(3px, 3px) scale(1.5);
  }
}
/* 押した瞬間の反応 — hover と違いタッチ端末でも効くので別ゲート。
:hover より後に置いて押下中はこちらが勝つ。 */
@media (prefers-reduced-motion: no-preference) {
  /* 押すと切り欠きが元の位置に戻り、面が一段深く沈む（押し込んだ感じ） */
  .site__btn:active {
    opacity: .82;
    transition: opacity .1s ease;
  }

  .site__btn:active::after {
    transform: none;
    transition: transform .1s ease;
  }

  .carousel__arrow[data-carousel-prev]:active,
  .carousel__arrow[data-carousel-next]:active {
    transform: scale(0.98);
    transition: transform .1s ease;
  }
}
/* 施設概要の比較表 — 自社列は左から、一般列は右から、行ラベルは下から、
行ごとに時間差で現れる。トリガーは .reveal と同じ IntersectionObserver。 */
.js .reveal-cells .facility__cell {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 全セル左から一方向で。両サイドからの登場は先方確認で不評だった */
.js .reveal-cells .facility__cell--label,
.js .reveal-cells .facility__cell--ours,
.js .reveal-cells .facility__head-ours,
.js .reveal-cells .facility__cell--theirs,
.js .reveal-cells .facility__head-theirs {
  transform: translateX(-36px);
}

/* grid は行順に並ぶ: 1-3 見出し行, 4-6, 7-9, 10-12 が各行 */
.js .reveal-cells .facility__cell:nth-child(-n+3) {
  transition-delay: .05s;
}

.js .reveal-cells .facility__cell:nth-child(n+4):nth-child(-n+6) {
  transition-delay: .18s;
}

.js .reveal-cells .facility__cell:nth-child(n+7):nth-child(-n+9) {
  transition-delay: .31s;
}

.js .reveal-cells .facility__cell:nth-child(n+10) {
  transition-delay: .44s;
}

.js .reveal-cells.is-visible .facility__cell {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .reveal-cells .facility__cell {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .hero__cell, .js .hero__logo {
    opacity: 1;
    animation: none;
  }

  /* 幕は最初から無い状態にする。is-ready 側と同じ詳細度で後に置く */
  .js .hero__cell::after, .js .hero.is-ready .hero__cell::after {
    opacity: 0;
    animation: none;
  }

  .js .hero.is-ready .hero__cell img {
    animation: none;
  }

  .js .hero__logo-part img, .js .hero__logo-part--by img,
  .js .hero.is-ready .hero__logo-part img,
  .js .hero.is-ready .hero__logo-part--by img {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .reveal .intro__sep-dot, .js .reveal .intro__sep-line,
  .js .reveal .lp__label-rule::before, .js .reveal .lp__label-rule::after,
  .js .reveal .card__caption-rule, .js .reveal .card__title::after {
    transform: none;
    transition: none;
  }

  /* both states listed: the is-visible rule is the more specific one.
  is-out も打ち消す（0,5,1）— 設定を途中で変えられても消えたままにならないように */
  .js .reveal .pref__pin img, .js .reveal.is-visible .pref__pin img,
  .js .reveal.is-visible .pref__pin.is-out img {
    opacity: 1;
    animation: none;
  }

  .js .reveal .pref__pin::after, .js .reveal.is-visible .pref__pin::after,
  .js .reveal.is-visible .pref__pin.is-out::after {
    opacity: .7;
    animation: none;
  }

  .js .reveal.is-visible .pref__pin::before,
  .js .reveal.is-visible .pref__pin.is-out::before {
    opacity: 0;
    animation: none;
  }

  .pref__pin {
    cursor: default;
  }

  .js .pref__name.reveal::after {
    transform: none;
    transition: none;
  }

  .js .reveal .site__soon-mask > span {
    transform: none;
    transition: none;
  }

  .js .finder.is-switched .finder__panel:not([hidden]) {
    animation: none;
  }

  .finder__tab.is-active::after {
    transition: none;
  }

  .js .finder__tabs.reveal:not(.is-visible) .finder__tab.is-active::after {
    transform: none;
  }

  /* 地図：浮かび上がりと落下なし、選択の金は即座、名前札と吹き出しは動かさない。
  セレクタは打ち消す相手と同じ詳細度にしている */
  .js .finder__map .gm-style {
    opacity: 1;
    transition: none;
  }

  .js .finder__map:not(.is-landed):not(.is-settled) .finder-mk__body {
    opacity: 1;
  }

  .js .finder__map.is-landed .finder-mk__body {
    animation: none;
  }

  .finder-mk.is-active .finder-mk__fill, .finder-mk.is-active .finder-mk__fill > span {
    transition: none;
  }

  .finder-mk:hover .finder-mk__tag, .finder-mk:focus-visible .finder-mk__tag,
  .finder-mk:hover .finder-mk__tag > span, .finder-mk:focus-visible .finder-mk__tag > span {
    transition: none;
  }

  .finder-pop.is-open .finder-pop__box, .finder-pop.is-closing .finder-pop__box {
    transition: none;
  }

  .finder-pop .finder-iw__name > span {
    transform: none;
  }

  .finder-pop.is-open .finder-iw__name > span {
    transition: none;
  }

  .js img.img-wait {
    opacity: 1;
  }

  .js img.img-done {
    transition: none;
  }

  .js [data-parallax] [data-parallax-depth] {
    transform: none !important;
    will-change: auto;
  }

  .carousel__slide {
    transition: none;
  }
}
/* --------------------------------------------------------- responsive ---- */
@media screen and (max-width: 1279px) {
  .facility__row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .facility__photo {
    width: 100%;
    max-width: 420px;
  }

  .facility__table-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .card__row {
    flex-direction: column;
    gap: 40px;
  }

  .card__text {
    padding-top: 0;
  }

  .card__media {
    flex: none;
    width: 100%;
  }
}
/* Three columns stop fitting the two buttons side by side below about 1100 —
ご予約はこちら needs 126px and the column falls under that at 1024. */
@media screen and (max-width: 1100px) {
  .pref__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 40px;
  }

  .finder__map {
    height: 520px;
  }
}
/* ==========================================================================
Mobile — drawn separately from the desktop design, on a 750px canvas at 2x,
so the measurements below are that canvas halved to a 375px viewport.
========================================================================== */
@media screen and (max-width: 767px) {
  /* -- hero: logotype first, then one full-bleed photo over a row of three -- */
  .hero {
    flex-direction: column;
  }

  .hero__panel {
    order: -1;
    width: 100%;
    padding: 31px 0 36px;
  }

  .hero__logo {
    max-width: 140px;
  }

  /* 240 on desktop; measured 140 here */
  .hero__grid {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__cell {
    aspect-ratio: 125 / 81;
  }

  .hero__cell:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 520 / 350;
  }

  /* the stacked cells are too short for the pan slack — park the images */
  .hero__cell img {
    height: 100%;
    top: 0;
    transform: none !important;
  }

  /* .site__actions .site__btn { flex: 1 } is flex-basis: 0%, which only
  touches width while .site__actions is row (desktop) — height: 55px on
  .site__btn still governs. Flipping to column here makes that same
  flex-basis govern height instead, and it collapsed both buttons to
  ~22px. flex: none restores flex-basis: auto, so the explicit height
  applies again; align-items: stretch (the container's default) keeps
  each button full width now that it isn't growing to fill height. */
  .site__actions {
    flex-direction: column;
  }

  .site__actions .site__btn {
    flex: none;
  }

  .intro {
    padding: 60px 0;
  }

  .intro__title {
    font-size: 20px;
  }

  .intro__body {
    font-size: 15px;
  }

  .intro__sep-line {
    width: 70px;
  }

  .facility {
    padding: 60px 0;
  }

  .lp__script {
    font-size: 44px;
  }

  .lp__heading {
    font-size: 18px;
  }

  /* Order runs table -> note -> photograph here, against photograph -> table
  on desktop. display: contents lifts the row's two children into this
  flex so all three can be ordered together. */
  .facility .lp__inner {
    display: flex;
    flex-direction: column;
  }

  .facility__head {
    order: 0;
  }

  .facility__row {
    display: contents;
  }

  .facility__scroller {
    order: 1;
  }

  .facility__note {
    order: 2;
    margin-top: 32px;
    gap: 12px;
  }

  .facility__photo {
    order: 3;
    width: 100%;
    max-width: none;
    margin-top: 32px;
  }

  /* 24, not 32: 327 content - two rules - two 12px gaps leaves the copy 255px,
  which is what the design gives it and what holds it to three lines. */
  .facility__note-rule {
    flex: 0 0 24px;
  }

  /* flex: none on desktop, where the row is wide enough. Here it has to give,
  or the copy runs past both edges and loses a glyph either side. */
  .facility__note-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
  }

  /* -- collage keeps its overlap on mobile, rearranged, not stacked -- */
  .collage__canvas {
    display: block;
    aspect-ratio: 375 / 560;
  }

  /* transform: none — the desktop rule bleeds the band with left: 50% and a
  -50% shift, and without clearing it here the band slides off-canvas. */
  .collage__item--band {
    left: 0;
    top: 0;
    width: 100%;
    transform: none;
    height: 35.71%;
  }

  .collage__item--large {
    left: 5.33%;
    top: 39.64%;
    width: 69.33%;
    height: 30%;
  }

  .collage__item--tall {
    left: 62.67%;
    top: 65.36%;
    width: 32%;
    height: 32.14%;
  }

  .collage__item--small {
    left: 0;
    top: 76.07%;
    width: 53.33%;
    height: 23.93%;
  }

  .experience__content {
    padding: 60px 0;
  }

  .experience__cards {
    gap: 40px;
  }

  .card {
    padding: 40px 24px;
  }

  .card__title {
    font-size: 20px;
  }

  .card__body {
    font-size: 14px;
  }

  .card__caption-text {
    font-size: 14px;
  }

  .carousel__controls {
    justify-content: center;
    gap: 32px;
  }

  .contact {
    padding: 60px 0;
  }

  .site__soon {
    font-size: 24px;
  }

  .site__actions {
    gap: 16px;
  }

  .finder__tabs {
    margin-top: 40px;
  }

  .finder__tab {
    height: 50px;
    font-size: 16px;
  }

  .finder__tab.is-active {
    height: 54px;
  }

  .finder__tab::after {
    height: 4px;
  }

  .finder__panel {
    margin-top: 32px;
  }

  .pref + .pref {
    margin-top: 48px;
  }

  .pref__name {
    gap: 14px;
    font-size: 18px;
  }

  .pref__pin {
    width: 15px;
    height: 25px;
  }

  .pref__pin img {
    width: 15px;
    height: 21.7px;
  }

  .pref__pin::after {
    width: 9px;
    height: 2.5px;
    margin-left: -4.5px;
  }

  .pref__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 24px;
  }

  .finder__map {
    height: 420px;
    --mk-fall: -12px;
    --mk-sx: 1.04;
    --mk-sy: .94;
    --mk-stagger: 30ms;
  }
}
/* --------------------------------------------------- table scroll hint ---- */
/* The comparison table is pinned at 810 and scrolls sideways below that, which
is not discoverable on a phone — so say so, and get out of the way on the
first scroll. Desktop never shows it: there the table fits. */
.facility__scroll-hint {
  display: none;
}

@media screen and (max-width: 767px) {
  .facility__scroller {
    position: relative;
  }

  .facility__scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: rgba(56, 54, 51, 0.82);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .4s ease;
  }

  .facility__scroll-hint svg {
    width: 46px;
    height: 29px;
  }

  .facility__scroll-hint.is-gone {
    opacity: 0;
  }
}
/* ------------------------------------------------------- header, mobile ---- */
/* The mobile design carries the SNS icons in the header and leaves the drawer
to the fixed bottom bar's メニュー button; desktop keeps the nav and the
hamburger and shows no SNS. Both differ from the trial build, which showed
the hamburger at every width. */
.site-header__sns {
  display: none;
}

@media screen and (max-width: 767px) {
  .site-header__sns {
    display: flex;
  }

  .site-header__menu-btn {
    display: none;
  }
}
/* 見出しの行マスク — 行ごとに、下から順に立ち上がる。
行の区切りは元の <br> をそのまま使う。ブラウザの折り返しではなく設計上の
改行なので、幅が変わっても割れ方が変わらない。<br> が消えることで、CMS が
改行を半角スペースに変える件も同時に避けられる。
overflow: hidden はマスクなので、下端に .1em の余白を足して、ディセンダが
切れないようにする（同じ分だけ負のマージンで戻すので高さは変わらない）。 */
/* 改行そのものはスクリプトに依存させない。これらの span は元の <br> の代わりで、
.js の有無にかかわらず設計どおりの位置で改行する必要がある。マスクと動きだけを
.js に紐付ける。 */
.reveal-lines > .line {
  display: block;
}

.js .reveal-lines > .line {
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.js .reveal-lines > .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.is-visible .reveal-lines > .line > span {
  transform: none;
}

.js .reveal.is-visible .reveal-lines > .line:nth-child(2) > span {
  transition-delay: .1s;
}

.js .reveal.is-visible .reveal-lines > .line:nth-child(3) > span {
  transition-delay: .2s;
}

/* 行が動くブロックは、ブロックごと持ち上げない。二重の動きになって濁るため、
ここは不透明度だけにして、動きは行マスクに任せる。 */
.js .reveal--lines,
.js .reveal:has(> * > .reveal-lines),
.js .reveal:has(> .reveal-lines) {
  transform: none;
}

/* 行マスクの動きを止める。この指定は行マスク本体より後ろに置く必要がある。
前に置くと同じ詳細度で後勝ちになり、行が 105% に取り残されて、マスクされた
見出しがページから丸ごと消える。 */
@media (prefers-reduced-motion: reduce) {
  .js .reveal-lines > .line > span {
    transform: none;
    transition: none;
  }
}
/* --------------------------------------------------- カルーセルの説明文 ---- */
/* 説明文はスライドごとに長さが違うので、1つの <p> を差し替えていると、
折り返しが1行から2行に変わった瞬間にカード全体の高さが跳ねる。実測で
414px 幅のカード1が 727px と 743px を行き来していた。
全文をグリッドの同じセルに重ねて置き、表示中のものだけ不透明にする。
セルの高さは一番背の高い説明文で決まるので、どの幅でも高さは動かない。 */
.card__captions {
  display: grid;
  flex: 1;
  min-width: 0;
}

.card__captions > .card__caption-text {
  grid-area: 1 / 1;
  opacity: 0;
}

.card__captions > .card__caption-text.is-active {
  opacity: 1;
}

.js .card__captions > .card__caption-text {
  transition: opacity .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .js .card__captions > .card__caption-text {
    transition: none;
  }
}

/*# sourceMappingURL=sumai-real-gallery_lp_2026_09.css.map */