/* ==========================================================
   moco LP prototype — FV + 01–03
   ========================================================== */

:root {
  --bg: #F8F7F4;
  --text: #3E3935;
  --body-text: #34302B;
  --sub: #8A8179;
  --muted: #6B6259;
  --accent: #A6927D;
  --white: #FFFFFF;
  --hairline: rgba(62, 57, 53, 0.14);

  /* Hero's own credential line only — its own token so it can be tuned
     later without touching --accent everywhere else that uses it
     (eyebrow, section-head numbers, dividers, etc). Originally --sub
     (#8A8179, one step darker than --accent); bumped one step further
     to --muted's value so the line reads clearly as trust copy on a
     glance, while staying well short of --text/--body-text so it never
     competes with the hero's actual headline. */
  --hero-credential: #6B6259;

  --font-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Noto Serif JP", "Shippori Mincho", serif;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num: "EB Garamond", serif;

  --container-max: 720px;
  --container-narrow: 560px;
  --edge: 24px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248, 247, 244, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  max-width: 1040px;
  margin-inline: auto;
  padding: 16px var(--edge);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.site-header__logo {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.site-header__nav {
  display: none;
}

.site-header__cta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sub);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .site-header__inner {
    display: flex;
    justify-content: space-between;
  }

  .site-header__nav {
    display: flex;
    gap: 32px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text);
  }

  .site-header__cta {
    color: var(--text);
    border: 1px solid var(--hairline);
    padding: 10px 20px;
  }
}

/* ---------------- Shared type ---------------- */

.eyebrow {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 28px;
}

/* Number + divider + title travel together as one unit so a chosen
   background always covers all three, never just the title. Column
   layout (number, short rule, title stacked) on mobile so the title
   keeps the full content width to wrap naturally without excess line
   breaks; row layout (number | rule | title) once there's room for the
   number column not to steal width the title needs. The band's height
   is never fixed: padding-top/bottom on .section-head gives every title
   the same breathing room regardless of line count, and the box then
   grows on its own with however tall the title actually renders (2
   lines vs. 4). Color is set once on .section-head and the three
   children inherit it (or fall back to their own quiet defaults) so a
   chosen text color unifies them automatically. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 46px;
  padding: 28px 0;
  color: var(--text);
}

.section-head__number {
  flex: none;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--accent);
}

.section-head.has-title-bg .section-head__number {
  color: inherit;
}

.section-head__divider {
  display: block;
  flex: none;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.section-head.has-title-bg .section-head__divider {
  background: currentColor;
}

.section-title {
  min-width: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  margin: 0;
  color: inherit;
}

.section-title--lg {
  font-size: 28px;
  letter-spacing: 0.01em;
}

@media (min-width: 640px) {
  .section-head {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .section-head__divider {
    width: 1px;
    height: auto;
    align-self: stretch;
  }

  .section-title {
    flex: 1 1 0%;
  }
}

.section-text {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: var(--body-text);
  font-weight: 400;
}

.section-text p {
  margin: 0 0 30px;
}

.section-text p:last-child {
  margin-bottom: 0;
}

.section-text p.tight {
  margin-bottom: 12px;
}

.section-text__trail {
  padding-top: 8px;
  font-style: normal;
}

/* "Aをかけ合わせてBになる" diagram: two soft, pale circles (from the
   shared palette, never a new color) with a thin "×" between them, a
   thin arrow, then the resulting quote — quiet enough to sit inside a
   text-only section without reading as a slide from a sales deck. */
.diagram-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 44px 0;
}

.diagram-cross__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 6px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
}

.diagram-cross__circle--a {
  background: #F0F0EA;
}

.diagram-cross__circle--b {
  background: #F5EEEE;
}

.diagram-cross__symbol {
  flex: none;
  font-family: var(--font-num);
  font-size: 20px;
  color: var(--accent);
}

.diagram-cross__arrow {
  text-align: center;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 32px;
}

.diagram-cross__result {
  text-align: center;
  font-size: 20px;
}

@media (min-width: 640px) {
  .diagram-cross {
    gap: 24px;
    margin: 56px 0;
  }

  .diagram-cross__circle {
    width: 132px;
    height: 132px;
    font-size: 21px;
  }

  .diagram-cross__symbol {
    font-size: 24px;
  }

  .diagram-cross__arrow {
    font-size: 25px;
    margin-bottom: 40px;
  }

  .diagram-cross__result {
    font-size: 22px;
  }
}

/* "Question + question" diagram (06): two pale circles, each holding a
   short bold question, a thin rule, and a smaller muted explainer —
   joined by a "+" reading as "both together, considered as one". Sized
   to keep every given line on its own line at every width (checked
   against the longest line, "変えればいいのか。"), never left to wrap
   mid-word the way the plain body text is allowed to. */
.diagram-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 36px 0;
}

.diagram-plus__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  padding: 18px 8px;
  gap: 0;
  text-align: center;
}

.diagram-plus__circle--a {
  background: #F0F0EA;
}

.diagram-plus__circle--b {
  background: #F5EEEE;
}

/* "p." bumps specificity above the generic .section-text p rule (which
   otherwise wins its own margin shorthand here, the same class of bug
   fixed on .diagram-plus__result — these two circle lines are also
   <p> tags living inside .section-text). */
p.diagram-plus__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text);
}

p.diagram-plus__sub {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}

.diagram-plus__symbol {
  flex: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--accent);
}

@media (min-width: 640px) {
  .diagram-plus {
    gap: 16px;
    margin: 48px 0;
  }

  .diagram-plus__circle {
    width: 196px;
    height: 196px;
    padding: 24px 12px;
    gap: 0;
  }

  p.diagram-plus__title {
    font-size: 18px;
  }

  p.diagram-plus__sub {
    margin-top: 4px;
    font-size: 12.5px;
  }

  .diagram-plus__symbol {
    font-size: 25px;
  }
}

@media (min-width: 900px) {
  .diagram-plus {
    gap: 20px;
  }

  .diagram-plus__circle {
    width: 216px;
    height: 216px;
    padding: 26px 12px;
    gap: 0;
  }

  .diagram-plus__title {
    font-size: 19px;
  }

  .diagram-plus__symbol {
    font-size: 28px;
  }
}

/* The hand-drawn sketch sits with no frame, border or background box of
   its own — its own white paper blends straight into the page so it
   reads as the next beat of the same visual story (diagram → quote →
   sketch), not a separate photo dropped in. */
.sketch-placeholder {
  max-width: 460px;
  margin: 16px auto 44px;
}

.sketch-placeholder img {
  display: block;
  width: 100%;
  height: auto;
}

.text-emphasis {
  display: inline-block;
  color: var(--body-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

p.text-emphasis {
  display: block;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* The one standout keyword in 07 ("住まい力"): left-aligned like the
   surrounding sentence (never centered — that would read as a floating
   title/logo), sized and spaced to carry the section on its own,
   with no box/underline/icon. Selectors are qualified with
   ".section-text p" so they reliably beat the generic ".section-text p"
   and ".text-emphasis" rules regardless of source order (same class of
   specificity issue fixed earlier on the 06 diagram). */
.section-text p.lead-in--wide,
.section-text p.lead-out--wide {
  margin-left: 1em;
}

.section-text p.lead-in--wide {
  margin-bottom: 18px;
}

.section-text p.text-emphasis--keyword {
  font-size: 27px;
  margin-top: 0;
  margin-bottom: 9px;
}

@media (min-width: 640px) {
  .section-text p.lead-in--wide {
    margin-bottom: 19px;
  }

  .section-text p.text-emphasis--keyword {
    font-size: 29px;
    margin-bottom: 10px;
  }
}

@media (min-width: 900px) {
  .section-text p.text-emphasis--keyword {
    font-size: 31px;
  }
}

/* The price is the one number on the page that needs to read as a price
   at a glance — sized in em off the paragraph's own (already-responsive)
   font-size so the ~1.45x jump holds at every breakpoint without a
   separate media query, no new box/background, just scale + weight. */
.price-emphasis {
  font-size: 1.45em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.price-note {
  font-size: 0.85em;
  font-weight: 400;
  margin-left: 0.15em;
}

/* 10 only: paragraph rhythm tightened to ~75% of the shared spacing (30/
   12/40px -> 22/9/30px) so the closing section reads as one compact
   block instead of a long scroll — scoped with the #section-10 id so
   specificity beats the shared rules without touching 01-09, which all
   reuse the same .tight/.text-emphasis classes. The final CTA's own gap
   is widened instead, so the button still reads as a deliberate pause
   after the tightened text, not more of the same rhythm. */
#section-10 .section-text p {
  margin-bottom: 22px;
}

#section-10 .section-text p.tight {
  margin-bottom: 9px;
}

#section-10 .section-text p.text-emphasis {
  margin-top: 30px;
  margin-bottom: 30px;
}

#section-10 .section-cta {
  margin-top: 56px;
  position: relative;
  z-index: 2;
}

/* Plain wrapper + border-left (no ::before, no background-image) so the
   line is guaranteed to paint — a wrapper's own border can't be lost to
   the stacking-context/paint-order or specificity issues pseudo-element
   techniques have hit elsewhere in this file. margin-bottom is set here
   explicitly because the block's last paragraph is now this wrapper's
   :last-child, not .section-text's, so the generic
   ".section-text p:last-child { margin-bottom: 0 }" rule would otherwise
   zero out the gap before the next paragraph. */
.sumai-ryoku-block {
  display: block;
  width: auto;
  margin-bottom: 30px;
  border-left: 3px solid var(--accent);
  padding-left: 20px;
}

/* ---------------- Hero ---------------- */

.hero {
  padding-top: 8px;
}

.hero__photo {
  position: relative;
  margin: 0 0 0;
  width: 100%;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Softens the hard photo/background edge into a quiet fade rather than a
   visible seam — the photo file itself is untouched; this is a plain CSS
   overlay pinned to the photo's own bottom edge. Kept subtle (a single
   flat height, not scaled per breakpoint) so it reads as the photo
   settling into the page rather than a visible bar. */
.hero__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero__body {
  /* Trimmed from 56px now that the photo fades into the background on
     its own — the padding only needs to cover the remaining plain-
     background gap before hero__service, not the whole transition. */
  padding-top: 24px;
  /* Combined with #section-01's own (ID-scoped, see below) padding-top
     and .section-head's shared 28px, the real CTA-to-"01" visual gap
     measures ~130px on mobile — about 66% of the ~196px it measured
     before this pass. Desktop keeps its own larger value below (900px),
     since the mobile-only request wasn't about that gap. */
  padding-bottom: 24px;
}

.no-break {
  white-space: nowrap;
}

/* Opening full-width brackets (「『) carry a large built-in left
   bearing in CJK serif fonts, so a line starting with one renders
   visibly indented versus plain kanji/numerals at the same box edge.
   Pulling it back optically aligns the visible ink, not just the box. */
.lead-bracket {
  margin-left: -0.55em;
}

.hero__copy {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0 0 40px;
  color: var(--text);
}

.hero__service {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 32px;
}

/* Hero's two message lines ("設計経験23年のママ一級建築士と、" / "一緒
   に、間取り迷子から抜け出しませんか？") are two separate elements (kept
   separate because they're independently editable via data-editable),
   but both now share this ONE class so their base typography is
   inherited from a single rule instead of two separately-declared sets
   of values that merely happened to match — font-family, font-size,
   font-weight, letter-spacing, line-height and color are all set here
   exactly once. .text-emphasis (its own shared class, used all over the
   page) inherits everything from here too and only adds font-weight:700
   for its own span, so the only difference between the two lines is
   that emphasis. margin-bottom stays the shared 48px (the gap to the
   CTA below) — .hero__lead--first below overrides just that one
   property for the first line's own line-to-line spacing, deliberately
   left separate from typography since margin was never part of what
   needed unifying. */
.hero__lead {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.9;
  color: var(--body-text);
  text-align: center;
  margin: 0 0 48px;
}

.hero__lead--first {
  margin-bottom: 5px;
}

.btn-primary {
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: var(--text);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  padding: 14px 30px;
  border-radius: 1px;
}

.section-cta {
  margin-top: 44px;
}

/* ---------------- 03→06 ショートカット ---------------- */
/* サブCTA：配色は.btn-primaryと同じ（var(--text)背景・var(--white)文字）に統一。
   06への着地位置は固定ヘッダー分だけscroll-margin-topで逃がしている。 */

html {
  scroll-behavior: smooth;
}

#section-06 {
  scroll-margin-top: 90px;
}

.section-shortcut {
  padding: 56px 0;
  text-align: center;
}

.btn-secondary {
  display: inline-block;
  background: var(--text);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  padding: 14px 30px;
  border: 1px solid var(--sub);
  border-radius: 1px;
}

/* ---------------- Story sections ---------------- */

.story-section {
  padding-top: 120px;
}

/* Only 01's own top padding is trimmed for the tightened hero transition
   (part of the CTA-to-"01" gap reduction, split across .hero__body's
   padding-bottom above and this) — .story-section itself stays 120px for
   every other section using it (03/05/07), since this is scoped to the
   #section-01 id, not the shared class. */
#section-01 {
  padding-top: 78px;
}

.story-section--quiet {
  padding-top: 128px;
  padding-bottom: 8px;
}

/* 01's closing photo to 02's own top padding: measured ~142px before this
   (128px here + .section-head's shared 28px + 0 padding-bottom from the
   plain #section-01), trimmed to land at ~90px (~63%) — scoped to this id
   so 04/06, which also use .story-section--quiet, keep their own 128px. */
#section-02 {
  padding-top: 76px;
}

.story-section__photo {
  margin: 64px 0 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.story-section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.story-section__photo--bridge {
  margin-top: 72px;
}

/* Closing photo (10, after the CTA): pulled up by a fixed margin so the CTA
   button's lower half sits over the photo's top edge instead of leaving a
   gap between two separate-looking blocks. The source image (moco3) is
   already cropped to its own tall aspect ratio, so this box just renders
   it at its natural ratio — no aspect-ratio box, no object-fit crop, no
   object-position — unlike the wide moco/moco2 photos used here earlier,
   which needed a cover-cropped taller box to get more vertical presence.
   The CTA's own z-index (#section-10 .section-cta) keeps the button
   paintable above this overlap despite this photo coming later in the DOM. */
.section-10-photo {
  position: relative;
  z-index: 1;
  margin-top: -90px;
  width: 100%;
}

.section-10-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Breathing-room photo between 07 and 08: same natural-ratio treatment as
   the section-10 closing photo, for the same reason — a specific chosen
   image, not a recurring cropped slot. */
.section-07-photo {
  margin: 64px 0 0;
  width: 100%;
}

.section-07-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tightens the "それは、" -> quote gap in 02, the same "ご家族の" -> quote
   gap in 03, and "このサポートを終えるころには、" -> quote gap in 05.
   Two separate box-model margins meet at each pair (p.tight's own 12px
   margin-bottom, and p.text-emphasis's margin-top) and adjoining margins
   collapse to whichever is LARGER, not their sum -- so raising/lowering
   margin-top alone had no effect once it dropped below the tight
   paragraph's own 12px. Zeroing that margin-bottom lets margin-top set
   the gap directly. On top of the margin, both lines sit in a 32.175px
   line box (16.5px font x 1.95 line-height) but the glyphs only fill
   ~24px of it, so each line already carries ~4px of leading above/below
   its own text -- that leading (~8px total) stacks with the margin, so
   the real visual gap is margin + ~8px. Each rule is scoped to its own
   section ID so 02/03/05 can be tuned independently and no other
   .tight/.text-emphasis pair elsewhere on the page is affected. 06 gets
   the same treatment further below, but keyed to the specific paragraph
   rather than the bare .tight class, since 06 has a second unrelated
   .tight paragraph (設備や仕様も大切。) that must keep its own 12px. */
#section-02 .section-text p.tight,
#section-03 .section-text p.tight,
#section-05 .section-text p.tight {
  margin-bottom: 0;
}

#section-02 .section-text p.tight + p.text-emphasis,
#section-03 .section-text p.tight + p.text-emphasis,
#section-05 .section-text p.tight + p.text-emphasis {
  margin-top: 6px;
}

/* Same "small pause, not a paragraph break" treatment for 06's
   "でももっと、" -> quote gap, scoped by data-editable rather than the
   bare .tight class so it doesn't touch 06's other .tight paragraph
   (設備や仕様も大切。), whose spacing wasn't asked to change. */
#section-06 .section-text p[data-editable="s06-body-2"] {
  margin-bottom: 0;
}

#section-06 .section-text p[data-editable="s06-body-2"] + p.text-emphasis {
  margin-top: 6px;
}

/* 05's judgment-axis line ("どんな暮らしを大切にしたいのか") also needs
   its OWN margin-bottom pulled in, unlike the 02/03 pairs above: there
   the next paragraph starts a new sentence, but here 「という、自分たち
   なりの判断軸が...」 is the tail end of the SAME sentence, so it needs
   the same small pause on both sides rather than a full 40px trailing
   into a plain-margin paragraph. */
#section-05 .section-text p.tight + p.text-emphasis {
  margin-bottom: 6px;
}

/* 03's opening 3 lines ("誰かと一緒に暮らし始めたとき、..."): a thin
   left rule to draw a little extra attention without turning the text
   into a card -- no background, no border box, just a hairline-weight
   accent line with breathing room before the text. Scoped to this one
   paragraph so no other .section-text p picks it up. */
#section-03 .section-text p[data-editable="s03-body-1"] {
  border-left: 1px solid var(--accent);
  padding-left: 16px;
}

/* 06's "設備や仕様に、何十万円ものオプションを..." -> "だからこそ、..."
   pair reads as one continuous argument (spec spending vs. the layout
   that deserves the same care), so its default 30px gap is pulled in
   to keep the two paragraphs reading together without going as tight
   as the .tight/.text-emphasis pairs elsewhere. */
#section-06 .section-text p[data-editable="s06-body-10"] {
  margin-bottom: 16px;
}

/* 04's opening lines split into two beats: 本来、土地と間取りは... /
   光の入り方... / 敷地を読み解き... read as one continuous explanation
   about the site, so those two gaps are pulled in further (12px) than
   a plain paragraph break. The gap after 敷地を読み解き... is kept
   wider (22px) because it's where the topic turns from "the site" to
   "my own design approach" (これは、ハウスメーカーで...) and still
   needs to read as a break, not a continuation. The fourth line's own
   margin-bottom (into the diagram-cross below) is untouched at the
   shared 30px since that gap wasn't asked to change. */
#section-04 .section-text p[data-editable="s04-body-1"],
#section-04 .section-text p[data-editable="s04-body-2"] {
  margin-bottom: 13px;
}

#section-04 .section-text p[data-editable="s04-body-3"] {
  margin-bottom: 22px;
}

#section-03 {
  padding-bottom: 8px;
  /* 02's body end to 03's own top padding: measured ~142px before this
     (120px here + .section-head's shared 28px + 02's own 8px
     padding-bottom), trimmed to land at ~90px (~63%) — scoped to this id,
     independent of the other sections tuned below. */
  padding-top: 68px;
}

/* Section-to-section rhythm, part 2: 03→04, 04→05, 05→06 and 06→07 were
   measured at 150px/142px/156px/142px respectively — well past the ~90px
   already established for 01→02 and 02→03 above, and 05's photo→06's
   title (156px) was the worst offender. Each section's own padding-top
   is trimmed just enough to land at that same ~90px, matching the
   established rhythm regardless of whether the section above ends in a
   photo or a paragraph. Scoped per id so 01's own 78px and the shared
   120px/128px defaults for any section not listed here are untouched. */
#section-04 {
  padding-top: 68px;
}

#section-05 {
  padding-top: 68px;
}

#section-06 {
  padding-top: 62px;
}

#section-07 {
  padding-top: 68px;
}

/* 07's title-to-body gap was the shared .section-head 74px (28px padding
   + 46px margin) like every other section, but reads as a bigger jump
   here than elsewhere since "まずは、お話を聞かせてください。" is a
   direct address and "330,000円。" is a hard subject change — so it's
   trimmed to ~60% (44px) by reducing just the margin, leaving the
   28px padding (and every other section's own 74px) untouched. */
#section-07 .section-head {
  margin-bottom: 16px;
}

/* New 7-section structure (renewal): the final CTA + closing photo now
   lives at 07, not 10 — kept as fresh class/ID names rather than reusing
   .section-10-photo / #section-10 above, since "07" meant something else
   before the renewal and the old rules are left in place, just unused.
   Same overlap technique: pull the photo up by a fixed margin so the CTA
   button's lower half sits over its top edge, with the button's own
   z-index keeping it paintable above the overlap. */
.closing-photo {
  position: relative;
  z-index: 1;
  margin: -90px 0 0;
  width: 100%;
}

.closing-photo img {
  display: block;
  width: 100%;
  height: auto;
}

#section-07 .section-cta {
  margin-top: 56px;
  position: relative;
  z-index: 2;
}

/* New 05's closing photo (a specific chosen image again, natural ratio,
   no crop — same reasoning as .closing-photo above). Named for its own
   section rather than reusing .section-07-photo, which is left in place
   above but now unused: that name meant a different section before the
   renewal. */
.section-05-photo {
  margin: 64px 0 0;
  width: 100%;
}

.section-05-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* New 06 bundles several distinct beats (the renewal story, the
   product/price, the 0.9% framing, the monthly-capacity line) in one
   section instead of splitting them into separate sections — this margin
   is what keeps them reading as separate "beats" instead of one
   undifferentiated block of text. Some beats are also centered
   (.section-06-center) against the section's otherwise-left-aligned body
   text, and a thin rule (.section-06-divider, matching the section-head's
   own divider) marks the two transitions — together this gives the one
   long section an internal rhythm without adding any card/box chrome. */
#section-06 .section-06-beat {
  margin-top: 64px;
}

#section-06 .section-06-center {
  text-align: center;
}

#section-06 .section-06-divider {
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin: 56px auto 0;
}

#section-06 .percent-emphasis {
  font-size: 1.2em;
}

/* Pulls "たとえば3,500万円の家づくりなら、" -> "約0.9％" -> "設備や仕様
   に、..." ~12.5% closer (40px -> 35px on both sides) so the three read
   as one thought, without touching the price frame above or the "だか
   らこそ、..." paragraph below. Only 約0.9％'s own margin needs to
   change: as a p.text-emphasis its 40px top/bottom already wins the
   adjoining-margin collapse against both neighbors' smaller margins, so
   overriding it here moves both gaps symmetrically in one place. */
#section-06 .section-text p[data-editable="s06-body-9"] {
  margin-top: 35px;
  margin-bottom: 35px;
}

/* Price presentation, take 3: the short hairlines above/below read as
   floating and disconnected, so they're gone — replaced by a single
   double-ruled frame (two nested 1px borders, 3px apart) around the
   whole product+price pair, like a quiet picture frame rather than a
   card. Both borders are var(--accent) at different opacities (outer
   fainter, inner a touch stronger) so no new color is introduced. The
   frame is deliberately wider than the surrounding body-text column
   (342px) via a symmetric negative margin, landing at 354px (~91% of a
   390px screen) so it visibly frames the pair rather than tracing the
   text width. margin-top keeps the block 64px below the previous
   paragraph, same rhythm as every other take on this block. */
#section-06 .price-block {
  margin-top: 64px;
}

#section-06 .price-block__frame {
  margin-inline: -6px;
  border: 1px solid rgba(166, 146, 125, 0.28);
  padding: 3px;
}

#section-06 .price-block__frame-inner {
  border: 1px solid rgba(166, 146, 125, 0.55);
  padding: 40px 24px;
}

#section-06 .price-block .hero__service {
  margin-bottom: 20px;
}

#section-06 .price-block p.text-emphasis {
  margin-top: 0;
  margin-bottom: 0;
}

/* Bumped up from the shared .price-emphasis (1.45em) so 330,000円 reads
   at a glance as THE price — capped below the section title's 26px
   (.section-title) so it stays the body's biggest accent, never bigger
   than the page's own heading scale. Scoped to this instance only since
   .price-emphasis isn't reused elsewhere on the page yet. --note stays
   at its own fixed size (not em-linked to the price), so growing the
   price further widens the gap between the two rather than scaling the
   note up with it. */
#section-06 .price-block .price-emphasis {
  font-size: 1.5em;
}

/* 期間限定価格（275,000円）だけがこのエリアで最も目立つように、
   基本価格（297,000円）はひとまわり控えめなサイズに留める。
   .price-emphasisの太字・字間はそのまま、サイズだけ上書きする
   モディファイア。#section-06 .price-block .price-emphasis と同じ
   詳細度で、スタイルシート上でそのすぐ後ろに置くことで確実に上書きする。 */
#section-06 .price-block .price-emphasis--base {
  font-size: 1.15em;
}

/* 期間限定価格（js/price-config.jsで表示ON/OFFを切り替え）。
   価格の行はcampaignの有無に関わらず上のp.text-emphasisルールで
   margin:0のまま。ラベルだけに最小限の余白を足し、価格情報が
   1組として読めるようにしている。強調色や背景は使わず、
   既存の--mutedのみを再利用。 */
#section-06 .price-block .price-tier-label {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* 期間限定価格の下に続く「※基本価格は◯◯円は2027年1月より適用」の注記。
   価格見出し（.price-tier-label）よりさらに控えめな、注釈としてのサイズ。 */
#section-06 .price-block .price-footnote {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* 価格の下に続く「新規受付｜毎月1組」の注記。ON/OFFどちらでも常に表示され、
   価格見出し（.price-tier-label）と同じ控えめなトーンに揃えている。 */
#section-06 .price-block .price-recruit-note {
  margin: 16px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---------------- Responsive: tablet / desktop ---------------- */

@media (min-width: 640px) {
  :root {
    --edge: 32px;
  }

  .section-head {
    gap: 26px;
    padding: 36px 0;
  }

  .section-head__number {
    font-size: 40px;
    letter-spacing: 0.03em;
  }

  .section-title {
    font-size: 32px;
  }

  .section-title--lg {
    font-size: 31px;
  }

  .section-text {
    font-size: 17px;
  }

  .hero__copy {
    font-size: 31px;
  }
}

@media (min-width: 900px) {
  :root {
    --edge: 0px;
  }

  .section-head {
    gap: 32px;
    padding: 44px 0;
  }

  .hero__photo {
    max-width: var(--container-max);
    margin-inline: auto;
    aspect-ratio: 6 / 5;
  }

  .story-section__photo {
    max-width: var(--container-max);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
  }

  .story-section__photo--bridge {
    margin-top: 88px;
  }

  .section-10-photo {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .section-07-photo {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .closing-photo {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .section-05-photo {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .hero__body {
    padding-top: 32px;
    padding-bottom: 140px;
  }

  .hero__copy {
    font-size: 35px;
  }

  .section-head__number {
    font-size: 46px;
    letter-spacing: 0.02em;
  }

  .section-title {
    font-size: 36px;
  }

  .section-title--lg {
    font-size: 34px;
  }

  .story-section {
    padding-top: 160px;
  }

  .story-section--quiet {
    padding-top: 168px;
  }
}

/* ---------------- Motion ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ---------------- Minimal edit mode (trial) ---------------- */
/* Additive only — nothing here changes the normal, edit-mode-off page. */

.lp-editor-bar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(62, 57, 53, 0.12);
  font-family: var(--font-sans);
}

.lp-editor-btn {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 7px 12px;
  cursor: pointer;
}

.lp-editor-btn.is-on {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

.lp-editor-btn--save {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.lp-editor-btn--close {
  background: var(--white);
  color: var(--muted);
}

.lp-editor-status {
  font-size: 12px;
  color: var(--muted);
  min-width: 70px;
}

body.lp-edit-mode [data-editable] {
  outline: 1px dashed var(--accent);
  outline-offset: 4px;
  cursor: text;
}

body.lp-edit-mode [data-editable]:focus {
  outline: 2px solid var(--accent);
  background: rgba(166, 146, 125, 0.06);
}

/* Color pickers (edit mode only) */

.lp-swatch-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lp-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  padding: 0;
  cursor: pointer;
  flex: none;
}

.lp-swatch.is-selected {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.lp-swatch--none {
  background: var(--white) !important;
  position: relative;
}

.lp-swatch--none::before,
.lp-swatch--none::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  right: 3px;
  height: 1px;
  background: var(--sub);
  transform: rotate(45deg);
}

/* The section-head's chosen background is a full-bleed band spanning the
   LP's own display width (edge to edge — this design has no separate
   outer page container narrower than that), covering the number, the
   divider and the title together, while their actual layout — width,
   left position, size, wrapping — stays exactly as it already is.
   --band-left/--band-right are measured in JS from the head's actual
   gap to its section's edges (a 100vw-based trick would be off by the
   scrollbar's width); the color comes through a custom property since a
   pseudo-element can't take an inline style directly. */
.section-head {
  /* z-index (not just position) is required here: without it, this
     element doesn't establish its own stacking context, so the -1 on
     its ::before below escapes all the way to the page's root context
     — where it paints BEHIND any ordinary in-flow sibling background,
     including a section's own background color once one has been set
     (exactly what made 01's title band render but stay invisible once
     its section had a background color of its own). With z-index set
     here, the ::before's -1 is scoped to just this element, so it
     paints below this element's own content but still above whatever
     is behind the element as a whole. */
  position: relative;
  z-index: 0;
}

.section-head.has-title-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.6em;
  bottom: -0.6em;
  left: var(--band-left, 0);
  right: var(--band-right, 0);
  background: var(--title-band-color, transparent);
}

/* Floating popover that follows whichever text element is focused */

.lp-color-popover {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(62, 57, 53, 0.14);
  font-family: var(--font-sans);
}

/* The browser's own [hidden] default is `display: none`, but that's a
   UA-origin rule — it always loses to this element's own author-origin
   `display: flex` above regardless of selector specificity, so setting
   `.hidden = true` in JS did nothing visually and the popover stayed on
   screen no matter what closed it. Same story one rule down for
   .lp-popover-section (used to hide just the "要素背景色" row for
   elements that don't have one). Restating `[hidden]` here, scoped to
   these same classes, is the standard fix: now it's an author rule too,
   so it participates in the normal cascade and wins by specificity. */
.lp-color-popover[hidden] {
  display: none;
}

.lp-popover-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-popover-section[hidden] {
  display: none;
}

.lp-popover-section + .lp-popover-section {
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.lp-color-popover__label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 62px;
}

.lp-weight-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-weight-btn {
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 5px 11px;
  cursor: pointer;
}

.lp-weight-btn.is-selected {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

/* Per-section / per-title background trigger — a normal block in the
   document flow (in edit mode only) so it can never end up hidden behind
   a photo, and removed entirely (not just hidden) once edit mode is off.
   Collapsed to just its label until clicked — see .is-open — so it never
   sits open and in the way of something else being edited. */

.lp-bg-bar,
.lp-title-bg-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8ec;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 12px;
  font-family: var(--font-sans);
  position: relative;
  z-index: 20;
  cursor: pointer;
}

.lp-bg-bar__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.lp-bg-bar__label::after {
  content: " ▾";
  color: var(--accent);
}

.lp-bg-bar.is-open .lp-bg-bar__label::after,
.lp-title-bg-bar.is-open .lp-bg-bar__label::after {
  content: " ▴";
}

.lp-bg-bar .lp-swatch-row,
.lp-title-bg-bar .lp-swatch-row {
  display: none;
}

.lp-bg-bar.is-open .lp-swatch-row,
.lp-title-bg-bar.is-open .lp-swatch-row {
  display: flex;
}

/* "Close without saving" confirmation */

.lp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(62, 57, 53, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-confirm-box {
  background: var(--white);
  border-radius: 4px;
  padding: 24px;
  max-width: 320px;
  width: calc(100% - 48px);
  box-shadow: 0 8px 30px rgba(62, 57, 53, 0.25);
  font-family: var(--font-sans);
}

.lp-confirm-box__text {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
}

.lp-confirm-box__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.lp-editor-btn--danger {
  background: var(--white);
  color: var(--text);
  border-color: var(--text);
}

/* ---------------- Footer (法務ページへのリンク) ---------------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 20px var(--edge) 32px;
}

.site-footer__inner {
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.site-footer__inner a {
  color: var(--muted);
  padding: 8px 6px;
}

.site-footer__inner a:hover {
  color: var(--text);
}

.site-footer__divider {
  color: var(--hairline);
}

/* ---------------- 編集UIをスマホ幅では非表示 ---------------- */
/* 編集機能そのものは削除しない。PCではこれまでどおり動作させ、
   スマホ幅（767px以下）では入り口となるトグルボタンごと画面から
   消すことで、編集モードに入る手段自体を無くす。
   いずれも position: fixed のオーバーレイなので、非表示にしても
   通常のページ内に余白が残ることはない。 */

@media (max-width: 767px) {
  .lp-editor-bar,
  .lp-color-popover,
  .lp-bg-bar,
  .lp-title-bg-bar,
  .lp-confirm-overlay {
    display: none !important;
  }
}