@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 {
  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;
}

/* -------------------------------------------------------------- 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;
}

.facility__table-wrap {
  flex: 1 0 auto;
}

/* 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;
}

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

.contact__sites {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 40px;
}

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

.site__photo {
  position: relative;
  width: 100%;
  max-width: 347px;
}

.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;
}

.site__names {
  width: 100%;
  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: 8px 0 0;
}

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

.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;
}

.site__btn:hover {
  opacity: .9;
}

.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);
}

/* ---------------------------------------------------------- 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;
}

/* ヒーロー — 読み込み時に4枚が順に現れ、ロゴタイプが最後に浮かび上がる。
   セル側をアニメーションし、内側の img はインナーパララックスが持つので
   transform が衝突しない。 */
@keyframes hero-cell-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* opacity のみ — 大きな PNG を動かすとデコード中にカクつく */
@keyframes hero-logo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.js .hero__cell {
  opacity: 0;
  animation: hero-cell-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js .hero__cell:nth-child(1) {
  animation-delay: .1s;
}

.js .hero__cell:nth-child(2) {
  animation-delay: .25s;
}

.js .hero__cell:nth-child(3) {
  animation-delay: .4s;
}

.js .hero__cell:nth-child(4) {
  animation-delay: .55s;
}

.js .hero__logo {
  opacity: 0;
  animation: hero-logo-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s 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);
}

/* 遅延読み込み画像 — 読み込み完了時にふわっと現れる */
.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);
  }

  /* hover は既存の opacity の変化のみ — 持ち上げはやり過ぎだった */
  .site__btn {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }
}
/* 押した瞬間の反応 — hover と違いタッチ端末でも効くので別ゲート。
   :hover より後に置いて押下中はこちらが勝つ。 */
@media (prefers-reduced-motion: no-preference) {
  /* CTA の押下は動きなし — opacity が一段深く沈むだけ */
  .site__btn:active {
    opacity: .82;
    transition: opacity .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;
  }

  .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;
  }

  .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%;
  }
}
@media screen and (max-width: 900px) {
  .contact__sites {
    flex-direction: column;
    align-items: center;
    gap: 56px;
  }

  .site {
    width: 100%;
  }
}
/* ==========================================================================
   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 {
    flex-direction: column;
  }

  .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;
  }
}
/* --------------------------------------------------- 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_08.css.map */