/* ===================================================================
   Villa Nasu — desktop styles (first pass, breakpoint: >= 1281px)
   Colors / type extracted from Figma variables via the Figma MCP.
   =================================================================== */

:root {
  --primary-900: #132115;
  --primary-800: #26422a;
  --primary-600: #4d8353;
  --primary-500: #60a468;
  --primary-400: #7EB484;
  --primary-300: #9CC4A0;
  --primary-200: #B9D5BD;
  --primary-100: #D7E5D9;
  --accent-700: #7f5428;
  --accent-500: #d48c42;
  --accent-300: #e1b68a;
  --neutral-400: #313131;
  --neutral-300: #626262;
  --neutral-200: #939393;
  --neutral-100: #C4C4C4;
  --neutral-50: #DCDCDC;
  --bg-page: #eff8e9;
  --white: #ffffff;

  --font-en: "Gill Sans", "Gill Sans MT", "Century Gothic", sans-serif;
  --font-serif-jp: "Shippori Mincho", serif;
  --font-jp: "Noto Sans JP", sans-serif;

  --container-w: 1280px;
  --section-pad-x: 80px;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-jp);
  color: var(--neutral-400);
  background: var(--bg-page);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }

/* ---------------- Navbar ---------------- */
.navbar {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 0.5px solid #f0f0f0;
}
.navbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 80px;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-navbar {
  display: flex;
  align-items: center;
  height: 100%;
}
.logo-navbar img { width: 74px; }


.nav-list {
  display: flex;
  gap: 48px;
}
.nav-list a {
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.7px;
  color: var(--primary-900);
  padding: 10px;
}
.nav-list a {
  transition: color .15s ease;
}
.nav-list a:hover {
  color: var(--primary-500); /* #60a468 */
  text-decoration: underline;
}

.btn-book {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: var(--primary-600);
  color: var(--white);
  padding: 12px 28px;
  line-height: 1.3;
}
.navbar__inner > .btn-book {
  transition: background-color .15s ease, transform .15s ease;
}
.navbar__inner > .btn-book:hover {
  background: var(--primary-800); /* #26422a */
  transform: translateY(-1px);
}

.btn-book__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.7px;
}
.btn-book__note { font-size: 11px; }
.btn-book--light {
  background: var(--white);
  color: var(--primary-900);
  padding: 12px 20px;
  transition: background-color .15s ease;
}
.btn-book--light:hover {
  background: var(--primary-100);
}

/* ----------------各セクションのを内側のラッパーで包む共通ルール---------------- */
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--section-pad-x);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.hero .section-inner { gap: 96px; }
.floor-section .section-inner {gap: 32px;}
.villa-section .section-inner,
.access-section .section-inner { gap: 24px; }
.villa-section .section-inner { gap: 48px; }
.site-footer .section-inner { gap: 24px; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding: 92px 80px 120px;
  display: flex;
  flex-direction: column;
  gap: 120px;
  max-width: 1280px;
  margin: 0 auto;
}

.hero__row {
  display: flex;
  gap: 10px;
}
.hero__slide {
  position: relative;
  flex: 0 1 783px;
  aspect-ratio: 783 / 522;
  height: auto;
  border-radius: 16px;
  overflow: clip;
}
.hero__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__slide-img.is-active { opacity: 1; }
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
}
.hero__dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  padding: 0;
}
.hero__dots button.is-active { background: #fff; }

.hero__text {
  position: relative;
  flex: 1 1 320px;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 60px;
}
.hero__title-stack {
  position: relative;
  display: inline-flex;
}
.hero__title {
  display: flex;
  gap: 16px;
  margin: 0;
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: clamp(24px, calc(16px + 0.78vw), 26px);
  color: #000;
}
.hero__title-col {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 4px;
}
.hero__bird {
  position: absolute;
  width: 38px;
  top: -55px;
  left: -30px;
  opacity: 0;
  transform: translate(-32px, 36px) rotate(170deg) scaleY(-1);
  transition: transform 1.2s ease-out, opacity 1.4s ease-out;
}
.hero__bird.is-visible {
  opacity: 1;
  transform: translate(0, 0) rotate(170deg) scaleY(-1);
}
.hero__leaf {
  position: absolute;
  width: 30px;
  bottom: -20px;
  left: 142px;
  transform: rotate(19deg);
}

/*--雲型--*/
.hero__blob {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: .9;
}

.hero__blob--left {
  left: calc(50% - 50vw - 8vw);      /* heroの余白を打ち消して常に画面端基準+さらに押し出す */
  bottom: clamp(-110px, -6vw, -100px); /* widthのclampと連動させて下限/上限を揃える */

  width: clamp(160px, 28vw, 420px);
  aspect-ratio: 420 / 262;

  transform: rotate(4deg);
}

.hero__blob-circle {
  position: absolute;
  background: var(--white);
  border-radius: 50%;
}

.hero__blob--left .hero__blob-circle--1 {
  width: 52%;
  aspect-ratio: 1;
  left: 0%;
  bottom: 28%;
}

.hero__blob--left .hero__blob-circle--2 {
  width: 44%;
  aspect-ratio: 1;
  left: 38%;
  bottom: 18%;
}

.hero__blob--left .hero__blob-circle--3 {
  width: 48%;
  aspect-ratio: 1;
  left: 66%;
  bottom: -14%;
}

.hero__blob--right {
  right: calc(50% - 52vw - 8vw);
  bottom: clamp(-110px, -7vw, -70px);

  width: clamp(200px, 29vw, 440px);
  aspect-ratio: 420 / 262;

  transform: rotate(-7deg);
}

.hero__blob--right .hero__blob-circle--1 {
  width: 52%;
  aspect-ratio: 1;
  right: 0%;
  bottom: 28%;
}

.hero__blob--right .hero__blob-circle--2 {
  width: 44%;
  aspect-ratio: 1;
  right: 38%;
  bottom: 18%;
}

.hero__blob--right .hero__blob-circle--3 {
  width: 48%;
  aspect-ratio: 1;
  right: 66%;
  bottom: -14%;
}

.floor-section__blob {
  top: clamp(-110px, -7vw, -70px);
  right: calc(50% - 52vw);
  bottom: auto;
  transform: rotate(-7deg) scaleY(-1);
}

.floor-section__bird {
  top: 120px;
  right: 200px;
  left: auto;
}

.hero__intro {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 92px;
  justify-content: center;
  padding: 4px 0px;
}
.hero__intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  text-align: left;
}
.hero__intro-text p {
  margin: 0;
  max-width: 367px;
  font-family: var(--font-serif-jp);
  font-size: 16px;
  letter-spacing: 0.16px;
  color: var(--primary-900);
}
.hero__intro-text p + p { margin-top: 16px; }
.hero__intro-text-first { position: relative; }

.btn-review {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 10px;
  background: var(--accent-500);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  padding: 12px 20px;
  margin-top: 32px;
  border-radius: 24px;
  border: 1px solid var(--accent-500);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-review img,
.btn-review svg { width: 12px; height: 12px; display: block; color: inherit; }
.btn-review:hover {
  background: var(--white);
  color: var(--accent-500);
  border-color: var(--accent-500);
}

.hero__intro-photo {
  position: relative;
  width: 398px;
  height: 265px;
  border-radius: 16px;
  overflow: visible;
  flex-shrink: 0;
}
.hero__intro-photo > img:first-child {
  width: 100%; height: 100%; object-fit: cover; border-radius: 16px;
}
.hero__car {
  position: absolute;
  width: 84px;
  bottom: 32px;
  transform: scaleY(-1) rotate(180deg);
  transition: left 2s ease-in-out;
  z-index: 2;
}
.hero__light {
  position: absolute;
  width: 80px;
  left: -42px;
  top: -22px;
  transform: rotate(-40deg);
}
@keyframes hero-light-sway {
  0%   { transform: rotate(-40deg); }
  25%  { transform: rotate(-42deg); }
  50%  { transform: rotate(-40deg); }
  75%  { transform: rotate(-38deg); }
  100% { transform: rotate(-40deg); }
}
.hero__light.is-swaying {
  animation: hero-light-sway 0.6s ease-in-out 3;
}

/* ---------------- Section head (shared) ---------------- */
.section-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.section-head .step-jump { flex-basis: 100%; }
.section-head__title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-head__icon { width: 22px; }
.section-head__title h2 {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 0.8px;
  color: var(--primary-900);
}
.section-head__jp {
  margin: 0;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.36px;
  color: var(--neutral-400);
}

.step-jump {
  display: flex;
  gap: 32px;
}
.step-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 140px;
  gap: 16px;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 1.1px;
  color: var(--accent-700);
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--accent-700);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.step-jump a span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}
.step-jump a span img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .15s ease;
}
.step-jump a span img:last-child { opacity: 0; }
.step-jump a:hover {
  color: var(--accent-500);
  border-color: var(--accent-500);
}
.step-jump a:hover span {
  text-decoration: none;
}
.step-jump a:hover span img:first-child { opacity: 0; }
.step-jump a:hover span img:last-child { opacity: 1; }

/* ---------------- Step Inside the Villa ---------------- */
.villa-section {
  background: var(--white);
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.villa-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-margin-top: calc(80px + 16px); /* navbar(80px)の下に16pxの余白を確保してジャンプ */
}
.villa-block__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.villa-block__title {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  color: var(--primary-900);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1.3px;
  padding: 8px;
}
.villa-block__title-num {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.villa-block__title-num::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-90%, -100%) rotate(-25deg);
  width: 40px;
  height: 40px;
  background: url("assets/outdoor-art-pngs/light_1.png") center / contain no-repeat;
}
@keyframes title-num-sway {
  0%   { transform: translate(-90%, -100%) rotate(-25deg); }
  25%  { transform: translate(-90%, -100%) rotate(-27deg); }
  50%  { transform: translate(-90%, -100%) rotate(-25deg); }
  75%  { transform: translate(-90%, -100%) rotate(-23deg); }
  100% { transform: translate(-90%, -100%) rotate(-25deg); }
}
.villa-block__title-num.is-swaying::before {
  animation: title-num-sway 0.6s ease-in-out 3;
}
.villa-block__head p {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: var(--primary-900);
  max-width: 100%;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.photo-grid--3x1 { grid-template-columns: repeat(3, 1fr); }
.photo-grid--4x1 { grid-template-columns: repeat(4, 1fr); }
.photo-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}
.photo-grid figcaption {
  font-size: 16px;
  letter-spacing: 0.16px;
  color: var(--primary-900);
}

/* ---------------- Floor Plan & Amenities ---------------- */
.floor-section {
  position: relative;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
  overflow: clip;
}
.floor-section__row {
  display: flex;
  gap: 48px;
  align-items: center;
}
.floor-section__plan {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 48px;
}
.floor-section__plan-frame {
  width: 100%;
  border-radius: 24px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.floor-section__plan-frame img {
  width: 100%;
  height: auto;
}
.floor-section__illustration-wrap {
  position: relative;
  width: 436px;
  height: 140px;
  align-self: flex-end;
}
.floor-section__illustration {
  position: absolute;
  inset: 0;
  width: 436px;
  height: 140px;
  transform-origin: 50% left;
}
.floor-section__illustration img { position: absolute; }
.illus-table   { width: 109px; left: 40%; top: 30%; transform: rotate(4deg);}
.illus-chair   { width: 85px;  left: 68%; top: 0%; transform: rotate(1deg); }
.illus-light   { width: 24px;  left: 47%; top: 4%; }
.illus-squirrel{
  width: 73px;  left: 16%; top: 70%;
  transform: rotate(-11deg);
  transform-origin: 50% 100%;
  z-index: 2;
}
.illus-squirrel.is-wiggling {
  animation: squirrel-wiggle 1.1s 2;
}
@keyframes squirrel-wiggle {
  0%, 100% { transform: rotate(-11deg); }
  25%      { transform: rotate(-16deg); }
  50%      { transform: rotate(-11deg); }
  75%      { transform: rotate(-16deg); }
}

.illus-leaf-a  {
  width: 31px;  left: 22%; top: 30%;
  z-index: 1;
}

.illus-leaf-b  {
  width: 31px;  left: 12%; top: 4%;
  transform: scaleY(-1);
  z-index: 1;
}

.floor-section__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.info-block h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.36px;
  color: var(--primary-600);
  border-bottom: solid 1px var(--primary-300);
  padding-bottom: 4px;
}
.info-block h4 {
  margin: 16px 0 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.32px;
  color: var(--neutral-400);
}
.amenity-list + h4 {
  margin-top: 32px;
}
.info-table {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-table > div {
  display: flex;
  gap: 12px;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: #000;
}
.info-table dt { width: 80px; text-align: right; margin: 0; font-weight: 400; }
.info-table dd { margin: 0; }

.amenity-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: #000;
  margin-bottom: 8px;
}
.amenity-list li { position: relative; padding-left: 16px; }
.amenity-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.fine-print {
  font-size: 14px;
  letter-spacing: 0.14px;
  color: #000;
  margin: 0;
}

/* ---------------- Access ---------------- */
.access-section {
  background: var(--white);
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.access-section__row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.access-section__map {
  flex: 1;
  aspect-ratio: 823 / 501;
  background: var(--neutral-200);
  border-radius: 16px;
  overflow: clip;
  display: flex;
  justify-content: center;
}
.access-section__map img { width: 100%; height: 100%; object-fit: contain; }
.access-section__map iframe { width: 100%; height: 100%; border: 0; }

.access-section__info {
  width: 325px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.access-section__info .info-block h3 { color: var(--primary-500); margin-bottom: 20px; }
.access-section__info .info-block h4 { color: var(--neutral-300); margin: 0 0 12px; }
.access-section__info .info-block p {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: #000;
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--primary-800);
  color: var(--white);
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-logo {
  position: relative;
  text-align: center;
}
.footer-logo img { width: 62px; margin: 0 auto; }
.footer-logo span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 9.5px;
  letter-spacing: 0.665px;
}

.site-footer__nav-book {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}
.footer-nav {
  display: flex;
  gap: 32px;
}
.footer-nav a {
  font-size: 14px;
  letter-spacing: 0.7px;
  padding: 0 24px;
  transition: color .15s ease;
}
.footer-nav a:hover {
  color: var(--primary-200);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer .section-inner > a.btn-book {
  align-self: flex-end;
}
.site-footer__legal {
  width: 60%;
  padding-top: 32px;
  font-size: 14px;
  font-weight: 300;
  color: var(--neutral-100);
  letter-spacing: 0.16px;
  line-height: 1.6;
}
.site-footer__legal p { margin: 0 0 10px; }

/* ---------------- Hamburger (hidden on desktop) ---------------- */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.hamburger__bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--primary-700, #3a623e);
}
.hamburger__label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 9px;
  color: var(--primary-700, #3a623e);
}

.mobile-nav {
  display: none;
  position: absolute;
  top: 0;
  right: -262px;
  width: 257px;
  background: var(--white);
  border: 0px;
  border-radius: 0px 0px 0px 16px;
  box-shadow: 0 1px 10px rgba(0,0,0,.08);
  padding: 28px 0px 0px;
  flex-direction: column;
  gap: 24px;
  z-index: 60;
  transition: right .25s ease;
}
.mobile-nav.is-open { display: flex; right: 0px; overflow: hidden;}
.mobile-nav__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--primary-700, #3a623e);
  cursor: pointer;
}
.mobile-nav__close:hover { color: var(--primary-500); }
.mobile-navi-title {
  display: block;
  padding-bottom: 24px;
  padding-left: 24px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.7px;
  color: var(--primary-700, #3a623e);
  border-bottom: 1px solid #c4c4c4;
}
.mobile-nav nav {
  display: flex;
  flex-direction: column;
}
.mobile-nav nav a {
  padding: 16px 24px;
  border-bottom: 1px solid #c4c4c4;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.7px;
  color: var(--primary-900);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mobile-nav nav a:hover {
  background: #eef1ee;
  border-bottom-color: var(--primary-500);
  color: var(--primary-500);
}
.mobile-nav .btn-book {
  align-self: stretch;
  background: var(--primary-500);
}

/* =====================================================================
   TABLET — Figma frame width 768px (roughly 768–1080px viewports)
   ===================================================================== */
@media (max-width: 1080px) {
  body { font-size: 16px; }
  .hero__intro-text p,
  .villa-block__head p,
  .info-table > div,
  .amenity-list,
  .access-section__info .info-block p,
  .site-footer__legal,
  .photo-grid figcaption { font-size: 15px; }
  .navbar__inner { position: relative; max-width: 100%; }
  .nav-list,
  .navbar__inner > .btn-book { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 0 0 96px; 
    gap: 98px;}
  .hero__row { position: relative; width: 100%; }
  .hero__slide { width: 100%; height: 522px; flex: 1 0 0; border-radius: 0; }
  .hero__text {
    position: absolute;
    inset: 0;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .hero__title-stack { display: contents; }

  .hero__title {
    position: absolute;
    right: 15%;
    top: 12%;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    align-items: flex-start;
  }
  .hero__title-col {
    background: rgba(0,0,0,.25);
    padding: 4px 2px;
  }
  .hero__bird { display: none; }
  .hero__leaf { display: none; }
  .floor-section__bird {
    display: block;
    top: 80px;
    right: 80px;
    width: 32px;
  }
  .floor-section__illustration-wrap { display: none; }

  .hero__blob--left  { width: clamp(280px, 32vw, 420px); bottom: clamp(-70px, -8vw, -70px); left: calc(50% - 50vw - 8vw); }
  .hero__blob--right { width: clamp(280px, 32vw, 420px); bottom: clamp(-75px, -9vw, -75px); right: calc(50% - 50vw - 8vw); }

  .hero__intro {
    flex-direction: column;
    align-items: flex-end;
    padding: 4px 80px;
    gap: 88px;
  }
  .hero__intro-text { align-items: center; width: 100%; gap: 16px;}
  .hero__intro-text p {
  margin: 0;
  max-width: 100%;
}
  .hero__intro-photo { align-items: flex-end; width: 100%; max-width: 398px; }
  .btn-review {align-self: center; }
  .hero__car {
  bottom: -28px;
  transition: left 1.5s ease-in-out;
}
/*--各セクションの設定--*/

  .section-head { flex-direction: column; align-items: center; text-align: center; }
  .section-head__title h2 { font-size: 32px; }
  .section-head__title { flex-direction: row; justify-content: center; }

  .step-jump {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
  }

  .photo-grid,
  .photo-grid--3x1 { grid-template-columns: repeat(3, 1fr); }
  .photo-grid--4x1 { grid-template-columns: repeat(2, 1fr); width: 95%; max-width: 500px; margin: 0 auto; }

  .floor-section__row { flex-direction: column; align-items: center; gap: 24px;}

  .access-section__row { flex-wrap: wrap; }
  .access-section__map { flex: 1 1 320px; min-width: 320px; }
  .access-section__info { margin: 0 auto; }

  .floor-section__plan { align-items: center; }
  .floor-section__plan-frame { width: 100%; max-width: 580px; margin: 0 auto; }


  .floor-section__info {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .floor-section__info .info-block { width: 100%; max-width: 500px; }
  .info-table,
  .amenity-list { text-align: left; }
  .amenity-list { grid-template-columns: repeat(2, 1fr); }
  .amenity-list + h4 {
    margin-top: 48px;
  }
  .site-footer { padding: 50px 0 80px; gap: 32px; }
  .site-footer__row { flex-direction: column; align-items: center; gap: 32px; }
  .site-footer__legal { width: 100%; text-align: center; padding-top: 24px; padding-bottom: 24px;}
  .site-footer .section-inner > a.btn-book { align-self: center; }
  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .footer-nav a { white-space: nowrap; }
  .footer-nav a {font-size: 15px;}
  .site-footer__legal {font-size: 14px;}
}

/* =====================================================================
   PHONE — Figma frame width 390px (roughly <= 600px viewports)
   ===================================================================== */
@media (max-width: 600px) {
  :root { --section-pad-x: 50px; }

  .access-section__map { width: 100%; margin: 0; }
  .access-section__info { width: 100%; }
  .floor-section__plan-frame { width: 100%; margin: 0; padding: 20px; }
  .floor-section__info .info-block { width: 100%; }
  .floor-section__bird {
    top: 140px;
    right: 60px;
    width: 20px; 
  }
  .hero__intro-text p {font-size: 15px;}
  .villa-block__head p,
  .info-table > div,
  .amenity-list,
  .access-section__info .info-block p,
  .site-footer__legal,
  .photo-grid figcaption { font-size: 14px; }

  .amenity-list {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .navbar__inner { padding: 0 16px; }
  .logo-navbar img { width: 53px; }

  .hero { padding: 0 0 80px; gap: 48px; }
  .hero__slide { height: auto; aspect-ratio: 390 / 430; border-radius: 0; }
  .hero__title { left: 62%; top: 10%; font-size: 21px; font-weight: 400;}
  .hero__intro { padding: 16px var(--section-pad-x); align-items: center; }
  .hero__intro-text { align-items: center; text-align: center; }
  .hero__car, .hero__light { display: none; }
  .hero__intro-photo { max-width: 398px; }
  .btn-review {align-self: center; }

  .hero__blob--left  { width: 230px; bottom: -50px; left: calc(50% - 50vw - 18vw); }
  .hero__blob--right { width: 230px; bottom: -50px; right: calc(50% - 50vw - 18vw); }

  .floor-section__blob {
    bottom: auto;
    right: calc(40% - 52vw);
    transform: rotate(-7deg) scaleY(-1) scale(0.9);
  }

  .section-head { flex-direction: column; align-items: center;}
  .section-head__jp {font-size: 17px;}
  .section-head__title h2 { font-size: 30px; }
  .section-head__title { flex-direction: row-reverse; justify-content: flex-end; }

  .step-jump {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
  }
  .step-jump a {
    font-size: 15px;
  }

  .villa-section,
  .floor-section,
  .access-section { padding: 60px 0; }

  .villa-block__title {
  font-size: 18px;
}

  .floor-section__illustration-wrap {
    width: 332px;  /* 536px * 0.62 */
    height: 149px; /* 240px * 0.62 */
  }
  .floor-section__illustration {
    transform: scale(0.62);
  }
  .amenity-list + h4 {
    margin-top: 32px;
  }
  .photo-grid,
  .photo-grid--3x1,
  .photo-grid--4x1 { grid-template-columns: repeat(2, 1fr); }

  .site-footer { padding: 32px 0 60px; }
  .site-footer__row { align-items: center; }
  .footer-nav { display: flex; flex-direction: column; align-items: center; gap: 16px; }
}