/* ==========================================================================
   SOIL＋ — Contact page, v2 (2026-10-05)
   Quiet luxury in the LOEWE register: a warm bone ground, generous space,
   small widely-tracked type, black hairlines. The tattoo idea survives only
   as one fine-line botanical drawing, used like a craft illustration.
   ========================================================================== */

.cx-page { --cx-bg: #f3f0e9; --cx-ink: #1d1b18; --cx-mute: #8b857b; --cx-line: #d9d3c7; background: var(--cx-bg); color: var(--cx-ink); }
.cx-page main { background: var(--cx-bg); }

/* ---------- hero: centred, the drawing above the title ---------- */
.cx-hero { padding: clamp(140px, 17vw, 210px) 0 clamp(72px, 9vw, 120px); text-align: center; }
.cx-art { width: clamp(150px, 15vw, 210px); margin: 0 auto; aspect-ratio: 4 / 5; }
.cx-art svg.cx-line { width: 100%; height: 100%; overflow: visible; }
.cx-line { stroke: var(--cx-ink); fill: none; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.cx-line .fruit { fill: var(--cx-bg); }
.cx-line .dots { display: none; }
.cx-hero .label { margin-top: clamp(40px, 5vw, 64px); color: var(--cx-mute); }
.cx-hero .label::after { display: none; }
.cx-hero h1 {
  font-family: var(--en); font-weight: 400; font-style: normal;
  font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: 0.28em; text-indent: 0.28em;
  margin-top: 18px;
}
.cx-hero__lead { margin: 30px auto 0; font-size: 15px; letter-spacing: 0.16em; line-height: 2.3; max-width: 30em; }
.cx-hero__note { margin: 10px auto 0; font-size: 12.5px; letter-spacing: 0.1em; line-height: 2.1; color: var(--cx-mute); max-width: 32em; }

/* the reveal: the drawing appears as if inked, top to bottom */
html.motion .cx-art svg.cx-line { opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity 2.2s ease 0.3s, filter 2.4s ease 0.3s, transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
html.motion .cx-art.is-inked svg.cx-line { opacity: 1; filter: blur(0); transform: none; }

/* hairline instead of the rust strip */
.cx-edge { height: 0; border-top: 1px solid var(--cx-line); width: min(calc(100% - var(--pad) * 2), var(--max)); margin: 0 auto; }

/* ---------- body ---------- */
.cx-body { padding-block: clamp(72px, 9vw, 130px) clamp(96px, 11vw, 160px); }
.cx-body__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(48px, 8vw, 140px); align-items: start; max-width: 1120px; margin-inline: auto; }
.cx-aside { position: sticky; top: 120px; }
.cx-aside h2 { font-family: var(--en); font-weight: 500; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cx-mute); }
.cx-aside ol { list-style: none; margin-top: 20px; border-top: 1px solid var(--cx-line); }
.cx-aside li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 15px 0; border-bottom: 1px solid var(--cx-line); font-size: 13px; letter-spacing: 0.1em; line-height: 1.9; }
.cx-aside li b { font-family: var(--en); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; color: var(--cx-mute); }
.cx-aside li span { grid-column: 2; font-size: 12px; color: var(--cx-mute); }
.cx-facts { margin-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 12.5px; letter-spacing: 0.08em; line-height: 1.9; }
.cx-facts dt { color: var(--cx-mute); }
.cx-facts a { border-bottom: 1px solid currentColor; }
.cx-dm { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: 0.14em; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: opacity 0.3s; }
.cx-dm:hover { opacity: 0.6; }
.cx-dm svg { width: 15px; height: 15px; }

/* form blocks */
.cx-form .form { gap: 0; }
.cx-block { padding-bottom: clamp(40px, 4vw, 56px); margin-bottom: clamp(40px, 4vw, 56px); border-bottom: 1px solid var(--cx-line); display: grid; gap: 30px; }
.cx-block__head { display: flex; align-items: baseline; gap: 16px; }
.cx-block__head b { font-family: var(--en); font-weight: 400; font-size: 13px; letter-spacing: 0.14em; color: var(--cx-mute); }
.cx-block__head h3 { font-family: var(--jp); font-weight: 500; font-size: 15px; letter-spacing: 0.2em; }
.cx-block__head span { font-size: 11.5px; color: var(--cx-mute); letter-spacing: 0.08em; }

.cx-page .field label, .cx-page .chips legend { color: var(--cx-mute); font-size: 11.5px; letter-spacing: 0.2em; }
.cx-page .field input, .cx-page .field textarea { color: var(--cx-ink); border-bottom: 1px solid var(--cx-line); padding: 12px 0; }
.cx-page .field input::placeholder, .cx-page .field textarea::placeholder { color: #b9b2a6; }
.cx-page .field input:focus, .cx-page .field textarea:focus { border-bottom-color: var(--cx-ink); box-shadow: none; }
.cx-page .chips { gap: 6px 22px; }
.cx-page .chips span { padding: 6px 0 5px; border: 0; border-bottom: 1px solid transparent; background: none; font-size: 13px; letter-spacing: 0.1em; color: var(--cx-mute); }
.cx-page .chips label:hover span { color: var(--cx-ink); }
.cx-page .chips input:checked + span { background: none; color: var(--cx-ink); border-bottom-color: var(--cx-ink); }
.cx-page .field .req { color: var(--cx-mute); }
.cx-page .agree { color: var(--cx-ink); font-size: 12.5px; }
.cx-page .agree input { accent-color: var(--cx-ink); }
.cx-page .btn {
  justify-self: start; border: 1px solid var(--cx-ink); background: var(--cx-ink); color: var(--cx-bg);
  padding: 18px 72px; font-size: 12.5px; letter-spacing: 0.32em;
}
.cx-page .btn:hover { background: transparent; color: var(--cx-ink); }
.cx-page .form__note { color: var(--cx-mute); font-size: 11.5px; }
.cx-submit { display: grid; gap: 22px; }

/* header on the light page: dark text, and the green CTA quietened */
.cx-page .header .cta { background: var(--cx-ink); color: var(--cx-bg); }
.cx-page .header.is-scrolled:not(.is-light):not(.is-open) { background: rgba(243, 240, 233, 0.94); }

@media (max-width: 900px) {
  .cx-body__grid { grid-template-columns: 1fr; }
  .cx-aside { position: static; }
  .cx-hero h1 { letter-spacing: 0.2em; text-indent: 0.2em; }
}
@media (max-width: 600px) { .cx-hero__lead { font-size: 13.5px; letter-spacing: 0.1em; } }

/* ==========================================================================
   v3 hero (2026-10-06): the client's still-life, set like a LOEWE campaign.
   The ground is the photo's own studio sweep, so the stones float on it.
   ========================================================================== */
.cx-hero {
  position: relative; display: grid; grid-template-columns: 1fr minmax(0, 46%); align-items: stretch;
  min-height: 100svh; padding: 0; text-align: left; overflow: hidden; color: #f6f2ec;
  background: linear-gradient(to bottom, #685a4b 0%, #6c5e4f 22%, #867968 46%, #ab9f92 72%, #d6cfc9 92%, #e0dad6 100%);
}
.cx-hero__text { align-self: center; padding: 140px var(--pad) 120px calc(var(--pad) + 2vw); }
.cx-hero .label { margin-top: 0; color: rgba(246, 242, 236, 0.75); }
.cx-hero h1 { margin-top: 22px; color: #f6f2ec; letter-spacing: 0.3em; text-indent: 0; font-size: clamp(40px, 4.6vw, 66px); }
.cx-hero__lead { margin: 34px 0 0; max-width: none; color: #f6f2ec; }
.cx-hero__note { margin: 14px 0 0; max-width: none; color: rgba(246, 242, 236, 0.78); }
.cx-hero__down { display: inline-block; margin-top: 44px; font-size: 12px; letter-spacing: 0.3em; color: #f6f2ec; border-bottom: 1px solid rgba(246, 242, 236, 0.6); padding-bottom: 5px; }
.cx-photo { position: relative; margin: 0; height: 100svh; min-height: 640px; }
.cx-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%);
}
.cx-hero__mark {
  position: absolute; left: calc(var(--pad) + 2vw); bottom: 34px;
  font-family: var(--en); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(29, 27, 24, 0.7);
}
html.motion .cx-photo img { opacity: 0; scale: 1.04; transition: opacity 1.6s ease 0.2s, scale 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
html.motion .cx-hero.is-shown .cx-photo img { opacity: 1; scale: 1; }
@media (max-width: 900px) {
  .cx-hero { grid-template-columns: 1fr; min-height: 0; }
  .cx-hero__text { padding: 120px var(--pad) 0; }
  .cx-photo { height: auto; min-height: 0; aspect-ratio: 1028 / 1300; margin-top: 24px; }
  .cx-photo img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); object-position: 50% 30%; }
  .cx-hero__mark { position: static; padding: 0 var(--pad) 28px; }
}

/* ==========================================================================
   v4 form (2026-10-09): legibility first.
   Boxed fields, boxed choices, darker labels, and the site's own soil brown
   and rust instead of pure black.
   ========================================================================== */
.cx-page { --cx-soil: #4a3626; --cx-rust: #9c4f2a; --cx-label: #5a5248; --cx-box: #fffdf9; --cx-edge: #cdc4b5; }

/* the form sits on its own panel */
.cx-form { background: #faf8f3; border: 1px solid var(--cx-line); padding: clamp(28px, 4vw, 52px); }
.cx-block { border-bottom-color: var(--cx-line); gap: 26px; }
.cx-block:last-of-type { border-bottom: 0; }
.cx-block__head b { font-size: 15px; color: var(--cx-rust); font-weight: 500; }
.cx-block__head h3 { font-size: 17px; color: var(--cx-soil); }
.cx-block__head span { color: var(--cx-label); }

/* labels: readable */
.cx-page .field { gap: 9px; }
.cx-page .field label, .cx-page .chips legend { color: var(--cx-label); font-size: 13px; letter-spacing: 0.1em; font-weight: 500; }
.cx-page .chips legend { margin-bottom: 12px; }
.cx-page .field .req, .cx-page .field .opt {
  display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 10.5px; letter-spacing: 0.08em; vertical-align: 1px; font-weight: 500;
}
.cx-page .field .req { background: var(--cx-rust); color: #fff; }
.cx-page .field .opt { border: 1px solid var(--cx-edge); color: var(--cx-label); }

/* fields: boxed */
.cx-page .field input, .cx-page .field textarea {
  background: var(--cx-box); border: 1px solid var(--cx-edge); border-radius: 2px;
  padding: 13px 14px; font-size: 15px; letter-spacing: 0.04em; color: var(--cx-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cx-page .field textarea { min-height: 160px; line-height: 1.8; }
.cx-page .field input::placeholder, .cx-page .field textarea::placeholder { color: #a39a8c; }
.cx-page .field input:hover, .cx-page .field textarea:hover { border-color: #a99f8f; }
.cx-page .field input:focus, .cx-page .field textarea:focus {
  outline: none; border-color: var(--cx-soil); box-shadow: 0 0 0 3px rgba(74, 54, 38, 0.14);
}

/* choices: boxed, the picked one filled in soil brown */
.cx-page .chips { gap: 8px; }
.cx-page .chips span {
  display: inline-block; padding: 10px 18px; min-width: 64px; text-align: center;
  background: var(--cx-box); border: 1px solid var(--cx-edge); border-radius: 2px;
  font-size: 13.5px; letter-spacing: 0.06em; color: var(--cx-ink);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cx-page .chips label:hover span { border-color: var(--cx-soil); color: var(--cx-ink); }
.cx-page .chips input:checked + span { background: var(--cx-soil); border-color: var(--cx-soil); color: #fff; }
.cx-page .chips input[type="checkbox"]:checked + span::before { content: "✓"; margin-right: 6px; font-size: 12px; }
.cx-page .chips input:focus-visible + span { outline: 2px solid var(--cx-rust); outline-offset: 2px; }

/* consent + send */
.cx-page .agree { font-size: 13.5px; color: var(--cx-ink); gap: 12px; align-items: center; }
.cx-page .agree input { width: 18px; height: 18px; margin-top: 0; accent-color: var(--cx-soil); }
.cx-page .btn { background: var(--cx-soil); border-color: var(--cx-soil); color: #fff; padding: 18px 64px; font-size: 14px; letter-spacing: 0.24em; }
.cx-page .btn:hover { background: var(--cx-rust); border-color: var(--cx-rust); color: #fff; }
.cx-page .form__note { color: var(--cx-label); font-size: 12.5px; }

/* sidebar: same panel language, quieter */
.cx-aside h2 { color: var(--cx-soil); font-size: 13px; }
.cx-aside li b { color: var(--cx-rust); }
.cx-aside li span, .cx-facts dt { color: var(--cx-label); }
.cx-dm { border: 1px solid var(--cx-soil); padding: 12px 18px; color: var(--cx-soil); }
.cx-dm:hover { background: var(--cx-soil); color: #fff; opacity: 1; }

/* header CTA follows the new accent */
.cx-page .header .cta { background: var(--cx-soil); color: #fff; }

@media (max-width: 600px) {
  .cx-form { padding: 22px 16px; }
  .cx-page .chips span { padding: 10px 14px; }
  .cx-page .btn { width: 100%; justify-self: stretch; }
}

/* Formspree states */
.cx-page .form__error { color: #9c2a1a; font-size: 13px; line-height: 1.9; border: 1px solid #d9a69a; background: #fbefeb; padding: 12px 14px; }
.cx-page .btn:disabled { opacity: 0.6; cursor: wait; }
.cx-page .form__done { padding: 28px; border: 1px solid var(--cx-line); background: var(--cx-box); font-size: 14px; line-height: 2.1; }
.cx-page .form__done:focus { outline: none; }
.cx-page .form__done-h { font-family: var(--jp); font-size: 18px; letter-spacing: 0.14em; color: var(--cx-soil); margin-bottom: 10px; }
.cx-page .form__done a { border-bottom: 1px solid currentColor; }
/* FAQ (also feeds AI answers via FAQPage data) */
.cx-faq { padding-block: 0 clamp(80px, 10vw, 140px); }
.cx-faq__in { max-width: 860px; }
.cx-faq h2 { font-family: var(--jp); font-weight: 500; font-size: 20px; letter-spacing: 0.16em; color: var(--cx-soil); margin-bottom: 24px; }
.cx-faq dl { border-top: 1px solid var(--cx-line); }
.cx-faq dt { padding: 20px 0 6px; font-weight: 500; font-size: 15px; letter-spacing: 0.06em; }
.cx-faq dt::before { content: "Q. "; color: var(--cx-rust); font-family: var(--en); }
.cx-faq dd { padding-bottom: 20px; border-bottom: 1px solid var(--cx-line); font-size: 14px; line-height: 2; color: var(--cx-label); }

/* 2026-10-15 ご依頼の流れ 01 のボタン（Contact 版は土の茶） */
.cx-aside li .step-cta { grid-column: 2; justify-self: start; margin-top: 10px; background: var(--cx-soil, #4a3626); color: #fff; }

/* 2026-10-15 Contact の石の写真：iPhone(Safari) で高さ0になり消えていた。スマホは画像の自然な比率で表示し、フェードにも頼らない */
@media (max-width: 900px) {
  .cx-photo { aspect-ratio: auto; height: auto; }
  .cx-photo img { position: relative; inset: auto; display: block; width: 100%; height: auto; }
  html.motion .cx-photo img { opacity: 1; scale: 1; transition: none; }
}
#contact-form { scroll-margin-top: 110px; }