/*
Theme Name: Maison Farmer
Theme URI: https://maisonfarmer.jp/
Author: Maison Farmer
Version: 0.1.104
Text Domain: maison-farmer
*/

:root {
  --mf-paper: #fff;
  --mf-ink: #3e3a34;
  --mf-gold: #cba064;
  --mf-line: #d4b27e;
  --mf-content: min(880px, calc(100vw - 48px));
  --mf-editorial-width: 880px;
  --mf-contact-gold: #c9a063;
  --mf-contact-input-bg: #f7f7f7;
  --mf-contact-placeholder: #d0d0d0;
  --mf-contact-error: #a00f17;
  --mf-contact-ink: #000;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mf-paper); color: var(--mf-ink); font-family: "Zen Kaku Gothic Antique", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: .04em; line-height: 2; }
body.has-menu-open { overflow: hidden; }
body.has-opening-animation { overflow: hidden; overscroll-behavior: none; touch-action: none; }
/* Session skip: hide opening before footer JS runs (set in header early script).
   Keep .is-handing-off visible so the FV crossfade can play. */
html.skip-opening-loader .opening-animation:not(.is-handing-off) { display: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 400; }

/* Soft line breaks — show only on the matching viewport. */
@media (max-width: 767px) {
  .u-pc-br { display: none; }
}
@media (min-width: 768px) {
  .u-sp-br { display: none; }
}

/* Header logo sits under the footer Maison pattern while scrolling.
 * Ice menu is a sibling (outside this stacking context) so it stays on top. */
.site-header { align-items: flex-start; display: flex; justify-content: space-between; left: 0; padding: 39px 20px 0 139px; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 20; }
.site-header__brand { display: block; height: 59px; pointer-events: auto; width: 113px; }
.site-header__brand img, .site-header__menu img { height: 100%; object-fit: contain; width: 100%; }
.site-header__menu { background: transparent; border: 0; cursor: pointer; height: 51px; margin: 0; padding: 0; pointer-events: auto; position: fixed; right: 20px; top: 39px; width: 51px; z-index: 45; }

.site-menu { align-items: center; background: rgba(251, 250, 240, .985); display: flex; inset: 0; justify-content: center; opacity: 0; padding: 100px 7vw; pointer-events: none; position: fixed; transition: opacity .35s ease; z-index: 50; }
.site-menu.is-open { opacity: 1; pointer-events: auto; }
.site-menu__close { background: none; border: 0; color: var(--mf-gold); cursor: pointer; font: 300 42px/1 Cabin, sans-serif; position: absolute; right: 28px; top: 28px; }
.site-menu__inner { display: grid; gap: 64px; max-width: 880px; width: 100%; }
.site-menu__inner section { border-top: 1px solid var(--mf-ink); padding-top: 18px; }
.site-menu__inner p:not(.eyebrow), .site-menu address { font-size: 13px; font-style: normal; line-height: 2; margin-top: 16px; }
.eyebrow { color: var(--mf-gold); font-family: Cabin, sans-serif; font-size: 12px; letter-spacing: .16em; line-height: 1.5; }
.text-link { border-bottom: 1px solid currentColor; display: inline-block; font-size: 12px; line-height: 1.8; margin-top: 18px; text-decoration: none; }

/*
 * Underline draw — FOR BUSINESS hero CTA only (.text-link--underline-reveal).
 * Matches existing border-bottom: 1px solid currentColor (#d4b27e in hero).
 */
.js .text-link--underline-reveal {
  border-bottom-color: transparent;
  position: relative;
}
.js .text-link--underline-reveal::after {
  background: currentColor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  pointer-events: none;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.48, .91, .78, 1) .1s;
  width: 100%;
}
.js .text-link--underline-reveal.is-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .js .text-link--underline-reveal {
    border-bottom-color: currentColor;
  }
  .js .text-link--underline-reveal::after {
    display: none;
  }
}
.button-link { align-items: center; border: 1px solid var(--mf-line); display: inline-flex; font-size: 12px; justify-content: center; min-height: 48px; min-width: 200px; text-decoration: none; transition: background .25s ease, color .25s ease; }
.button-link:hover { background: var(--mf-gold); color: #fff; }

/* SP: Opening終了画面（.opening-animation__reveal）と同じ表示領域に揃える。 */
.top-fv { height: min(760px, 100dvh); overflow: hidden; position: relative; }
.top-fv__slide {
  background: center top / cover no-repeat;
  inset: 0;
  opacity: 0;
  position: absolute;
}
/* Slider starts via .is-running (after opening handoff or skip). Until then keep slide 1 visible. */
.top-fv:not(.is-running) .top-fv__slide--1 { opacity: 1; }
.top-fv__slide--1 { background-image: url("assets/images/top-fv-1-sp.png"); z-index: 1; }
.top-fv__slide--2 { background-image: url("assets/images/top-fv-2-sp.png"); z-index: 2; }
.top-fv__slide--3 { background-image: url("assets/images/top-fv-3-sp.png"); z-index: 3; }
.top-fv.is-running .top-fv__slide--1 { animation: mf-fv-slide 18s ease-in-out infinite both; }
.top-fv.is-running .top-fv__slide--2 { animation: mf-fv-slide 18s ease-in-out 6s infinite both; }
.top-fv.is-running .top-fv__slide--3 { animation: mf-fv-slide 18s ease-in-out 12s infinite both; }
/* After opening: enter mid-cycle so slide 1 is already fully opaque (matches opening FV). */
.top-fv.is-running.is-seamless-start .top-fv__slide--1 { animation: mf-fv-slide 18s ease-in-out -1s infinite both; }
.top-fv.is-running.is-seamless-start .top-fv__slide--2 { animation: mf-fv-slide 18s ease-in-out 5s infinite both; }
.top-fv.is-running.is-seamless-start .top-fv__slide--3 { animation: mf-fv-slide 18s ease-in-out 11s infinite both; }

.section-narrow { margin-inline: auto; width: var(--mf-content); }
/* SP Figma MaisonFarmer--1 2203:572 — FV 760 → intro 1053 → story 1367 (= ±293px). */
.top-intro { padding: 293px 0; text-align: center; }
/* SP Figma 2203:574 — 12px / lh 175% / tracking 8%. */
.top-intro p { color: #000; font-size: 12px; font-weight: 400; letter-spacing: .08em; line-height: 21px; }

/* Soft reveal — values matched to gar-ten .s_home-do_catch (opacity / translate 1em / blur 1em / 1.2s / .2s delay / cubic-bezier(0, 1.08, 1, 1)). */
.js .top-intro__reveal {
  filter: blur(1em);
  opacity: 0;
  transition-property: translate, opacity, filter;
  transition-timing-function: cubic-bezier(0, 1.08, 1, 1);
  translate: 0 1em;
}
.js .top-intro__reveal.is-visible {
  filter: blur(0);
  opacity: 1;
  transition-delay: .2s;
  transition-duration: 1.2s;
  translate: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .top-intro__reveal {
    filter: none;
    opacity: 1;
    transition: none;
    translate: none;
  }
}

/* Land image: masked rise (translate 100% → 0, 1.4s). */
.js .top-land__image-reveal-target {
  display: block;
  height: 100%;
  transition: translate 1.4s cubic-bezier(0, 1.08, 1, 1);
  translate: 0 100%;
  width: 100%;
}
.js .top-land__image-reveal.is-visible .top-land__image-reveal-target {
  translate: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .top-land__image-reveal-target {
    transition: none;
    translate: none;
  }
}

/* Image rise — matched to allureville .js-sa.-up / .js-sa.is-show */
.js .top-story__image-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.8s cubic-bezier(.48, .91, .78, 1),
    transform 1.8s cubic-bezier(.48, .91, .78, 1);
}
.js .top-story__image-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .top-story__image-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Chef images — soft fade / slight rise (uses `translate` so existing `transform` centering stays). */
.js .top-chef__images-reveal > * {
  opacity: 0;
  transition:
    opacity 1.6s cubic-bezier(.48, .91, .78, 1),
    translate 1.6s cubic-bezier(.48, .91, .78, 1);
  translate: 0 16px;
}
.js .top-chef__images-reveal > *.is-visible {
  opacity: 1;
  transition-delay: calc(var(--reveal-index, 0) * .12s);
  transition-duration: 1.6s;
  translate: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .top-chef__images-reveal > * {
    opacity: 1;
    transition: none;
    translate: none;
  }
}

.editorial-section { display: grid; gap: 46px; padding: 0 24px 130px; }
.editorial-section__image { background: #e9e2d4 center / cover no-repeat; height: 420px; }
.editorial-section__image--story { background-image: url("assets/images/footer-illustration.png"); background-position: 28% 33%; }
.editorial-section__image--land { background-image: url("assets/images/footer-illustration.png"); background-position: 68% 55%; }
.editorial-section__image--chef { background-image: url("assets/images/footer-illustration.png"); background-position: 46% 78%; }
.editorial-section__content { margin-inline: auto; max-width: 620px; width: 100%; }
.editorial-section h1, .editorial-section h2 { font-size: 24px; letter-spacing: .08em; line-height: 1.7; margin-top: 12px; }
.editorial-section__content > p:last-child { font-size: 12px; line-height: 2.25; margin-top: 26px; }
.maison-section { background: #cba064; color: #fff; display: grid; gap: 40px; padding: 80px 24px; }
.maison-section__copy { margin-inline: auto; max-width: 400px; width: 100%; }
.maison-section address, .maison-section__copy > p:not(.eyebrow) { font-size: 12px; font-style: normal; line-height: 2.2; margin-top: 20px; }
.maison-section .eyebrow { color: #fff; }
.maison-section__map { margin-inline: auto; max-width: 600px; text-align: center; width: 100%; }
.maison-section iframe { display: block; height: 180px; width: 100%; }
.maison-section .text-link { color: #4b4b4b; }
.top-business-cta { padding: 130px 0; text-align: center; }
.top-business-cta > p:nth-child(2) { font-size: 15px; margin: 18px 0 28px; }

.page-hero { margin-inline: auto; padding: 205px 24px 120px; text-align: center; }
.page-hero h1 { font-size: 26px; line-height: 1.9; margin-top: 16px; }
.page-hero > p:last-of-type { font-size: 12px; line-height: 2.25; margin: 28px auto 0; max-width: 510px; }
.business-services { padding: 40px 0 130px; }
.business-services > p { font-size: 13px; text-align: center; }
.business-services ol { border-top: 1px solid var(--mf-ink); list-style: none; margin: 54px 0 0; padding: 0; }
.business-services li { border-bottom: 1px solid var(--mf-ink); display: grid; grid-template-columns: 42px 1fr; padding: 24px 0; }
.business-services li > span { color: var(--mf-gold); font-family: Cabin, sans-serif; font-size: 12px; }
.business-services h2 { font-size: 18px; }
.business-services li p { font-size: 11px; grid-column: 2; margin-top: 5px; }

/* Soft one-by-one reveal for service pills */
.js .business-services__reveal {
  opacity: 0;
  transition:
    opacity 1.2s cubic-bezier(.48, .91, .78, 1),
    translate 1.2s cubic-bezier(.48, .91, .78, 1);
  translate: 0 14px;
}
.js .business-services__reveal.is-visible {
  opacity: 1;
  transition-delay: calc(var(--reveal-index, 0) * .18s);
  transition-duration: 1.2s;
  translate: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .business-services__reveal {
    opacity: 1;
    transition: none;
    translate: none;
  }
}
.business-contact { padding: 80px 0 120px; }
.business-contact > h2 { font-size: 24px; margin-top: 12px; }
.business-contact > p:last-of-type { font-size: 11px; margin-top: 16px; }
.privacy-page { padding-bottom: 110px; }
.privacy-page .page-hero { padding-inline: 0; }
.privacy-page__body { font-size: 12px; line-height: 2.25; }
.privacy-page__body section { margin-top: 38px; }
.privacy-page__body h2 { font-size: 14px; margin-bottom: 12px; }

/* Footer sits above the fixed header logo so the Maison pattern covers it.
 * Ice menu (z-index 45) stays above the footer. */
.site-footer { align-items: center; background: #fff; display: flex; flex-direction: column; gap: 24px; isolation: isolate; justify-content: end; min-height: 821px; overflow: hidden; padding: 250px 24px 22px; position: relative; text-align: center; z-index: 40; }
.site-footer__art { height: 600px; left: 50%; overflow: hidden; position: absolute; top: 0; transform: translateX(-50%); width: 708px; z-index: 0; }
.site-footer__art img { height: 346.49%; left: 0; max-width: none; position: absolute; top: -112.14%; width: 100%; }
.site-footer__brand { display: block; overflow: hidden; width: 192px; }
.site-footer__brand img { height: 191.53%; max-width: none; position: relative; top: -40.68%; width: 100%; }
.site-footer__brand--sp { display: none; }
.site-footer__instagram { display: block; }
.site-footer__instagram img { display: block; width: 100%; }
.site-footer a, .site-footer small { color: #4b4b4b; font-size: 10px; text-decoration: none; }

.opening-animation { background: #fff; inset: 0; position: fixed; z-index: 100; }
.opening-animation__illustration { height: 848px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 390px; }
.opening-animation img { position: absolute; }
.opening-animation__cup { animation: mf-appear .45s ease-out forwards; height: 170px; left: 80px; opacity: 0; top: 403px; width: 210px; }
.opening-animation__botanical { opacity: 0; }
.opening-animation__botanical--1 { animation: mf-appear .55s .7s ease-out forwards; height: 84px; left: 152px; top: 294px; width: 66px; }
.opening-animation__botanical--2 { animation: mf-appear .55s 1.8s ease-out forwards; height: 44px; left: 123px; top: 351px; width: 41px; }
.opening-animation__botanical--3 { animation: mf-appear .55s 3s ease-out forwards; height: 64px; left: 152px; top: 386px; width: 63px; }
.opening-animation__botanical--4 { animation: mf-appear .55s 4.2s ease-out forwards; height: 78px; left: 204px; top: 203px; width: 81px; }
.opening-animation__botanical--5 { animation: mf-appear .55s 5.4s ease-out forwards; height: 51px; left: 209px; top: 252px; width: 54px; }
.opening-animation__final { inset: 0; overflow: hidden; position: absolute; }
.opening-animation__final::before, .opening-animation__final::after { background: url("assets/images/fv-fig.png") 89.4% top / 260% auto no-repeat; content: ""; height: 100%; position: absolute; top: 0; width: 50%; }
.opening-animation__final::before { animation: mf-wipe-left .9s 9s ease-in-out forwards; clip-path: inset(0 0 0 100%); left: 0; }
.opening-animation__final::after { animation: mf-wipe-right .9s 9s ease-in-out forwards; clip-path: inset(0 100% 0 0); right: 0; }
.opening-animation__fv { display: none; }
.opening-animation__logo { animation: mf-fade .6s 11s ease-out forwards; left: 50%; opacity: 0; top: 54px; transform: translateX(-50%); width: 113px; }
.opening-animation__copy { animation: mf-appear .6s 14s ease-out forwards; background: #fff; color: var(--mf-gold); font-family: "Zen Kaku Gothic New", sans-serif; font-size: 13px; line-height: 1.75; opacity: 0; padding: 8px 6px; position: absolute; right: 36px; text-align: center; top: 437px; }
.opening-animation__ice { animation: mf-appear .5s 17s ease-out forwards; opacity: 0; right: 20px; top: 58px; width: 51px; }
@keyframes mf-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mf-fade { to { opacity: 1; } }
@keyframes mf-wipe-left { to { clip-path: inset(0); } }
@keyframes mf-wipe-right { to { clip-path: inset(0); } }
/* 3枚×6s。次スライド開始後も約1s残してクロスフェードし、白抜けを防ぐ。 */
@keyframes mf-fv-slide {
  0% { opacity: 0; }
  5.556% { opacity: 1; }
  33.333% { opacity: 1; }
  38.889% { opacity: 0; }
  100% { opacity: 0; }
}

@media (min-width: 768px) {
  body { font-size: 15px; }
  .site-header { padding: 38px 70px 0 671px; }
  .site-menu__inner { grid-template-columns: 1fr 1fr; gap: 80px; }
  .top-fv { height: 982px; }
  .top-fv__slide--1 { background-image: url("assets/images/top-fv-1.png"); }
  .top-fv__slide--2 { background-image: url("assets/images/top-fv-2.png"); }
  .top-fv__slide--3 { background-image: url("assets/images/top-fv-3.png"); }
  /* PC Figma MaisonFarmer--1 2203:346 — FV 982 → intro 1500 → story 2053 (= ±518px). */
  .top-intro { height: auto; min-height: 0; padding: 518px 0; }
  /* PC Figma 2203:347 — 20px / lh 35px / tracking 8%. */
  .top-intro p { font-size: 20px; letter-spacing: .08em; line-height: 35px; }
  .editorial-section { align-items: center; gap: 100px; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); margin-inline: auto; max-width: 1280px; padding: 0 0 300px; }
  .editorial-section--reverse .editorial-section__image { order: 2; }
  .editorial-section__image { height: 620px; }
  .editorial-section h1, .editorial-section h2 { font-size: 32px; }
  .editorial-section__content > p:last-child { font-size: 13px; }
  .maison-section { grid-template-columns: 1fr 1fr; padding: 150px max(8vw, 80px); }
  .maison-section iframe { height: 260px; }
  .top-business-cta { padding: 240px 0; }
  .page-hero { padding: 368px 24px 200px; }
  .page-hero h1 { font-size: 35px; }
  .business-services { padding-bottom: 200px; }
  .business-services li { grid-template-columns: 80px 1fr 1fr; padding: 34px 0; }
  .business-services li p { grid-column: 3; margin: 0; }
  .business-contact { padding-bottom: 170px; }
  .privacy-page { padding-bottom: 200px; }
  .privacy-page__body { font-size: 13px; }
  .site-footer { min-height: 1061px; padding-top: 420px; }
  .site-footer__art { height: 1061px; object-position: 50% 34%; width: 1512px; }
  .site-footer__brand { width: 253px; }
}

/* TOP: Figma node assets */
.top-fv__slide { background: none; }
.top-fv__slide img { height: 100%; object-fit: cover; object-position: center; width: 100%; }
/* SP先頭スライドは Opening の main visual と同じ切り取り（left: -89.4% / width: auto）。 */
.top-fv__slide--1 img {
  height: 100%;
  left: -89.4%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  width: auto;
}
/*
 * Mid-SP (524–767): the -89.4% / width:auto crop is tuned for ~390.
 * Image paint width ≈ height×(nw/nh); with height 744 that is ~992px, so
 * coverage fails once vw > ~524 (992 / 1.894). Fill like slides 2–3 here only.
 * <524 and ≥768 (PC override below) stay unchanged.
 */
@media (min-width: 524px) and (max-width: 767px) {
  .top-fv__slide--1 img,
  .opening-animation__reveal img {
    height: 100%;
    inset: 0;
    left: auto;
    max-width: none;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: auto;
    width: 100%;
  }
}
.top-story { display: block; min-height: 1650px; padding: 0 24px 120px; position: relative; }
.top-story .editorial-section__content { max-width: 100%; position: relative; }
/* SP: 縦組みラベルは本文の右端に固定し、見出しの上へ流れ込ませない。 */
.top-story .eyebrow { color: #205766; position: absolute; right: 0; top: 0; writing-mode: vertical-rl; }
.top-story__heading,
.top-story__copy { color: #000; }
.top-story__copy--desktop { display: none; }
.top-story__copy--mobile { display: block; }
.top-story__images img { object-fit: cover; position: absolute; }
.top-story__images img:nth-child(1) { height: 162px; right: 0; top: 990px; width: 216px; }
.top-story__images img:nth-child(2) { height: 130px; left: 24px; top: 1200px; width: 174px; }
.top-story__images img:nth-child(3) { height: 130px; left: calc(50% - 34px); top: 1390px; width: 174px; }
.editorial-section__image--land { background: none; overflow: hidden; }
.editorial-section__image--land img { height: 100%; object-fit: cover; width: 100%; }
.top-chef { background: #205766; border-radius: 48% 48% 0 0 / 12% 12% 0 0; color: #c9a063; display: block; margin-inline: calc(50% - 50vw); max-width: none; padding: 130px 24px 150px; }
.top-chef .editorial-section__content { text-align: center; }
.top-chef .editorial-section__content > p:last-child, .top-chef .editorial-section__content > p { color: #c9a063; }
.top-chef .eyebrow, .top-chef h2 { color: #c9a063; }
.top-chef hr { border: 0; border-top: 1px solid #c9a063; margin: 50px 0 38px; }
.top-chef__images { height: 380px; margin: 0 auto 56px; max-width: 520px; position: relative; }
.top-chef__images img { object-fit: cover; position: absolute; }
.top-chef__images img:nth-child(1) { height: 180px; left: 10%; top: 0; width: 240px; }
.top-chef__images img:nth-child(2) { height: 88px; right: 5%; top: 162px; width: 117px; }
.top-chef__images img:nth-child(3) { height: 108px; left: 22%; top: 260px; width: 144px; }
.top-chef__name { font-size: 15px; }
.maison-section__copy > img { display: block; height: 360px; margin: 20px auto 0; object-fit: cover; width: 257px; }
.maison-section__map > iframe { display: block; height: 180px; width: 100%; }
.top-business-cta > img { height: 230px; margin: 25px auto; object-fit: cover; width: min(100%, 306px); }

/*
 * SP: Pastry Chef / The Maison
 * The PC versions below are intentionally absolute Figma coordinates. On
 * mobile, compose each colored arch as its own vertical artboard instead.
 */
@media (max-width: 767px) {
  /*
   * SP Figma MaisonFarmer-new 2188:105 / 2188:118 (frame 390):
   * Background shape 538 wide with top ellipse 538×345 (ry 172.5),
   * centered (x -74). Viewport shows only a shallow arc (~54px sagitta),
   * not a true semicircle on the artboard width.
   */
  .top-chef,
  .top-maison {
    --section-arc-width: calc(538 / 390 * 100%);
    --section-arc-radius-y: calc(172.5 / 390 * 100vw);
  }

  .top-chef {
    background: transparent;
    border-radius: 0;
    height: 1655px;
    isolation: isolate;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
  }
  .top-chef::before {
    background: #205766;
    border-radius: 50% 50% 0 0 / var(--section-arc-radius-y) var(--section-arc-radius-y) 0 0;
    content: "";
    height: 1655px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: var(--section-arc-width);
    z-index: 0;
  }
  .top-chef > * {
    position: relative;
    z-index: 1;
  }
  .top-chef__images {
    height: auto;
    inset: 0;
    margin: 0;
    max-width: none;
    position: absolute;
    width: auto;
  }
  /* Figma 2020:433 — 68,196 / 262×197
   * Avoid transform here so reveal `translate` does not shift Y. */
  .top-chef__images img:nth-child(1) {
    height: 197px;
    left: calc(50% - min(33.59vw, 131px));
    top: 196px;
    width: min(67.18vw, 262px);
  }
  /* Figma 2188:113 — 233,775 / 157×118 (rel top 775) */
  .top-chef__images img:nth-child(2) {
    height: 118px;
    right: 0;
    top: 775px;
    width: 157px;
  }
  /* Figma 2188:114 — 32,930 / 157×118 (rel top 930) */
  .top-chef__images img:nth-child(3) {
    height: 118px;
    left: 32px;
    top: 930px;
    width: 157px;
  }
  .top-chef .editorial-section__content {
    inset: 0;
    margin: 0;
    max-width: none;
    position: absolute;
    text-align: center;
    width: auto;
  }
  .top-chef .editorial-section__content > * {
    margin: 0;
    position: absolute;
  }
  /* Figma 2013:332 — top 120 */
  .top-chef .top-chef__heading {
    font-family: Cabin, sans-serif;
    font-size: 20px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 24px;
    top: 120px;
    transform: translateX(-50%);
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Figma 2013:333 — top 445 */
  .top-chef h2 {
    font-family: Cabin, sans-serif;
    font-size: 20px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 24px;
    top: 445px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  /* Figma 2020:438 — top 527; leading 1.6 synced to PC 2193:431 */
  .top-chef .top-chef__message {
    font-size: 12px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 19.2px;
    text-align: left;
    top: 527px;
    transform: translateX(-50%);
    width: 294px;
  }
  /* Figma 2188:109 — rel top 1100, w 310 */
  .top-chef hr {
    border-top-color: #c9a063;
    left: 50%;
    top: 1100px;
    transform: translateX(-50%);
    width: 310px;
  }
  /* Figma 2188:107 — PROFILE rel top 1153 */
  .top-chef .top-chef__profile-label {
    font-family: Cabin, sans-serif;
    font-size: 12px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 14.4px;
    top: 1153px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  /* PROFILE → name → bio (readable order; Figma 2188 absolute labels overlap). */
  .top-chef .top-chef__name {
    font-size: 13px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 20.8px;
    text-align: center;
    top: 1205px;
    transform: translateX(-50%);
    width: 259px;
  }
  .top-chef .top-chef__bio {
    font-size: 12px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 19.2px;
    text-align: left;
    top: 1256px;
    transform: translateX(-50%);
    width: 259px;
  }

  /* SP Figma 2188:118 — same 538-wide elliptical top as Chef (2188:105).
   * Artboard overlap is 225px (8068−7843), but SP bio wraps taller than
   * Figma's 114px block (~134px). Use a shallower pull-up so the gap from
   * bio bottom → beige arc peak stays ≈80px (Figma 7763→7843).
   * Green (::after) fills outside the beige arch so body white never shows
   * in the shallow arc flanks above the chef overlap. */
  .top-maison {
    --maison-arch-width: var(--section-arc-width);
    --maison-curve-depth: var(--section-arc-radius-y);
    --maison-overlap-depth: 159px;
    --maison-chef-green: #205766;
    --maison-beige: #c9a063;
    background: var(--maison-beige);
    color: #205766;
    height: 1026px;
    isolation: isolate;
    margin-top: calc(var(--maison-overlap-depth) * -1);
    overflow: hidden;
    padding: 0;
    position: relative;
  }
  /* Full-bleed green behind the arch flanks (below beige ::before). */
  .top-maison::after {
    background: var(--maison-chef-green);
    content: "";
    height: var(--maison-curve-depth);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
  }
  .top-maison::before {
    background: var(--maison-beige);
    border-radius: 50% 50% 0 0 / var(--section-arc-radius-y) var(--section-arc-radius-y) 0 0;
    content: "";
    height: 1026px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: var(--maison-arch-width);
    z-index: 1;
  }
  .top-maison > * { position: relative; z-index: 2; }
  .top-maison .maison-section__copy { inset: 0; margin: 0; max-width: none; position: absolute; width: auto; }
  /* Figma 2020:432 — top 196, 262×367 */
  .top-maison .maison-section__copy > img {
    aspect-ratio: 262 / 367;
    height: auto;
    left: 50%;
    margin: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
    position: absolute;
    top: 196px;
    transform: translateX(-50%);
    width: min(67.18vw, 262px);
  }
  /* Figma 2020:430 — top 120 */
  .top-maison .maison-section__copy .eyebrow {
    color: #205766;
    font-family: Cabin, sans-serif;
    font-size: 20px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 24px;
    position: absolute;
    top: 120px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  /* Figma 2188:121 — address 259px, 2 lines */
  .top-maison .maison-section__copy address {
    font-size: 12px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 615px;
    transform: translateX(-50%);
    white-space: normal;
    width: 259px;
  }
  /* Figma 2014:340 — top 673 (address bottom 653 + 20) */
  .top-maison .maison-section__copy > p:not(.eyebrow) {
    font-size: 10px;
    left: 50%;
    letter-spacing: .08em;
    line-height: 16px;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 673px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  /* Figma 2014:342 — top 709, h 174; link top 903 → margin-top 20 */
  .top-maison .maison-section__map {
    left: 0;
    margin: 0;
    max-width: none;
    position: absolute;
    text-align: center;
    top: 709px;
    width: 100%;
  }
  .top-maison .maison-section__map > iframe { height: 174px; margin: 0; width: 100%; }
  .top-maison .maison-section__map .text-link {
    color: #205766;
    display: inline-block;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 12px;
    margin-top: 20px;
    text-decoration: none;
  }

  .top-business-cta.section-narrow {
    margin: 0;
    padding: 104px 0 140px;
    text-align: center;
    width: 100%;
  }
  /* SP Figma 2020:440 — image 263 / copy 259 / button 310 */
  .top-business-cta__heading {
    color: #205766;
    font-family: Cabin, sans-serif;
    font-size: 20px;
    letter-spacing: .08em;
    line-height: 24px;
    margin: 0;
  }
  .top-business-cta > img {
    height: 197px;
    margin: 72px auto 0;
    object-fit: cover;
    width: 263px;
  }
  .top-business-cta .top-business-cta__copy {
    color: #205766;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin: 82px auto 0;
    text-align: left;
    width: 260px;
  }
  .top-business-cta .button-link {
    border-color: #205766;
    color: #205766;
    font-size: 12px;
    height: 80px;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin: 62px auto 0;
    max-width: none;
    min-width: 0;
    width: 310px;
  }
}

@media (min-width: 768px) {
  /* Opening終了時と同じ、画面全体を中央基準で覆う表示領域に統一する。 */
  .top-fv { height: 100dvh; min-height: 760px; width: 100%; }
  .top-fv__slide img,
  .top-fv__slide--1 img {
    height: 100%;
    inset: 0;
    left: auto;
    max-width: none;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: auto;
    width: 100%;
  }
  /* Figma: 最後の差し込み写真の下から土地と作り手の写真まで、約405pxの余白を保つ。 */
  /* 文章と縦組みラベルは、画面中央の共通880pxコンテンツ枠に収める。 */
  .top-story { margin-inline: auto; min-height: 2226px; padding: 0; width: var(--mf-editorial-width); }
  /* ラベルの基準はtop-story全体（880px）。本文だけを553pxに保つ。 */
  .top-story .editorial-section__content { left: 0; margin: 0; position: absolute; top: 0; width: var(--mf-editorial-width); }
  .top-story .editorial-section__content > :not(.eyebrow) { width: 553px; }
  .top-story h1 { font-size: 20px; font-weight: 500; letter-spacing: .08em; line-height: 32px; margin: 0 0 78px; }
  .top-story .editorial-section__content > p:last-child { font-size: 16px; letter-spacing: .08em; line-height: 36.8px; margin: 0; }
  .top-story__copy--desktop { display: block; font-size: 16px; letter-spacing: .08em; line-height: 36.8px; margin: 0; }
  .top-story__copy--mobile { display: none; }
  /* PC上の縦組み英字ラベルは、共通880pxコンテンツ枠の右端を基準にする。 */
  .top-story .eyebrow { font-size: 20px; letter-spacing: .08em; line-height: 24px; left: auto; position: absolute; right: 0; top: 0; writing-mode: vertical-rl; }
  .top-story__images img:nth-child(1) { height: 203px; right: 0; top: 1024px; width: 271px; }
  .top-story__images img:nth-child(2) { height: 163px; left: 119px; top: 1362px; width: 217px; }
  .top-story__images img:nth-child(3) { height: 163px; left: 445px; top: 1658px; width: 217px; }
  /* Figma node 2115:1136: コラージュ末尾から490px空けた、幅2429pxの円弧背景。
   * Bottom ::after: full-bleed green so ultra-wide flanks behind THE MAISON
   * stay chef-green (arch ::before alone is only 2429px wide). */
  .top-chef {
    --maison-arch-width: 2429px;
    --maison-curve-depth: calc(var(--maison-arch-width) / 2);
    --maison-overlap-depth: 318px;
    --maison-chef-green: #205766;
    background: transparent;
    border-radius: 0;
    isolation: isolate;
    margin-top: 490px;
    min-height: 2729px;
    overflow: hidden;
    padding-top: 400px;
    position: relative;
  }
  .top-chef::before {
    background: var(--maison-chef-green);
    border-radius: 5000px 5000px 0 0;
    content: "";
    height: 2729px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: var(--maison-arch-width);
    z-index: 0;
  }
  .top-chef::after {
    background: var(--maison-chef-green);
    bottom: 0;
    content: "";
    height: var(--maison-curve-depth);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 0;
  }
  .top-chef > * { position: relative; z-index: 1; }
  .top-chef__images { height: 570px; max-width: 560px; }
  .top-chef__images img:nth-child(1) { height: 240px; left: 0; width: 321px; }
  .top-chef__images img:nth-child(2) { height: 118px; right: 0; width: 157px; }
  .top-chef__images img:nth-child(3) { height: 146px; left: 63px; top: 420px; width: 195px; }
  .maison-section__copy > img { height: 482px; margin-top: 34px; width: 344px; }
  .maison-section__map > iframe { height: 214px; }

  /* Figma node 2115:1136: Pastry Chefの要素座標。 */
  .top-chef { padding-top: 0; }
  .top-chef__images { height: auto; inset: 0; margin: 0; max-width: none; position: absolute; width: auto; }
  .top-chef__images img:nth-child(1) { height: 240px; left: calc(50% - 281px); top: 553px; width: 321px; }
  .top-chef__images img:nth-child(2) { height: 118px; left: calc(50% + 123px); right: auto; top: 769px; width: 157px; }
  .top-chef__images img:nth-child(3) { height: 146px; left: calc(50% - 218px); object-position: 50% 76%; top: 974px; width: 195px; }
  .top-chef .editorial-section__content { inset: 0; margin: 0; max-width: none; position: absolute; width: auto; }
  .top-chef .editorial-section__content > * { margin: 0; position: absolute; }
  .top-chef .top-chef__heading { font-family: Cabin, sans-serif; font-size: 24px; left: 50%; letter-spacing: .08em; line-height: 28.8px; top: 400px; transform: translateX(-50%); white-space: nowrap; }
  .top-chef h2 { font-family: Cabin, sans-serif; font-size: 24px; left: calc(50% - 80px); letter-spacing: .08em; line-height: 28.8px; top: 1260px; white-space: nowrap; }
  .top-chef .top-chef__profile-label { font-family: Cabin, sans-serif; font-size: 16px; left: 50%; letter-spacing: .08em; line-height: 19.2px; top: 1850px; transform: translateX(-50%); white-space: nowrap; }
  /* MaisonFarmer-new 2193:431 — 14px / lh 1.6 / #c9a063 */
  .top-chef .top-chef__message { font-size: 14px; left: 50%; letter-spacing: .08em; line-height: 22.4px; text-align: left; top: 1359px; transform: translateX(-50%); width: 294px; }
  .top-chef hr { border-top-color: #c9a063; left: 50%; top: 1721px; transform: translateX(-50%); width: 880px; }
  .top-chef .top-chef__name { font-size: 16px; left: 50%; letter-spacing: .08em; line-height: 25.6px; text-align: center; top: 1901px; transform: translateX(-50%); width: 259px; }
  .top-chef .top-chef__bio,
  .top-chef .editorial-section__content > p.top-chef__bio {
    font-size: 14px;
    left: calc(50% - 159px);
    letter-spacing: .08em;
    line-height: 22.4px;
    text-align: left;
    top: 1959px;
    width: 317px;
  }

  /* Figma node 2115:1137: Chef背景へ318px重なる金色の半円。
   * Arch is a fixed 2429px capsule; on viewports where the visible curve depth
   * exceeds the 318px overlap (≳1600px), transparent sides showed body white.
   * ::after paints full-bleed chef green for the curve depth; section bg is
   * beige so ultra-wide (>2429) sides below the curve stay on-brand. */
  .top-maison {
    --maison-arch-width: 2429px;
    --maison-arch-radius: 5000px;
    --maison-curve-depth: calc(var(--maison-arch-width) / 2);
    --maison-overlap-depth: 318px;
    --maison-chef-green: #205766;
    --maison-beige: #c9a063;
    background: var(--maison-beige);
    color: #205766;
    display: block;
    height: 1345px;
    isolation: isolate;
    margin-top: calc(var(--maison-overlap-depth) * -1);
    overflow: hidden;
    padding: 0;
    position: relative;
  }
  .top-maison::after {
    background: var(--maison-chef-green);
    content: "";
    height: var(--maison-curve-depth);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
  }
  .top-maison::before {
    background: var(--maison-beige);
    border-radius: var(--maison-arch-radius) var(--maison-arch-radius) 0 0;
    content: "";
    height: 1345px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: var(--maison-arch-width);
    z-index: 1;
  }
  .top-maison > * { position: relative; z-index: 2; }
  /*
   * Keep copy positioned so z-index paints above the beige ::before arch.
   * position:static made z-index inert and hid eyebrow/image under the arch
   * after the green-backdrop fix raised ::before to z-index:1. Map stayed
   * visible because it is position:absolute with z-index:2. SP uses its own
   * absolute copy rule and is unchanged.
   */
  .top-maison .maison-section__copy {
    margin: 0;
    max-width: none;
    position: relative;
    width: auto;
    z-index: 2;
  }
  .top-maison .maison-section__copy > img { height: 482px; left: calc(50% - 235px); margin: 0; max-width: none; object-fit: cover; object-position: 50% 0; position: absolute; top: 541px; transform: translateX(-50%); width: 344px; }
  .top-maison .maison-section__copy .eyebrow { color: #205766; font-family: Cabin, sans-serif; font-size: 24px; left: 50%; letter-spacing: .08em; line-height: 28.8px; position: absolute; top: 400px; transform: translateX(-50%); white-space: nowrap; }
  /* MaisonFarmer-new 2193:438 — 14px / lh 1.6; text box 325×44, text-align center.
   * left stays at Figma box origin (50%+49). width must be the Figma box (325px),
   * not max-content — otherwise both lines center inside a narrower box and the
   * block sits ~24px left of the map column axis. */
  .top-maison .maison-section__copy address {
    font-size: 14px;
    left: calc(50% + 49px);
    letter-spacing: .08em;
    line-height: 22.4px;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 598px;
    white-space: nowrap;
    width: 325px;
  }
  .top-maison .maison-section__copy > p:not(.eyebrow) { font-size: 12px; left: calc(50% + 109px); letter-spacing: .08em; line-height: 19.2px; margin: 0; position: absolute; top: 698px; white-space: nowrap; }
  .top-maison .maison-section__map { left: calc(50% + 16px); margin: 0; max-width: none; position: absolute; text-align: center; top: 742px; width: 390px; }
  .top-maison .maison-section__map > iframe { height: 174px; margin: 0; width: 390px; }
  .top-maison .maison-section__map .text-link { color: #205766; display: inline-block; font-size: 12px; letter-spacing: .96px; margin-top: 22px; text-decoration: none; }
}

/* オープニング最終状態と通常FVで同一の白帯（なぜアイスなのか）。
 * SP Figma 2083:692/693 — band 25×213 / text 13px Medium / lh 175% / tracking 8%. */
.top-fv__copy,
.opening-animation__copy {
  background: #fff;
  color: #c9a063;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 22.75px;
  margin: 0;
  overflow: hidden;
  padding: 14px 0;
  position: absolute;
  right: 36px;
  text-align: center;
  top: 437px;
  width: 25px;
}
.top-fv__copy {
  height: 213px;
  /* Above all FV slides (z-index 1–3) so the white band never disappears mid-rotation. */
  z-index: 5;
}

/* TOP / land body: Figma MaisonFarmer--1 2203:334 (PC) / 2203:560 (SP).
 * Image + body copy only — title / LAND & MAKERS removed. */
.top-land {
  min-height: 0;
  padding: 0;
  position: relative;
}
.top-land__image { height: 482px; overflow: hidden; }
.top-land__image-reveal-target { height: 100%; width: 100%; }
.top-land__image img {
  --land-base-y: 0%;
  --land-parallax-y: 0px;
  --land-scale: 1;
  display: block;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--land-base-y) + var(--land-parallax-y)), 0) scale(var(--land-scale));
  width: 100%;
}
/* SP: slight scale so soft parallax never shows container edges */
.js .top-land__image img { --land-scale: 1.08; }
/* SP Figma 2203:561 — 12px / lh 230% / tracking 8%; gap image→copy 94px; copy 294 @ x=24. */
.top-land__content {
  box-sizing: border-box;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 27.6px;
  margin: 94px 0 0 24px;
  padding: 0;
  position: relative;
  width: min(294px, calc(100% - 48px));
}
.top-land__copy--desktop { display: none; }
.top-land__copy--mobile { display: block; }
.top-land__copy { color: #000; margin: 0; text-align: left; }

@media (min-width: 768px) {
  /* PC Figma 2203:334 — 1512×1797; image 982; gap 260; copy 648×555. */
  .top-land { height: auto; margin: 0; max-width: none; min-height: 0; padding: 0 0 0; }
  .top-land__image { height: 982px; width: 100%; }
  /* Existing Figma crop (-7.7%) kept as --land-base-y; parallax adds px on top. */
  .top-land__image img,
  .js .top-land__image img {
    --land-base-y: -7.7%;
    --land-scale: 1;
    height: 115.4%;
    object-fit: fill;
  }
  .top-land__content {
    font-size: 16px;
    letter-spacing: .08em;
    line-height: 36.8px;
    margin: 260px auto 260px;
    padding: 0;
    width: 648px;
  }
  .top-land__copy--desktop { display: block; }
  .top-land__copy--mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .top-land__image img,
  .js .top-land__image img {
    --land-parallax-y: 0px;
    --land-scale: 1;
  }
  @media (min-width: 768px) {
    .top-land__image img,
    .js .top-land__image img {
      --land-base-y: -7.7%;
      --land-scale: 1;
    }
  }
}

/* TOP / collage: Figma node 2115:1135 */
/*
 * Pastry Chef overlap: pin the tall collage so its bottom stays in view
 * while .top-chef scrolls over as a higher layer.
 * Note: sticky `top` percentages resolve against the containing block, not
 * the element height — use the same fixed heights as .top-collage.
 */
.top-chef-stack {
  isolation: isolate;
  position: relative;
}
.top-chef-stack .top-collage {
  position: sticky;
  /* Base height 1726px (overridden below for SP/PC artboards). */
  top: calc(100vh - 1726px);
  top: calc(100dvh - 1726px);
  z-index: 1;
}
.top-chef-stack .top-chef {
  position: relative;
  z-index: 2;
}

.top-collage { background: #fff; height: 1726px; overflow: hidden; position: relative; }
.top-collage__i { max-width: none; object-fit: cover; position: absolute; }

/* Soft staggered reveal — opacity + translate only (keeps existing transform/rotate/scaleX). */
.js .top-collage__i {
  opacity: 0;
  transition:
    opacity 1s cubic-bezier(.48, .91, .78, 1),
    translate 1s cubic-bezier(.48, .91, .78, 1);
  /* 17要素: delay 0〜3s + duration 1s ≒ 全体約4秒 */
  transition-delay: calc(var(--reveal-index, 0) * .1875s);
  translate: 0 12px;
}
.js .top-collage.is-visible .top-collage__i {
  opacity: 1;
  translate: 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .top-collage__i {
    opacity: 1;
    transition: none;
    translate: none;
  }
}
.top-collage__i--ill-5,
.top-collage__i--ill-1,
.top-collage__i--ill-4,
.top-collage__i--ill-7 { overflow: hidden; }
.top-collage__i--ill-5 > img,
.top-collage__i--ill-1 > img,
.top-collage__i--ill-4 > img,
.top-collage__i--ill-7 > img { max-width: none; position: absolute; }
.top-collage__i--ill-5 > img { height: 119.48%; left: -48%; top: -10.39%; width: 184%; }
.top-collage__i--ill-1 > img { height: 255.68%; left: -43.42%; top: -26.14%; width: 296.05%; }
.top-collage__i--ill-4 > img { height: 227.15%; left: -51.42%; top: -59.93%; width: 207.75%; }
.top-collage__i--ill-7 > img { height: 157.04%; left: -33.1%; top: -29.58%; width: 164.04%; }
.top-collage__i--kv-1 { height: 58px; left: 55%; top: 0; transform: scaleX(-1); width: 59px; }
.top-collage__i--ill-5 { height: 82px; left: 20%; top: 150px; width: 53px; }
.top-collage__i--label-chrysanthemum { height: 19px; left: 30%; top: 117px; width: 62px; }
.top-collage__i--label-fig-fruit { height: 10px; left: 56%; top: 238px; width: 22px; }
.top-collage__i--label-sansho { height: 19px; left: 14%; top: 360px; width: 59px; }
.top-collage__i--label-fig-leaf { height: 13px; left: 69%; top: 350px; width: 19px; }
.top-collage__i--label-rhubarb { height: 12px; left: 58%; top: 702px; width: 21px; }
.top-collage__i--photo-1 { height: 63px; right: 15%; top: 170px; width: 84px; }
.top-collage__i--ill-1 { height: 47px; left: 45%; top: 250px; width: 41px; }
.top-collage__i--ill-4 { height: 59px; left: 12%; top: 360px; width: 64px; }
.top-collage__i--photo-2 { height: 49px; left: 33%; top: 490px; width: 65px; }
.top-collage__i--photo-3 { height: 49px; left: 44%; top: 530px; width: 65px; }
.top-collage__i--ill-7 { height: 54px; right: 18%; top: 410px; width: 52px; }
.top-collage__i--ill-2 { height: 73px; left: 47%; top: 720px; transform: rotate(20deg); width: 72px; }
.top-collage__i--kv-2 { height: 78px; left: 52%; top: 750px; width: 79px; }
.top-collage__i--ill-3 { height: 67px; left: 30%; top: 890px; transform: none; width: 59px; }
.top-collage__i--photo-4 { bottom: 63px; height: 63px; right: 30%; width: 84px; }

/*
 * SP collage — the illustrations form a single editorial composition on the
 * 390px artboard. Keep these coordinates scoped to mobile so the approved PC
 * composition below remains completely independent.
 */
@media (max-width: 767px) {
  .top-collage { height: 1726px; }
  .top-chef-stack .top-collage {
    top: calc(100vh - 1726px);
    top: calc(100dvh - 1726px);
  }

  /* SP Figma 2188:130 — coords relative to collage top (page y 4587). */
  .top-collage__i--kv-1 { height: 110px; left: auto; right: 0; top: 0; width: 112px; }
  .top-collage__i--ill-5 { height: 154px; left: 60px; top: 156px; width: 100px; }
  .top-collage__i--label-chrysanthemum { height: 36px; left: 55px; top: 120px; width: 118px; }
  .top-collage__i--photo-1 { height: 118px; left: 193px; right: auto; top: 284px; width: 157px; }
  .top-collage__i--ill-1 { height: 88px; left: 160px; top: 466px; width: 76px; }
  .top-collage__i--label-fig-fruit { height: 18px; left: 216px; top: 558px; width: 40px; }
  .top-collage__i--ill-4 { height: 116px; left: 1px; top: 558px; width: 91px; }
  .top-collage__i--label-sansho { height: 35px; left: 52px; top: 698px; width: 111px; }
  .top-collage__i--ill-7 { height: 116px; left: auto; right: 0; top: 748px; width: 91px; }
  .top-collage__i--label-fig-leaf { height: 17px; left: auto; right: 56px; top: 924px; width: 36px; }
  .top-collage__i--photo-2 { height: 88px; left: 66px; top: 881px; width: 118px; }
  .top-collage__i--photo-3 { height: 88px; left: 162px; top: 958px; width: 118px; }
  .top-collage__i--ill-2 { height: 136px; left: 16px; top: 1096px; width: 136px; }
  .top-collage__i--label-rhubarb { height: 22px; left: 124px; top: 1120px; width: 39px; }
  .top-collage__i--kv-2 { height: 146px; left: 74px; top: 1146px; width: 148px; }
  .top-collage__i--ill-3 { height: 118px; left: auto; right: 0; top: 1412px; width: 104px; }
  .top-collage__i--photo-4 { bottom: auto; height: 118px; left: 42px; right: auto; top: 1608px; width: 157px; }
}

@media (min-width: 768px) {
  .top-collage { height: 3040px; }
  .top-chef-stack .top-collage {
    top: calc(100vh - 3040px);
    top: calc(100dvh - 3040px);
  }
  .top-collage__i--kv-1 { height: 176px; left: 834px; top: 0; width: 179px; }
  .top-collage__i--ill-5 { height: 247px; left: 391px; top: 263px; width: 160px; }
  .top-collage__i--label-chrysanthemum { height: 58px; left: 503px; top: 205px; width: 189px; }
  .top-collage__i--label-fig-fruit { height: 29px; left: 771px; top: 953px; width: 63px; }
  .top-collage__i--label-sansho { height: 57px; left: 213px; top: 1092px; width: 178px; }
  .top-collage__i--label-fig-leaf { height: 38px; left: 1041px; top: 1264px; width: 57px; }
  .top-collage__i--label-rhubarb { height: 35px; left: 883px; top: 2136px; width: 63px; }
  .top-collage__i--photo-1 { height: 189px; left: 1038px; right: auto; top: 510px; width: 252px; }
  .top-collage__i--ill-1 { height: 142px; left: 681px; top: 805px; width: 122px; }
  .top-collage__i--ill-4 { height: 177px; left: 228px; top: 1167px; width: 193px; }
  .top-collage__i--photo-2 { height: 146px; left: 499px; top: 1581px; width: 195px; }
  .top-collage__i--photo-3 { height: 146px; left: 659px; top: 1709px; width: 195px; }
  .top-collage__i--ill-7 { height: 162px; left: 867px; right: auto; top: 1305px; width: 155px; }
  .top-collage__i--ill-2 { height: 170px; left: 734px; top: 2121px; width: 170px; }
  .top-collage__i--kv-2 { height: 234px; left: 803px; top: 2177px; width: 238px; }
  .top-collage__i--ill-3 { height: 202px; left: 465px; top: 2577px; width: 179px; }
  .top-collage__i--photo-4 { bottom: auto; height: 189px; left: 814px; right: auto; top: 2851px; width: 252px; }
}

@media (prefers-reduced-motion: reduce) { .opening-animation { display: none; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Figma captures (2026-07-19) — shared layout corrections */
.site-header { align-items: flex-start; justify-content: center; padding: 24px 20px 0; }
.site-header__brand { height: 48px; width: 92px; }
.site-header__menu { height: 35px; right: 20px; top: 31px; width: 35px; }
.site-menu { background: #206170; color: #d6a653; padding: 56px 41px; }
.site-menu__close { color: #d6a653; right: 18px; top: 17px; }
.site-menu__inner { display: block; max-width: 940px; }
.site-menu__inner section { border: 0; text-align: center; }
.site-menu__inner section + section { margin-top: 88px; }
.site-menu__inner .eyebrow { color: #dda74d; font-size: 21px; }
.site-menu__inner p:not(.eyebrow), .site-menu address { color: #d0a653; font-size: 13px; letter-spacing: .08em; margin: 36px auto 0; max-width: 330px; }
.site-menu__business > p:not(.eyebrow) { text-align: left; }
.site-menu .text-link { border: 1px solid #d0a653; color: #d0a653; margin-top: 40px; min-width: 310px; padding: 20px; }

.mf-page-business .site-header { background: transparent; }
.mf-page-thank-you .site-header { background: transparent; }
.mf-page-privacy { background: #206170; color: #caa160; }
.mf-page-privacy .site-header { background: transparent; }
.mf-page-privacy .site-footer { color: #4b4b4b; }
.mf-page-thank-you .site-footer { display: none; }

/* Thank You: one viewport, no scroll; content centered. */
.mf-page-thank-you {
  height: 100dvh;
  overflow: hidden;
}
.mf-page-thank-you #main-content {
  height: 100%;
  min-height: 100dvh;
}

.page-hero--business { min-height: 490px; padding: 130px 24px 60px; text-align: center; }
/* SP — colors aligned to MaisonFarmer-new 2193:562 */
.page-hero--business .eyebrow { color: #205766; font-family: Cabin, sans-serif; font-size: 20px; font-weight: 400; letter-spacing: .08em; line-height: 24px; }
.page-hero--business > p:last-of-type { color: #000; font-size: 12px; letter-spacing: .08em; line-height: 19.2px; margin-inline: auto; max-width: 260px; text-align: left; }
.page-hero--business .text-link {
  color: #c9a063;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 12px;
  margin-top: 30px;
  /* SP Figma 2020:1120 — text 116 / rule 129 / gap 10; rule overhangs 6–7px. */
  padding: 0 7px 10px 6px;
}
.business-services { padding: 0 0 55px; }
.business-services ol { border: 0; display: grid; gap: 15px; grid-template-columns: 1fr; margin: 0; }
.business-services li { border: 1px solid #205766; border-radius: 99px; display: block; padding: 3px; text-align: center; }
.business-services h2 { color: #205766; font-size: 14px; font-weight: 400; letter-spacing: .08em; line-height: 22.4px; }
/* Legacy contact-form rules retained only for non-business pages if needed.
   Business contact uses .mf-contact-form (see bottom of stylesheet). */
.business-contact { color: #3d3d3d; padding: 57px 0 80px; width: min(880px, 100%); }
.business-contact > p { font-size: 10px; line-height: 1.8; }
.business-contact hr { border: 0; border-top: 1px solid #555; margin: 29px 0 22px; }

.mf-page-privacy .privacy-page { padding-bottom: 0; width: 100%; }
.mf-page-privacy .page-hero--privacy { min-height: 306px; padding: 130px 24px 50px; }
/* SP Figma 2025:541 / 2025:570 — overridden in max-width:767 block below as well */
.mf-page-privacy .page-hero--privacy .eyebrow { color: #d0a653; font-family: Cabin, sans-serif; font-size: 20px; letter-spacing: .08em; line-height: 24px; }
.mf-page-privacy .page-hero--privacy > p:last-of-type { color: #caa160; font-size: 12px; letter-spacing: .08em; line-height: 19.2px; margin-top: 58px; }
.mf-page-privacy .privacy-page__body { font-size: 12px; letter-spacing: .08em; line-height: 19.2px; margin-inline: auto; max-width: 326px; padding: 0 0 82px; width: 100%; }
.mf-page-privacy .privacy-page__body section { margin-top: 38px; }
.mf-page-privacy .privacy-page__body h2 { color: #caa160; font-size: 12px; font-weight: 400; letter-spacing: .08em; line-height: 19.2px; margin-bottom: 18px; }
.mf-page-privacy .site-footer { margin-top: 0; }

.page-hero--thank-you {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
  padding: 24px;
}
.page-hero--thank-you .eyebrow { color: #d0a653; font-size: 24px; }
.page-hero--thank-you h1 { color: #222; font-size: 15px; line-height: 1.9; margin-top: 58px; }
.page-hero--thank-you > p:last-of-type { color: #222; font-size: 15px; margin-top: 0; }
.page-hero--thank-you .button-link { color: #d0a653; margin-top: 72px; min-height: 80px; min-width: 318px; }

@media (min-width: 768px) {
  .site-header { padding-top: 39px; }
  .site-header__brand { height: 58px; width: 112px; }
  .site-header__menu { height: 51px; right: 40px; top: 39px; width: 51px; }
  .site-menu { padding: 84px 12vw; }
  .site-menu__inner { display: grid; gap: 155px; grid-template-columns: 1fr 1fr; }
  .site-menu__inner section + section { margin-top: 0; }
  .site-menu__inner p:not(.eyebrow), .site-menu address { font-size: 15px; max-width: 370px; }
  .page-hero--business { min-height: 765px; padding-top: 340px; }
  .page-hero--business .eyebrow { font-size: 24px; letter-spacing: .08em; line-height: 28.8px; }
  .page-hero--business > p:last-of-type { font-size: 16px; letter-spacing: .08em; line-height: 36.8px; max-width: 767px; text-align: center; }
  .page-hero--business .text-link { font-size: 14px; letter-spacing: .08em; line-height: 14px; }
  .business-services { padding-bottom: 100px; width: min(500px, 100%); }
  .business-services ol { gap: 22px 30px; grid-template-columns: repeat(2, 1fr); }
  .business-services h2 { font-size: 16px; letter-spacing: .08em; line-height: 25.6px; }
  .business-contact { padding: 160px 0 190px; }
  .business-contact > p { font-size: 16px; }
  .business-contact hr { margin: 70px 0 52px; }
  .mf-page-privacy .page-hero--privacy { min-height: 645px; padding-top: 380px; }
  .mf-page-privacy .page-hero--privacy .eyebrow { font-size: 24px; letter-spacing: .08em; line-height: 28.8px; }
  .mf-page-privacy .page-hero--privacy > p:last-of-type { font-size: 16px; letter-spacing: .08em; line-height: 36.8px; }
  .mf-page-privacy .privacy-page__body { font-size: 16px; letter-spacing: .08em; line-height: 25.6px; max-width: 880px; padding: 0 0 160px; }
  .mf-page-privacy .privacy-page__body h2 { font-size: 16px; letter-spacing: .08em; line-height: 25.6px; }

  /* TOP / For Business CTA and footer: Figma nodes 2051:693, 2051:695
     見出しまでの上余白 240px に合わせ、コンテンツ下端（約636px）＋同量の下余白を確保 */
  .top-business-cta.section-narrow { height: 876px; margin: 0; max-width: none; overflow: visible; padding: 0; position: relative; text-align: left; width: 100%; z-index: 1; }
  .top-business-cta__heading { color: #205766; font-family: Cabin, sans-serif; font-size: 24px; left: calc(50% - 93px); letter-spacing: .08em; line-height: 28.8px; margin: 0; position: absolute; top: 240px; }
  .top-business-cta > img { height: 287px; left: calc(50% - 384px); margin: 0; object-fit: cover; position: absolute; top: 349px; width: 383px; }
  /* MaisonFarmer-new 2193:415 — 14px / lh 1.6 / #205766 */
  .top-business-cta .top-business-cta__copy { color: #205766; font-size: 14px; left: calc(50% + 71px); letter-spacing: .08em; line-height: 22.4px; margin: 0; position: absolute; top: 349px; width: 310px; }
  .top-business-cta .button-link { align-items: center; border-color: #205766; color: #205766; display: flex; font-size: 12px; height: 80px; justify-content: center; left: calc(50% + 71px); letter-spacing: .08em; line-height: 19.2px; margin: 0; position: absolute; top: 557px; width: 310px; }

  .site-footer { background: #fff; display: block; height: 1061px; min-height: 0; overflow: hidden; padding: 0; position: relative; }
  .site-footer__art { height: 600px; left: 0; top: 240px; transform: none; width: 100%; z-index: 0; }
  .site-footer__art img { height: 346.49%; left: 0; top: -112.14%; width: 100%; }
  .site-footer__brand { height: 132px; left: 50%; position: absolute; top: 490px; transform: translateX(-50%); width: 253px; z-index: 1; }
  .site-footer__instagram { height: 23px; left: 49.01%; position: absolute; top: 900px; width: 23px; z-index: 1; }
  .site-footer__privacy { color: #000 !important; font-size: 10px !important; left: 50%; letter-spacing: .8px; position: absolute; top: 976px; transform: translateX(-50%); white-space: nowrap; z-index: 1; }
  .site-footer small { color: #000; font-size: 10px; left: 50%; letter-spacing: .8px; position: absolute; top: 1039px; transform: translateX(-50%); white-space: nowrap; z-index: 1; }
}

/* Figma node 10:2266 — placed last to override shared responsive rules. */
@media (min-width: 768px) {
  .site-menu { background: #205766; display: block; padding: 0; }
  /* Match the top-page logo box exactly, so the menu does not introduce a second logo scale. */
  .site-menu__brand { display: block; height: 113px; left: 50%; overflow: visible; position: absolute; top: 54px; transform: translateX(-50%); width: 113px; }
  .site-menu__brand img { height: 100%; max-width: 100%; object-fit: contain; position: static; width: 100%; }
  /*
   * Close ice aligns to the 1512 artboard margin when viewport ≥1512.
   * Below that, (100vw-1512)/2 is negative and pushed the ice off-screen
   * (e.g. 790→right:-326). Clamp so mid-width PC keeps the mark visible
   * without changing 1512 / ultra-wide placement.
   */
  .site-menu__close {
    height: 120px;
    padding: 0;
    right: max(20px, calc((100vw - 1512px) / 2 + 35px));
    top: 68px;
    width: 59px;
    z-index: 4;
  }
  .site-menu__close-ice { display: block; height: 120px; position: relative; width: 59px; }
  .site-menu__close-ice > img { height: 107px; left: 9px; max-width: none; object-fit: contain; position: absolute; top: 3px; width: 38px; }
  .site-menu__inner { display: block; inset: 0; margin: 0; max-width: none; position: absolute; width: auto; }
  .site-menu__inner section { margin: 0; padding: 0; position: absolute; text-align: left; }
  .site-menu__business { height: 401px; left: calc(50% - 470px); top: 230px; width: 310px; }
  .site-menu__location { height: 447px; left: calc(50% + 80px); top: 230px; width: 390px; }
  .site-menu__inner .eyebrow { color: #c9a063; font-family: Cabin, sans-serif; font-size: 24px; left: 50%; letter-spacing: 1.92px; line-height: 1.2; margin: 0; position: absolute; text-align: center; top: 0; transform: translateX(-50%); white-space: nowrap; }
  .site-menu__inner p:not(.eyebrow), .site-menu__inner address { color: #c9a063; font-size: 16px; letter-spacing: 1.28px; line-height: 1.6; margin: 0; max-width: none; position: absolute; }
  .site-menu__business > p:not(.eyebrow) { left: 50%; text-align: left; top: 89px; transform: translateX(-50%); width: 310px; }
  .site-menu__business .text-link { align-items: center; border: 1px solid #c9a063; bottom: 0; color: #c9a063; display: flex; font-size: 12px; height: 80px; justify-content: center; left: 50%; letter-spacing: .96px; margin: 0; padding: 0; position: absolute; transform: translateX(-50%); width: 310px; }
  .site-menu__location address { left: 50%; text-align: center; top: 89px; transform: translateX(-50%); width: 325px; }
  .site-menu__location > p:not(.eyebrow) { font-size: 12px; left: 50%; letter-spacing: .96px; text-align: center; top: 165px; transform: translateX(-50%); white-space: nowrap; width: 200px; }
  .site-menu__map { height: 174px; left: 50%; object-fit: cover; position: absolute; top: 232px; transform: translateX(-50%); width: 390px; }
  .site-menu__location .text-link { border: 0; border-bottom: 1px solid #c9a063; bottom: 0; color: #c9a063; font-size: 12px; left: 50%; letter-spacing: .96px; line-height: 1; margin: 0; min-width: 0; padding: 0 0 8px; position: absolute; text-align: center; transform: translateX(-50%); white-space: nowrap; width: auto; }
  .site-menu__instagram { bottom: 72px; height: 23px; left: calc(50% - 11px); position: absolute; top: auto; width: 23px; }
  .site-menu__instagram img { display: block; height: 100%; width: 100%; }
}

/*
 * Mid-PC menu (768–1511): 1512 artboard columns overflow when the viewport
 * is narrower than ~940px content span. Clamp edges so FOR BUSINESS / THE
 * MAISON stay on-screen. Exact 1512 layout is unchanged (query ends at 1511).
 */
@media (min-width: 768px) and (max-width: 1511px) {
  .site-menu__business {
    left: max(24px, calc(50% - 470px));
  }

  .site-menu__location {
    left: min(calc(100% - 390px - 24px), calc(50% + 80px));
  }
}

/* Figma index-ver1 opening (SP node 2026:370) */
.opening-animation { --opening-scale: 1; background: #fff; inset: 0; isolation: isolate; overflow: hidden; position: fixed; z-index: 100; }
/* Same 1s ease-in-out crossfade as .top-fv slide changes (5.556% of 18s). */
.opening-animation.is-handing-off {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}
.opening-animation__bouquet { height: 848px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(var(--opening-scale)); transform-origin: center; width: 390px; z-index: 2; }
.opening-animation__cup { height: 170px; left: 80px; object-fit: cover; opacity: 1; position: absolute; top: 403px; width: 210px; z-index: 3; }
.opening-animation__cup--front { z-index: 15; }
.opening-animation__material { height: calc(var(--height) * 1px); left: calc(var(--x) * 1px); opacity: 0; overflow: hidden; position: absolute; top: calc(var(--y) * 1px); transform: translateY(20px) rotate(var(--rotation)); transform-origin: 50% 100%; width: calc(var(--width) * 1px); z-index: var(--z); }
.opening-animation__material--first { z-index: 16; }
.opening-animation__material img { height: auto; max-width: none; position: absolute; transform-origin: center; width: auto; }
.opening-animation[data-phase="growing"] .opening-animation__material, .opening-animation[data-phase="completed"] .opening-animation__material, .opening-animation[data-phase="revealing-main-visual"] .opening-animation__material, .opening-animation[data-phase="showing-logo"] .opening-animation__material, .opening-animation[data-phase="showing-copy"] .opening-animation__material, .opening-animation[data-phase="showing-ice"] .opening-animation__material { animation: mf-opening-soft-in var(--duration) var(--delay) cubic-bezier(.48, .91, .78, 1) both; }
.opening-animation__bird { height: 70px; left: 114px; opacity: 0; position: absolute; top: 348px; transition: opacity .35s ease; width: 69px; z-index: 14; }
.opening-animation__bird-inner { height: 51px; left: 50%; overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-114.75deg) scaleY(-1); width: 54px; }
.opening-animation__bird img { height: 154.9%; left: -20.74%; max-width: none; position: absolute; top: -23.53%; width: 148.89%; }
.opening-animation__reveal { bottom: auto; clip-path: inset(0 100% 0 0); height: min(760px, 100dvh); inset-inline: 0; overflow: hidden; position: absolute; top: 0; z-index: 10; }
.opening-animation__reveal img { height: 100%; left: -89.4%; max-width: none; object-fit: cover; object-position: center; position: absolute; top: 0; width: auto; }
.opening-animation[data-phase="revealing-main-visual"] .opening-animation__reveal, .opening-animation[data-phase="showing-logo"] .opening-animation__reveal, .opening-animation[data-phase="showing-copy"] .opening-animation__reveal, .opening-animation[data-phase="showing-ice"] .opening-animation__reveal { animation: mf-opening-main-reveal 1800ms cubic-bezier(.55, 0, .17, 1) forwards; }
.opening-animation__hero-content { inset: 0; pointer-events: none; position: absolute; z-index: 11; }
.opening-animation__logo, .opening-animation__copy, .opening-animation__ice { opacity: 0; position: absolute; }
.opening-animation__cup, .opening-animation__logo, .opening-animation__copy, .opening-animation__ice { animation: none; }
.opening-animation__logo { left: 50%; top: 36px; transform: translateX(-50%) translateY(8px); width: 113px; height: 113px; }
.opening-animation__copy {
  height: 0;
  opacity: 0;
  transform: none;
  transition: height 800ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease-out;
}
/* Vertically center the 51px ice on the 113px logo box — same as .home .site-header__menu. */
.opening-animation__ice { right: 20px; top: calc(36px + (113px - 51px) / 2); transform: translateY(8px); width: 51px; height: 51px; }
.opening-animation[data-phase="showing-logo"] .opening-animation__logo, .opening-animation[data-phase="showing-copy"] .opening-animation__logo, .opening-animation[data-phase="showing-ice"] .opening-animation__logo { animation: mf-opening-logo-in 500ms cubic-bezier(.22, 1, .36, 1) forwards; }
/* 段階表示ではなく、白枠を一度で伸ばして上からスルッと露出する */
.opening-animation[data-phase="showing-copy"] .opening-animation__copy,
.opening-animation[data-phase="showing-ice"] .opening-animation__copy {
  height: 213px;
  opacity: 1;
}
.opening-animation[data-phase="showing-ice"] .opening-animation__ice { animation: mf-opening-ui-in 400ms cubic-bezier(.22, 1, .36, 1) forwards; }
/* Soft rise — same feel as top-story image / intro reveals (no scale bounce). */
@keyframes mf-opening-soft-in { 0% { opacity: 0; transform: translateY(20px) rotate(var(--rotation)); } 100% { opacity: 1; transform: translateY(0) rotate(var(--rotation)); } }
@keyframes mf-opening-main-reveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } }
@keyframes mf-opening-logo-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes mf-opening-ui-in { to { opacity: 1; transform: translateY(0); } }
@media (min-width: 768px) {
  .opening-animation__reveal { bottom: 0; height: auto; }
  .opening-animation__reveal img { height: 100%; left: 0; object-fit: cover; width: 100%; }

  /* Match .home header padding-top / menu top (26px on PC). */
  .opening-animation__logo { top: 26px; }
  .opening-animation__ice { top: calc(26px + (113px - 51px) / 2); }

  /*
   * PC: 「なぜアイスなのか」白帯を右下基準で固定（Figma 1512×982 → right 140 / bottom 100 / 30×308）。
   * top 固定だと短い viewport で overflow:hidden に見切れるため、
   * top: calc(100% - 408px) で下余白100pxを常に確保する（伸ばしアニメは上→下のまま）。
   */
  .top-fv__copy,
  .opening-animation__copy {
    bottom: auto;
    font-size: 20px;
    height: 308px;
    line-height: 35px;
    padding: 14px 0;
    right: 140px;
    top: calc(100% - 408px);
    width: 30px;
  }
  .opening-animation__copy {
    height: 0;
  }
  .opening-animation[data-phase="showing-copy"] .opening-animation__copy,
  .opening-animation[data-phase="showing-ice"] .opening-animation__copy {
    height: 308px;
  }
}

/* Wide-PC: opening logo scales with the same clamp as .home .site-header__brand. */
@media (min-width: 1600px) {
  .opening-animation__logo {
    height: clamp(113px, calc(113px + (100vw - 1600px) * 339 / 960), 452px);
    width: clamp(113px, calc(113px + (100vw - 1600px) * 339 / 960), 452px);
  }
}

/* The header already exists beneath the opening. Keep coordinates in sync so
   removing the overlay does not cause a visible jump (see also fixed chrome
   overrides further below: SP 36px / PC 26px padding-top). */
.home .site-header { padding: 36px 20px 0; }
.home .site-header__brand { height: 113px; width: 113px; }
.home .site-header__menu { height: 51px; right: 20px; top: calc(36px + (113px - 51px) / 2); width: 51px; }

@media (prefers-reduced-motion: reduce) { .opening-animation { display: none; } }

/* SP menu: keep the page locked behind the overlay, but allow the long menu itself to scroll. */
@media (max-width: 767px) {
  .site-menu {
    align-items: flex-start;
    display: block;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    touch-action: pan-y;
  }
  /* The menu uses the same 113px logo box as the top-page header. */
  .site-menu__brand {
    display: block;
    height: 113px;
    left: 50%;
    position: fixed;
    top: 54px;
    transform: translateX(-50%);
    width: 113px;
    z-index: 3;
  }
  .site-menu__brand img { height: 100%; object-fit: contain; width: 100%; }
  .site-menu__close {
    height: 107px;
    padding: 0;
    position: fixed;
    right: 20px;
    top: 47px;
    width: 51px;
    z-index: 4;
  }
  .site-menu__close-ice { display: block; height: 107px; position: relative; width: 51px; }
  .site-menu__close-ice > img { height: 107px; left: 6.5px; max-width: none; position: absolute; top: 0; width: 38px; }
  .site-menu__inner {
    display: block;
    margin: 0;
    max-width: none;
    padding: 226px 41px 0;
    width: 100%;
  }
  .site-menu__map {
    display: block;
    height: 174px;
    margin: 22px -41px 0;
    width: calc(100% + 82px);
  }
  .site-menu__location .text-link {
    border: 0;
    border-bottom: 1px solid #d0a653;
    margin-top: 22px;
    min-width: 0;
    padding: 0 0 8px;
  }
  .site-menu__instagram {
    display: block;
    height: 25px;
    margin: 88px auto calc(40px + env(safe-area-inset-bottom));
    width: 25px;
  }
  .site-menu__instagram img { display: block; height: 100%; width: 100%; }
}

/* SP footer: supplied 389 × 600 artwork is shown as-is, without cropping. */
@media (max-width: 767px) {
  /* Keep the landscape pastry photograph at its native 4:3 ratio. */
  .top-chef__images img:nth-child(2) {
    height: 118px;
    object-fit: contain;
    right: 0;
    width: 158px;
  }

  /* SP Figma 2023:410 — foot 390×821.
   * Art is 390×600; Instagram / privacy / copyright sit below the art in
   * normal flow so mid-width phones cannot overlap the pattern. */
  .site-footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0 0 12px;
    position: relative;
  }
  .site-footer__art {
    flex-shrink: 0;
    height: auto;
    left: auto;
    overflow: visible;
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
    z-index: 0;
  }
  .site-footer__art picture,
  .site-footer__art img {
    display: block;
    height: auto;
    left: auto;
    max-width: 100%;
    position: static;
    top: auto;
    width: 100%;
  }
  /* The SP logo belongs to the artwork area, not to the footer page.
   * This keeps its visual centre locked to the illustration at every width. */
  .site-footer__art .site-footer__brand--sp {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    overflow: visible;
    position: absolute;
    transform: none;
    width: auto;
    z-index: 1;
  }
  .site-footer__art .site-footer__brand--sp img {
    display: block;
    height: auto;
    max-width: none;
    position: static;
    top: auto;
    width: 180px;
  }
  .site-footer > .site-footer__brand:not(.site-footer__brand--sp) {
    display: none;
  }
  /* Figma: art bottom 600 → Instagram 665 (+65), 23×23 */
  .site-footer__instagram {
    flex-shrink: 0;
    height: 23px;
    left: auto;
    margin-top: 65px;
    position: relative;
    top: auto;
    transform: none;
    width: 23px;
    z-index: 1;
  }
  .site-footer__instagram img { height: 100%; width: 100%; }
  /* Figma: privacy 735 → 47px below Instagram (665+23) */
  .site-footer__privacy {
    color: #000 !important;
    flex-shrink: 0;
    font-size: 10px !important;
    left: auto;
    letter-spacing: .8px;
    margin-top: 47px;
    position: relative;
    top: auto;
    transform: none;
    white-space: nowrap;
    z-index: 1;
  }
  /* Figma: copyright 799 → 54px below privacy (735+10); bottom pad 12 */
  .site-footer small {
    color: #000;
    flex-shrink: 0;
    font-size: 10px;
    left: auto;
    letter-spacing: .8px;
    margin-top: 54px;
    position: relative;
    top: auto;
    transform: none;
    white-space: nowrap;
    z-index: 1;
  }
}
/* FOR BUSINESS: the header uses the same visual scale as the top page.
 * Keep these overrides page-scoped so the completed top page is untouched. */
.mf-page-business .site-header {
  padding: 54px 20px 0;
}

.mf-page-business .site-header__brand {
  height: 113px;
  width: 113px;
}

.mf-page-business .site-header__menu {
  height: 51px;
  right: 20px;
  top: calc(54px + (113px - 51px) / 2);
  width: 51px;
}

/* THANK YOU: same header chrome as top / FOR BUSINESS / PRIVACY. */
.mf-page-thank-you .site-header {
  padding: 54px 20px 0;
}

.mf-page-thank-you .site-header__brand {
  height: 113px;
  width: 113px;
}

.mf-page-thank-you .site-header__menu {
  height: 51px;
  right: 20px;
  top: calc(54px + (113px - 51px) / 2);
  width: 51px;
}

/* PRIVACY POLICY: align the page shell and the editorial rhythm with the
 * completed top / FOR BUSINESS screens, without changing those pages. */
.mf-page-privacy .site-header {
  padding: 54px 20px 0;
}

.mf-page-privacy .site-header__brand {
  height: 113px;
  width: 113px;
}

.mf-page-privacy .site-header__menu {
  height: 51px;
  right: 20px;
  top: calc(54px + (113px - 51px) / 2);
  width: 51px;
}

/* Keep the shared page chrome visible while the page scrolls.  The top
 * offset is intentionally reduced by one third from the approved layout. */
.site-header {
  position: fixed;
  padding-top: 16px;
}

.site-header__menu {
  top: 23px;
}

.home .site-header,
.mf-page-business .site-header,
.mf-page-thank-you .site-header,
.mf-page-privacy .site-header {
  padding-top: 36px;
}

.home .site-header__menu,
.mf-page-business .site-header__menu,
.mf-page-thank-you .site-header__menu,
.mf-page-privacy .site-header__menu {
  top: calc(36px + (113px - 51px) / 2);
}

@media (min-width: 768px) {
  .site-header,
  .home .site-header,
  .mf-page-business .site-header,
  .mf-page-thank-you .site-header,
  .mf-page-privacy .site-header {
    padding-top: 26px;
  }

  .home .site-header__menu,
  .mf-page-business .site-header__menu,
  .mf-page-thank-you .site-header__menu,
  .mf-page-privacy .site-header__menu {
    top: calc(26px + (113px - 51px) / 2);
  }

  .site-header__menu {
    top: 26px;
  }
}

/*
 * Wide-PC header logo — scale only above the normal 1440 artboard.
 * Base 113×113 (home / business / thank-you / privacy). Max ≈4× = 452px.
 * Ramp 1600→2560 continuously; top edge stays put via align-items:flex-start
 * + fixed header padding-top (logo grows downward). SP / ≤1440 unchanged.
 */
@media (min-width: 1600px) {
  .home .site-header,
  .mf-page-business .site-header,
  .mf-page-thank-you .site-header,
  .mf-page-privacy .site-header {
    --header-logo-width-base: 113px;
    --header-logo-width-wide-max: 452px;
  }

  .home .site-header__brand,
  .mf-page-business .site-header__brand,
  .mf-page-thank-you .site-header__brand,
  .mf-page-privacy .site-header__brand {
    /* (452 - 113) / (2560 - 1600) = 339 / 960 */
    height: clamp(
      var(--header-logo-width-base),
      calc(113px + (100vw - 1600px) * 339 / 960),
      var(--header-logo-width-wide-max)
    );
    width: clamp(
      var(--header-logo-width-base),
      calc(113px + (100vw - 1600px) * 339 / 960),
      var(--header-logo-width-wide-max)
    );
  }
}

@media (min-width: 768px) {
  .mf-page-privacy .page-hero--privacy {
    /* Figma 2115:1029 / 2115:1454→2115:1455:
     * lead copy bottom 571 → body h2 742 = 171px below the lead. */
    min-height: 0;
    padding: min(317px, 20.97vw) 20px 171px;
  }

  .mf-page-privacy .page-hero--privacy .eyebrow {
    font-family: Cabin, sans-serif;
    font-size: 24px;
    letter-spacing: .08em;
    line-height: 28.8px;
  }

  .mf-page-privacy .page-hero--privacy > p:last-of-type {
    font-size: 16px;
    letter-spacing: .08em;
    line-height: 36.8px;
    /* Figma: title bottom 397 → copy top 497 = 100px */
    margin-top: 100px;
    max-width: 767px;
    text-align: center;
  }

  .mf-page-privacy .privacy-page__body {
    font-size: 16px;
    letter-spacing: .08em;
    line-height: 25.6px;
    max-width: 880px;
    padding: 0 0 160px;
  }

  .mf-page-privacy .privacy-page__body section {
    margin: 0;
  }

  .mf-page-privacy .privacy-page__body section + section {
    margin-top: 104px;
  }

  .mf-page-privacy .privacy-page__body section:nth-of-type(2) {
    margin-top: 153px;
  }

  .mf-page-privacy .privacy-page__body section:nth-of-type(4),
  .mf-page-privacy .privacy-page__body section:nth-of-type(5),
  .mf-page-privacy .privacy-page__body section:nth-of-type(6),
  .mf-page-privacy .privacy-page__body section:nth-of-type(7),
  .mf-page-privacy .privacy-page__body section:nth-of-type(8) {
    margin-top: 122px;
  }

  .mf-page-privacy .privacy-page__body h2 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 25.6px;
    margin: 0 0 48px;
  }

  .mf-page-privacy .privacy-page__body p {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .mf-page-privacy .site-header {
    padding: 54px 20px 0;
  }

  .mf-page-privacy .site-header__brand {
    height: 113px;
    width: 113px;
  }

  .mf-page-privacy .site-header__menu {
    height: 51px;
    right: 20px;
    top: calc(54px + (113px - 51px) / 2);
    width: 51px;
  }

  /*
   * SP privacy spacing — MaisonFarmer-new 2025:434 (390×3395).
   * Title y=213; title→lead 123; lead→body 123; h2→p 23; section gap 78;
   * body→footer 196; content inset 32 / width 326; lead width 310.
   */
  .mf-page-privacy .page-hero--privacy {
    min-height: 0;
    padding: 213px 20px 123px;
  }

  .mf-page-privacy .page-hero--privacy .eyebrow {
    color: #d0a653;
    display: block;
    font-family: Cabin, sans-serif;
    font-size: 20px;
    letter-spacing: .08em;
    line-height: 24px;
    margin: 0;
    opacity: 1;
    visibility: visible;
  }

  .mf-page-privacy .page-hero--privacy > p:last-of-type {
    color: #caa160;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin-top: 123px;
    max-width: 310px;
    margin-inline: auto;
    text-align: center;
  }

  .mf-page-privacy .privacy-page__body {
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
    max-width: 326px;
    padding: 0 0 196px;
  }

  .mf-page-privacy .privacy-page__body section {
    margin-top: 78px;
  }

  .mf-page-privacy .privacy-page__body section:first-child {
    margin-top: 0;
  }

  .mf-page-privacy .privacy-page__body h2 {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin-bottom: 23px;
  }
}

@media (max-width: 767px) {
  .mf-page-business .page-hero--business {
    padding-top: 190px;
  }
}

/* Figma MaisonFarmer-new 2193:562 — desktop FOR BUSINESS lead (copy/type only). */
@media (min-width: 768px) {
  .mf-page-business .page-hero--business {
    min-height: min(775px, 51.26vw);
    padding: min(317px, 20.97vw) 24px 0;
  }

  .mf-page-business .page-hero--business .eyebrow {
    color: #205766;
    font-family: Cabin, sans-serif;
    font-size: 24px;
    letter-spacing: .08em;
    line-height: 28.8px;
  }

  .mf-page-business .page-hero--business > p:last-of-type {
    color: #000;
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 22.4px;
    margin-top: min(80px, 5.29vw);
    max-width: 767px;
    text-align: center;
  }

  .mf-page-business .page-hero--business .text-link {
    color: #c9a063;
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 14px;
    margin-top: min(96px, 6.349vw);
    /* PC Figma 2112:872 — text and rule share width 135; gap 10. */
    padding: 0 0 10px;
  }

  .mf-page-business .business-services {
    padding: 0 0 min(60px, 3.97vw);
    width: min(540px, 35.71vw);
  }

  .mf-page-business .business-services ol {
    gap: min(38px, 2.513vw) min(36px, 2.381vw);
  }

  .mf-page-business .business-services li {
    align-items: center;
    border-color: #205766;
    display: flex;
    justify-content: center;
    min-height: min(51px, 3.373vw);
    padding: 0;
  }

  .mf-page-business .business-services h2 {
    color: #205766;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 25.6px;
  }
}

/* FOR BUSINESS contact form — custom mf-contact-form (Figma PC 2115:965 / SP 2023:406). */
.mf-page-business .business-contact.section-narrow {
  color: var(--mf-contact-ink);
  max-width: 880px;
  width: min(880px, 100%);
}

.mf-page-business .business-contact > p {
  color: var(--mf-contact-ink);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.6;
}

.mf-page-business .business-contact__rule {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--mf-contact-ink);
  display: block;
  height: 0;
  margin: 0;
}

.mf-contact-form {
  border: 0;
  color: var(--mf-contact-ink);
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  letter-spacing: .08em;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.mf-contact-form *,
.mf-contact-form *::before,
.mf-contact-form *::after { box-sizing: border-box; }

.mf-contact-form__honeypot {
  height: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.mf-contact-form__status {
  color: var(--mf-contact-error);
  display: none;
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.6;
  margin: 0 0 20px;
}

.mf-contact-form__status.is-visible { display: block; }

.mf-contact-form__field {
  display: grid;
  width: 100%;
}

.mf-contact-form__label-row {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.mf-contact-form__required {
  align-items: center;
  background: #fff;
  border: 1px solid var(--mf-contact-ink);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--mf-contact-gold);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.mf-contact-form__label {
  color: var(--mf-contact-ink);
  font-weight: 400;
  margin: 0;
}

.mf-contact-form__control-wrap { min-width: 0; width: 100%; }

.mf-contact-form__control {
  -webkit-appearance: none;
  appearance: none;
  background: var(--mf-contact-input-bg);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--mf-contact-ink);
  display: block;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.6;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.mf-contact-form__control::placeholder {
  color: var(--mf-contact-placeholder);
  opacity: 1;
}

.mf-contact-form__control:-webkit-autofill,
.mf-contact-form__control:-webkit-autofill:hover,
.mf-contact-form__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mf-contact-ink);
  box-shadow: 0 0 0 1000px var(--mf-contact-input-bg) inset;
  transition: background-color 99999s ease-out;
}

.mf-contact-form__control:focus-visible {
  border-color: var(--mf-contact-gold);
  outline: 2px solid color-mix(in srgb, var(--mf-contact-gold) 45%, transparent);
  outline-offset: 2px;
}

.mf-contact-form__field.is-invalid .mf-contact-form__control {
  border-color: var(--mf-contact-error);
}

.mf-contact-form__control--textarea {
  resize: vertical;
}

.mf-contact-form__error {
  color: var(--mf-contact-error);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.5;
  margin: 8px 0 0;
  min-height: 0;
}

.mf-contact-form__error:empty { display: none; }

.mf-contact-form__consent {
  align-items: flex-start;
  border-top: 1px solid var(--mf-contact-ink);
  color: var(--mf-contact-ink);
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 30px minmax(0, 1fr);
  justify-content: center;
  letter-spacing: .08em;
  line-height: 1.6;
  margin-inline: auto;
  max-width: 640px;
  text-align: left;
  width: 100%;
}

.mf-contact-form__checkbox {
  -webkit-appearance: none;
  appearance: none;
  background: var(--mf-contact-input-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 30px;
  grid-column: 1;
  grid-row: 1;
  height: 30px;
  margin: 0;
  position: relative;
  width: 30px;
}

.mf-contact-form__checkbox:checked::after {
  color: var(--mf-contact-gold);
  content: "✓";
  display: block;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.mf-contact-form__checkbox:focus-visible {
  border-color: var(--mf-contact-gold);
  outline: 2px solid color-mix(in srgb, var(--mf-contact-gold) 45%, transparent);
  outline-offset: 2px;
}

.mf-contact-form__consent.is-invalid .mf-contact-form__checkbox {
  border-color: var(--mf-contact-error);
}

.mf-contact-form__consent-label {
  cursor: pointer;
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.mf-contact-form__privacy-link {
  border-bottom: 1px solid currentColor;
  color: var(--mf-contact-gold);
  text-decoration: none;
}

.mf-contact-form__error--consent {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0;
}

.mf-contact-form__turnstile {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.mf-contact-form__submit { text-align: center; }

.mf-contact-form__button {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid var(--mf-contact-gold);
  border-radius: 0;
  color: var(--mf-contact-gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.6;
  margin-inline: auto;
  max-width: 100%;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
  width: min(318px, 100%);
}

.mf-contact-form__button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mf-contact-gold) 12%, #fff);
}

.mf-contact-form__button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mf-contact-gold) 45%, transparent);
  outline-offset: 3px;
}

.mf-contact-form__button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@media (max-width: 767px) {
  /* SP Figma 2020:922 / 2023:406 — form + service pills. PC rules untouched. */
  .mf-page-business .page-hero--business .eyebrow {
    color: #205766;
  }

  .mf-page-business .page-hero--business > p:last-of-type {
    color: #000;
  }

  .mf-page-business .page-hero--business .text-link {
    color: #c9a063;
  }

  .mf-page-business .business-services {
    margin-inline: auto;
    padding: 0 0 55px;
    width: 252px;
  }

  .mf-page-business .business-services ol {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  /* Figma 2023:404 — pills 252×51, radius 200, #205766 */
  .mf-page-business .business-services li {
    align-items: center;
    border: 1px solid #205766;
    border-radius: 200px;
    display: flex;
    height: 51px;
    justify-content: center;
    min-height: 51px;
    padding: 0;
    width: 252px;
  }

  .mf-page-business .business-services h2 {
    color: #205766;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 22.4px;
    margin: 0;
  }

  /*
   * SP contact spacing — MaisonFarmer-new 2189:406 (artboard 390 / frame 358×1666).
   * Absolute Y deltas (px): intro→rule 44, rule→p2 32, p2→label 85,
   * label→input 20, input→next label 28, textarea→rule2 60, rule2→consent 32,
   * consent→button 60. Content inset 32, inputs 326×60, textarea 326×320,
   * rule 358×1, button 318×80 left-aligned with fields.
   */
  .mf-page-business .business-contact.section-narrow {
    max-width: none;
    /* bottom 80: space between submit button and footer (outside 2189:406 frame) */
    padding: 57px 0 80px;
    width: 100%;
  }

  .mf-page-business .business-contact > p {
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 22.4px;
    margin: 0 auto;
    max-width: 326px;
    width: calc(100% - 47px);
  }

  .mf-page-business .business-contact__rule--intro {
    margin: 44px auto 32px;
    max-width: 358px;
    width: calc(100% - 32px);
  }

  .mf-page-business .mf-contact-form {
    margin-top: 85px;
    padding: 0 32px;
  }

  .mf-page-business .mf-contact-form__status { font-size: 12px; margin-inline: 0; }

  .mf-page-business .mf-contact-form__field {
    grid-template-columns: 1fr;
    margin-bottom: 28px;
    row-gap: 20px;
  }

  /* textarea bottom → consent rule (border-top): 60px */
  .mf-page-business .mf-contact-form__field--message { margin-bottom: 60px; }

  .mf-page-business .mf-contact-form__label-row { gap: 10px; }

  .mf-page-business .mf-contact-form__required {
    color: #000;
    font-size: 13px;
    height: 24px;
    letter-spacing: .08em;
    width: 43px;
  }

  .mf-page-business .mf-contact-form__label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 14px;
  }

  /* Figma inputs 326×60; placeholder inset 16×23 */
  .mf-page-business .mf-contact-form__control {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 14px;
    min-height: 60px;
    padding: 23px 16px;
  }

  .mf-page-business .mf-contact-form input.mf-contact-form__control { height: 60px; }

  .mf-page-business .mf-contact-form__control--textarea {
    height: auto;
    min-height: 320px;
    padding-top: 23px;
  }

  .mf-page-business .mf-contact-form__error { font-size: 12px; }

  .mf-page-business .mf-contact-form__consent {
    column-gap: 16px;
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 22.4px;
    margin-top: 0;
    max-width: none;
    padding-top: 32px;
  }

  .mf-page-business .mf-contact-form__submit {
    text-align: left;
  }

  .mf-page-business .mf-contact-form__button {
    font-size: 14px;
    height: 80px;
    letter-spacing: .08em;
    line-height: 22.4px;
    margin-left: 0;
    margin-right: auto;
    margin-top: 60px;
    width: min(318px, 100%);
  }
}

@media (min-width: 768px) {
  .mf-page-business .business-contact.section-narrow {
    padding: 100px 0 170px;
    width: min(880px, calc(100vw - 48px));
  }

  .mf-page-business .business-contact > p {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 22.4px;
  }

  .mf-page-business .business-contact__rule--intro {
    margin: 120px 0 54px;
    width: 100%;
  }

  .mf-contact-form { margin-top: 55px; padding: 0; }

  .mf-contact-form__field {
    align-items: start;
    column-gap: 0;
    grid-template-columns: 267px minmax(0, 1fr);
    margin-bottom: 48px;
  }

  .mf-contact-form__field--message {
    align-items: start;
    margin-bottom: 100px;
  }

  .mf-contact-form__label-row {
    align-items: center;
    column-gap: 16px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 60px;
    padding-right: 16px;
  }

  .mf-contact-form__field--message .mf-contact-form__label-row {
    align-items: start;
    min-height: 0;
    padding-top: 18px;
  }

  /* Figma 2193:591 — 必須 is black */
  .mf-contact-form__required {
    color: #000;
    font-size: 14px;
    height: 26px;
    width: 50px;
  }

  .mf-contact-form__label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 22.4px;
  }

  .mf-contact-form__control {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 22.4px;
    min-height: 60px;
    padding: 16px 26px;
  }

  .mf-contact-form input.mf-contact-form__control { height: 60px; }

  .mf-contact-form__control--textarea {
    height: auto;
    min-height: 348px;
  }

  .mf-contact-form__error { font-size: 13px; }

  .mf-contact-form__consent {
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 22.4px;
    padding-top: 79px;
  }

  .mf-contact-form__button {
    font-size: 16px;
    height: 80px;
    letter-spacing: .08em;
    line-height: 25.6px;
    margin-top: 52px;
    width: 318px;
  }
}

/* FOR BUSINESS service categories and publication names. */
.mf-page-business .business-media {
  background: #206170;
  color: #d0a653;
  padding: 72px 24px;
  text-align: center;
}
.mf-page-business .business-media .eyebrow { color: inherit; }
.mf-page-business .business-media__list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 32px auto 0;
  max-width: 880px;
  padding: 0;
}
.mf-page-business .business-media__list li {
  border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  font-size: 14px;
  padding-bottom: 14px;
}
@media (max-width: 767px) {
  .mf-page-business .business-media { padding: 52px 32px; }
}
@media (min-width: 768px) {
  .mf-page-business .business-services { width: min(840px, calc(100vw - 48px)); }
  .mf-page-business .business-services ol { grid-template-columns: repeat(3, 1fr); }
  .mf-page-business .business-media { padding: 90px 24px 100px; }
  .mf-page-business .business-media__list { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Typography sync — Figma MCP (PC 9Y4fulq3VyfBTYEimwtNar / SP rsnzJjb9YH0TCkJKilM1vw)
   font-size / line-height in px; letter-spacing 8% → .08em. No clamp/vw on type.
   -------------------------------------------------------------------------- */

/* TOP SP: story section (2083:680 / 2083:681 / 2083:682) */
@media (max-width: 767px) {
  .top-story h1 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 25.6px;
  }

  .top-story .eyebrow {
    font-family: Cabin, sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 16.8px;
  }

  .top-story .editorial-section__content > p.top-story__copy--mobile,
  .top-story p.top-story__copy--mobile {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 27.6px;
  }

  .top-chef .editorial-section__content > p.top-chef__bio {
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
    text-align: left;
  }

  .mf-page-business .business-contact > p {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
  }

  .mf-contact-form {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
  }

  .mf-contact-form__required {
    font-family: "Zen Kaku Gothic New", sans-serif;
  }
}

/* PC form typography — MaisonFarmer-new 2193:562 */
@media (min-width: 768px) {
  .mf-contact-form {
    font-family: "Zen Kaku Gothic New", sans-serif;
  }

  .mf-contact-form__label {
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 22.4px;
  }

  .mf-contact-form__control {
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 22.4px;
  }

  .mf-contact-form__required {
    color: #000;
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: .08em;
    line-height: 14px;
  }

  .mf-contact-form__button {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    letter-spacing: .08em;
    line-height: 25.6px;
  }

  .mf-contact-form__consent {
    letter-spacing: .08em;
    line-height: 22.4px;
  }
}

/* =============================================================================
 * SP Figma alignment — MaisonFarmer-new TOP 2188:79 / BUSINESS 2189:249 (390px).
 * Scoped to max-width:767px only. PC (≥768) rules above remain authoritative.
 * ============================================================================= */
@media (max-width: 767px) {
  /* --- Header / opening chrome: Figma head_sp 2189:344 — 231×59 @ (139,54);
   * logo viewport 113×59 with overflow crop of the 113×113 mark
   * (img height 191.53% / top -40.68%); ice 51×51 @ top 58 (=54+4). --- */
  .home .site-header,
  .mf-page-business .site-header,
  .mf-page-thank-you .site-header,
  .mf-page-privacy .site-header {
    padding-top: 54px;
  }

  .home .site-header__brand,
  .mf-page-business .site-header__brand,
  .mf-page-thank-you .site-header__brand,
  .mf-page-privacy .site-header__brand {
    height: 59px;
    overflow: hidden;
    position: relative;
    width: 113px;
  }

  .home .site-header__brand img,
  .mf-page-business .site-header__brand img,
  .mf-page-thank-you .site-header__brand img,
  .mf-page-privacy .site-header__brand img {
    height: 191.53%;
    left: 0;
    max-width: none;
    object-fit: fill;
    position: absolute;
    top: -40.68%;
    width: 100%;
  }

  .home .site-header__menu,
  .mf-page-business .site-header__menu,
  .mf-page-thank-you .site-header__menu,
  .mf-page-privacy .site-header__menu {
    height: 51px;
    right: 20px;
    top: calc(54px + 4px);
    width: 51px;
  }

  .opening-animation__logo {
    height: 59px;
    object-fit: cover;
    /* Match Figma crop: show image y≈24–83 of the 113px mark inside 59px viewport. */
    object-position: 50% 44.44%;
    top: 54px;
    width: 113px;
  }

  .opening-animation__ice {
    height: 51px;
    top: calc(54px + 4px);
    width: 51px;
  }

  /* --- Intro 2203:572 — single line, ±293px padding --- */
  .top-intro {
    padding: 293px 0;
  }

  .top-intro p {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 21px;
  }

  /* --- Story 2188:218 — heading 16 Medium; body 12 / lh 2.3; images --- */
  /* Contain story-1’s right:-24px Figma bleed so it does not expand document.scrollWidth. */
  .top-story {
    min-height: 1583px;
    overflow-x: clip;
    padding: 0 24px 0;
  }

  .top-story .eyebrow {
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 16.8px;
  }

  .top-story h1,
  .top-story .top-story__heading {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 25.6px;
    margin: 0 0 38px;
  }

  .top-story .editorial-section__content > p.top-story__copy--mobile,
  .top-story p.top-story__copy--mobile {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 27.6px;
    width: 294px;
  }

  .top-story__images img:nth-child(1) {
    height: 161px;
    left: auto;
    right: -24px;
    top: 914px;
    width: 215px;
  }

  .top-story__images img:nth-child(2) {
    height: 118px;
    left: 0;
    top: 1129px;
    width: 157px;
  }

  .top-story__images img:nth-child(3) {
    height: 118px;
    left: 137px;
    top: 1325px;
    width: 157px;
  }

  /* --- Land 2203:560 — image 482; gap 94; body only (no title) --- */
  .top-land {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }

  .top-land__image {
    height: 482px;
  }

  .top-land__content {
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 27.6px;
    margin: 94px 0 90px 24px;
    padding: 0;
    width: min(294px, calc(100% - 48px));
  }

  /* --- Business CTA 2188:98 --- */
  .top-business-cta.section-narrow {
    padding: 126px 0 101px;
  }

  .top-business-cta .top-business-cta__copy {
    width: 259px;
  }

  .top-business-cta .button-link {
    width: 310px;
  }

  /* --- FOR BUSINESS page 2189:249 --- */
  .mf-page-business .page-hero--business {
    min-height: 0;
    padding: 203px 24px 0;
  }

  .mf-page-business .page-hero--business .eyebrow {
    color: #205766;
    font-size: 20px;
    letter-spacing: .08em;
    line-height: 24px;
  }

  .mf-page-business .page-hero--business > p:last-of-type {
    color: #205766;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin-top: 40px;
    max-width: 259px;
    text-align: left;
  }

  .mf-page-business .page-hero--business .text-link {
    color: #c9a063;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 12px;
    margin-top: 84px;
    padding: 0 7px 10px 6px;
  }

  .mf-page-business .business-services {
    margin-inline: auto;
    /* top 95: CTA→pills; bottom 55: pills→contact intro (capture ≈100px with contact pt). */
    padding: 95px 0 55px;
    width: 252px;
  }

  .mf-page-business .business-services ol {
    gap: 20px;
  }

  .mf-page-business .business-contact.section-narrow {
    padding: 45px 0 80px;
  }

  .mf-page-business .business-contact > p {
    color: #000;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
    margin: 0 auto;
    max-width: 326px;
    width: calc(100% - 47px);
  }

  .mf-page-business .business-contact__rule--intro {
    margin: 44px auto 32px;
  }

  .mf-page-business .mf-contact-form {
    margin-top: 85px;
  }

  .mf-page-business .mf-contact-form__field {
    margin-bottom: 28px;
    row-gap: 20px;
  }

  .mf-page-business .mf-contact-form__required {
    color: #000;
    font-size: 12px;
    height: 24px;
    letter-spacing: .08em;
    width: 43px;
  }

  .mf-page-business .mf-contact-form__label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 12px;
  }

  .mf-page-business .mf-contact-form__field--address .mf-contact-form__label {
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 14px;
  }

  .mf-page-business .mf-contact-form__control {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 12px;
    padding: 23px 16px;
  }

  .mf-page-business .mf-contact-form__consent {
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 19.2px;
  }
}

@media (max-width: 390px) {
  .site-menu .text-link {min-width: 250px;}
}