:root {
  --ink: #1b1b1b;
  --ivory: #faf8f5;
  --panel: #f2ede4;
  --panel-2: #ece4d5;
  --muted: #8a8072;
  --muted-2: #b3a894;
  --gold: #b08d57;
  --gold-soft: #d9c6a3;
  --line: #e4ddd0;
  --ok: #4c6b52;
  --radius: 2px;
  --radius-frame: 34px;
  --font-display: "Montserrat", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Roboto", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --shadow-soft: 0 18px 40px -22px rgba(27, 27, 27, 0.28);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; color: var(--ink); }

a { color: inherit; }

img { max-width: 100%; }

/* ---------- Shared nav ---------- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 32px;
}

.site-nav .logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ink);
}

.site-nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.site-nav nav a.cta-ghost {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 9px 20px;
  color: var(--ink);
}

/* Logged-in account indicator on mypage screens — plain text, not a link,
   so it never reads as a clickable affordance that goes nowhere. */
.site-nav nav .nav-user {
  font-size: 0.92rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- Desktop page shell ---------- */

.page-desktop {
  min-height: 100vh;
}

.page-desktop main {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 32px 120px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.4;
}

.hero .sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 46em;
}

.hero .tagline {
  font-size: 0.95rem;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
  margin: 20px 0 20px;
  display: inline-block;
}

/* ---------- Homepage hero (image-led) ----------
   The client's reference for the top screen leads with photography, not type
   alone. Split layout: photo on one side, copy on the other — the source shot
   has ivory negative space on its right, so it blends into the page ground
   and reads as one composition rather than a pasted-in box. */

.hero-visual {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 32px 0;
}

.hero-visual img {
  width: 100%;
  height: clamp(260px, 30vw, 400px);
  object-fit: cover;
  object-position: 42% center;
  border-radius: var(--radius);
  background: var(--panel);
}

.hero-visual .hook {
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 18px;
}

/* ---------- Centred section headers ----------
   Matches the client's reference, where every section header and its CTA sit
   centred and only list/table/card content is flush-left for readability. */

.page-head { text-align: center; }
.page-head .sub { margin-left: auto; margin-right: auto; }
.page-head .tagline { margin-left: auto; margin-right: auto; }
.btn-row.center { justify-content: center; }
.trust-strip.center { text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .hero-visual {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 8px 20px 0;
  }
  .hero-visual img { height: clamp(200px, 52vw, 300px); }
}

/* ---------- Buttons ---------- */

.btn-primary, .btn-ghost {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 15px 34px;
  cursor: pointer;
  border: 1px solid var(--ink);
  transition: opacity 0.15s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--ivory);
}

.btn-primary:hover { opacity: 0.86; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover { opacity: 0.7; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 28px; }

/* ---------- Cards ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}

/* ---------- Pain list ---------- */

.pain-list {
  list-style: none;
  margin: 24px 0 36px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pain-list li {
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: var(--panel);
  font-size: 0.98rem;
}

/* ---------- Homepage sections ----------
   The top screen was hero + three bullets and nothing else; these two blocks
   give it substance and, in the flow summary's case, a direct route to the
   page that explains the service (previously reachable only two clicks deep
   with no nav entry). */

main > .section-head:first-child { margin-top: 0; }

.section-head {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 56px 0 22px;
}

/* ---------- Effort asymmetry ----------
   The whole pitch is 預けるだけ, so the homepage states it as a comparison
   the eye resolves before reading: one item on the seller's side, nine on
   MEITSUGI's. The seller's card is the emphasised one — it is the short list
   that matters to them. */

.effort-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
  margin: 8px 0 28px;
  align-items: start;
}

.do-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
}

.do-card.you { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.do-card.us { background: var(--panel); }

.do-count {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 6px;
}

.do-card.you .do-count { color: var(--gold-soft); }
.do-card.us .do-count { color: var(--muted-2); }

.do-card h3 {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  font-weight: 500;
}

.do-card.you h3 { color: var(--gold-soft); }
.do-card.us h3 { color: var(--muted); }

.do-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.do-card .do-note { font-size: 0.8rem; margin: 10px 0 0; opacity: 0.72; }
.do-card li { font-size: 0.92rem; }
.do-card.you li { font-size: 1.15rem; font-family: var(--font-display); }
.do-card.us li { color: var(--ink); padding-left: 16px; position: relative; }
.do-card.us li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* ---------- Trust strip ---------- */

.trust-strip {
  display: grid;
  gap: 10px;
  margin: 36px 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.trust-strip p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  padding-left: 20px;
  position: relative;
}

.trust-strip p::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ---------- Step list ---------- */

.step-list {
  list-style: none;
  margin: 32px 0;
  padding: 0;
}

.step-list li {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.step-list li:last-child { border-bottom: 1px solid var(--line); }

.step-list .num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
}

.step-list h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step-list p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Scene photography ----------
   The client's reference illustrates every step of the selling flow; these
   sit inside the step body so each stage shows as well as tells. */

.step-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--panel);
  margin: 0 0 12px;
}

.page-img {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 280px);
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--panel);
  margin: 8px 0 28px;
}

/* ---------- Forms ---------- */

.form-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  margin-top: 24px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}

.field input:focus { outline: 1px solid var(--gold); }

.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.consent-row input { margin-top: 3px; }

.inert-link {
  color: var(--muted-2);
  text-decoration: none;
  cursor: default;
}

.form-note {
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-top: 14px;
}

.link-back {
  padding-left: 0;
  border: none;
  display: inline-block;
  margin-bottom: 8px;
}

.frame-subhead {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 24px 0 10px;
}

.note {
  font-size: 0.85rem;
  color: var(--muted);
}

.note-2 {
  font-size: 0.78rem;
  color: var(--muted-2);
}

.form-footer {
  margin-top: 28px;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Price / commission table ---------- */

.price-table {
  width: 100%;
  max-width: 620px;
  border-collapse: collapse;
  margin: 20px 0 32px;
  font-size: 0.92rem;
}

.price-table th, .price-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.price-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- App screens (item-status / selling / settlement) ----------
   Desktop-first here: these screens are real, fully-navigable pages, not
   just a phone-mockup graphic — they get a proper wide dashboard layout on
   desktop and a native-feeling full-bleed layout on mobile (media query
   below). The fake "9:41" phone status strip that used to sit here was
   removed with the phone-mockup framing it belonged to. */

.mobile-frame-wrap {
  min-height: 100vh;
  background: var(--ivory);
}

.mobile-frame {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.frame-content {
  flex: 1;
  padding: 40px 32px 100px;
}

.frame-content h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0 0 28px;
}

.tab-bar {
  order: -1;
  display: flex;
  justify-content: flex-start;
  gap: 36px;
  border-top: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0 32px;
}

.tab-bar a {
  flex: none;
  text-align: left;
  text-decoration: none;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 16px 0;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-bar a .dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.tab-bar a.active { color: var(--ink); }
.tab-bar a.active .dot { background: var(--gold); }

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.item-grid .item-card {
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.item-grid .item-card .thumb {
  width: 100%;
  height: 180px;
}

/* ---------- Item cards (mobile) ---------- */

.item-card {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.item-card .thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--panel);
}


.item-card .meta { flex: 1; min-width: 0; }
.item-card .id { font-size: 0.68rem; color: var(--muted-2); letter-spacing: 0.03em; }
.item-card .name { font-size: 0.9rem; margin: 2px 0; }
.item-card .cond { font-size: 0.76rem; color: var(--muted); margin-bottom: 2px; }
.item-card .price { font-size: 0.85rem; }
.item-card .earnings { font-size: 0.85rem; color: var(--ink); margin-top: 2px; }

.status-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--muted);
  margin-bottom: 4px;
}

.status-badge.selling { border-color: var(--gold); color: var(--gold); }
.status-badge.sold { border-color: var(--ok); color: var(--ok); }

/* ---------- Bar chart ---------- */

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  margin: 20px 0 8px;
  max-width: 620px;
}

.bar-chart .bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bar-chart .fill {
  width: 100%;
  background: var(--panel-2);
  border-radius: 2px 2px 0 0;
}

.bar-chart .fill.has-value { background: var(--gold-soft); }

.bar-chart .val {
  font-size: 0.58rem;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
}

.bar-chart .month {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 6px;
}

.payout-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 4px 0 22px;
  max-width: 620px;
}

.payout-summary .row {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--panel);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.payout-summary .amount { font-family: var(--font-display); font-size: 1.05rem; }

/* ---------- Product photo placeholder ---------- */

.photo-hero {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 360px);
  object-fit: cover;
  object-position: 35% center;
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 28px;
}



/* ---------- Channel tags ---------- */

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }

/* ---------- Sales metrics (mypage/selling.html) ----------
   What gives the 販売中 screen its own job: item-status.html answers "where
   are my things?", this answers "how is selling going?" — the counters here
   are the visible evidence of the 価格調整・購入者対応 MEITSUGI performs on
   the seller's behalf. */

.sales-metrics {
  margin: 10px 0 8px;
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
}

.sales-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 3px;
}

.sales-metrics dt { color: var(--muted); margin: 0; }
.sales-metrics dd { margin: 0; color: var(--ink); }

.tag-chip {
  font-size: 0.68rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 10px;
  color: var(--muted);
}

/* ---------- Choice cards ---------- */

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0 36px;
}

.choice-grid .card h3 { font-size: 1rem; margin-bottom: 8px; }
.choice-grid .card p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* ---------- Footer ---------- */

.page-footer {
  max-width: 780px;
  margin: 60px auto 0;
  padding: 24px 32px 60px;
  font-size: 0.82rem;
  color: var(--muted-2);
  text-align: center;
}

/* ---------- Mobile (real phone viewports, not the .mobile-frame mockup) ---------- */

@media (max-width: 640px) {
  .site-nav {
    flex-wrap: wrap;
    padding: 20px 20px;
    row-gap: 12px;
  }

  .site-nav .logo { font-size: 1rem; }

  .site-nav nav {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  /* Three nav items on a 390px screen will break mid-word without this —
     Japanese has no spaces, so the browser wraps anywhere it likes. */
  .site-nav nav a {
    white-space: nowrap;
    font-size: 0.8rem;
  }

  .site-nav nav a.cta-ghost {
    padding: 7px 12px;
    font-size: 0.78rem;
  }

  /* Mobile is the primary demo surface: CTAs go full-width so they read as
     deliberate blocks rather than small left-hugging buttons, and give a
     comfortable tap target. */
  .btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-row .btn-primary, .btn-row .btn-ghost { width: 100%; text-align: center; }
  .btn-row .link-back { width: auto; text-align: left; }

  /* Images are supporting evidence on a phone, not the subject: at the desktop
     sizes they eat a quarter of the viewport each, so the copy that actually
     sells the service is pushed below the fold on every section. Cap their
     height so image and text read together in one glance. */
  .hero-visual img { height: 168px; }
  .step-img { height: 112px; max-width: 100%; }
  .page-img { height: 148px; }

  /* The item photo's source is square, so any wide box crops the product
     itself — and letterboxing it shows a seam, because the shots are lit with
     a vignette rather than a flat ground. Give it a square box at a fraction
     of the column width instead: smaller on screen than the wide crop it
     replaces, and the whole item stays visible. */
  .photo-hero {
    width: 62%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
  }

  .section-head { margin: 40px 0 18px; }

  .effort-split { grid-template-columns: 1fr; gap: 12px; }
  .do-card { padding: 20px; }
  .do-count { font-size: 2.2rem; }

  .page-desktop main { padding: 32px 20px 80px; }

  .form-panel { padding: 24px 20px; }

  .field-row { grid-template-columns: 1fr; }

  .price-table th, .price-table td { padding: 10px 8px; font-size: 0.84rem; }

  .page-footer { padding: 20px 20px 48px; }

  /* App screens (item-status / selling / settlement): the desktop dashboard
     layout (wide item grid, top tab strip) collapses back to a native-app
     feeling single column with a bottom tab bar — this is the layout these
     screens were originally designed around, and matches the client's own
     reference mobile screenshots. */
  .frame-content { padding: 24px 20px 90px; }
  .frame-content h1 { font-size: 1.2rem; margin: 0 0 18px; }

  .tab-bar {
    order: 0;
    justify-content: space-around;
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: none;
    background: #fff;
    padding: 10px 12px 16px;
  }

  .tab-bar a {
    flex: 1;
    flex-direction: column;
    text-align: center;
    padding: 4px 0 0;
    font-size: 0.7rem;
  }

  .item-grid { display: block; }

  .item-grid .item-card {
    flex-direction: row;
    align-items: center;
    border: none;
    border-radius: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .item-grid .item-card .thumb { width: 64px; height: 64px; }
}