/* STAYGOLD合同会社 — corporate site
   Design intent: disclose facts plainly. No animation, no gradients,
   no carousels. Density and typography carry the credibility. */

:root {
  --ink: #1c1c1a;
  --ink-soft: #4a463f;
  --muted: #6f6a60;
  --paper: #faf8f4;
  --paper-alt: #f2eee6;
  --gold: #9a7b25;
  --gold-bright: #b08f2f;
  --rule: #ddd8ce;
  --max: 1000px;
  --gap: 1.5rem;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

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

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--gold); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 1.25rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem;
}
.skip:focus { left: 0; top: 0; z-index: 100; }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.header-inner {
  display: flex; flex-direction: column; gap: .5rem;
  padding-block: .9rem;
}
.brand {
  font-family: var(--serif); font-size: 1.15rem; letter-spacing: .12em;
  text-decoration: none; color: var(--ink);
}
.brand span { font-size: .8rem; letter-spacing: .08em; color: var(--muted); margin-inline-start: .4em; }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
}
.site-nav a {
  text-decoration: none; font-size: .875rem; color: var(--ink-soft);
  padding-block: .25rem; border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

@media (min-width: 720px) {
  .header-inner { flex-direction: row; align-items: baseline; justify-content: space-between; padding-block: 1.25rem; }
  .brand { font-size: 1.3rem; }
}

/* ---------- hero ---------- */

.hero {
  background: var(--ink);
  color: var(--paper);
  /* If assets/hero.jpg is absent the ink background simply shows through. */
  background-image: linear-gradient(rgba(18,18,16,.62), rgba(18,18,16,.62)), url("/assets/hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero .wrap { padding-block: 4rem; }
.hero h1 {
  margin: 0 0 1.25rem;
  font-size: 1.75rem;
  line-height: 1.6;
}
.hero p { margin: 0; max-width: 34em; color: #e8e3d9; font-size: .975rem; }
.hero .rule { width: 3rem; height: 2px; background: var(--gold-bright); margin: 0 0 1.5rem; }

@media (min-width: 720px) {
  .hero .wrap { padding-block: 6.5rem; }
  .hero h1 { font-size: 2.5rem; }
  .hero p { font-size: 1.05rem; }
}

/* ---------- page head (subpages) ---------- */

.page-head { border-bottom: 1px solid var(--rule); background: var(--paper-alt); }
.page-head .wrap { padding-block: 2.5rem; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.page-head p { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; }
@media (min-width: 720px) { .page-head h1 { font-size: 1.9rem; } }

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

.section { padding-block: 3.5rem; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.section h2 {
  margin: 0 0 2rem; font-size: 1.3rem;
  padding-bottom: .75rem; border-bottom: 2px solid var(--ink);
  display: inline-block;
}
.section h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.section > .wrap > p { max-width: 40em; }
.alt { background: var(--paper-alt); }

@media (min-width: 720px) {
  .section { padding-block: 5rem; }
  .section h2 { font-size: 1.5rem; }
}

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

.cards { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.card { border-top: 2px solid var(--gold); padding-top: 1rem; }
.card h3 { font-family: var(--serif); }
.card p { margin: 0; font-size: .925rem; color: var(--ink-soft); }

/* ---------- steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.25rem 0 1.25rem 3.25rem;
  border-bottom: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35rem;
  font-family: var(--serif); font-size: .95rem; color: var(--gold);
  letter-spacing: .05em;
}
.steps h3 { margin: 0 0 .25rem; font-size: 1rem; }
.steps p { margin: 0; font-size: .925rem; color: var(--ink-soft); }

/* ---------- notice block (what we do not do) ---------- */

.notice {
  border: 1px solid var(--ink);
  padding: 1.5rem 1.25rem;
  background: var(--paper);
  max-width: 44em;
}
.notice h3 { margin-top: 0; font-size: 1.05rem; }
.notice p:last-child { margin-bottom: 0; }
@media (min-width: 720px) { .notice { padding: 2rem; } }

/* ---------- prose ---------- */

/* .prose sets the reading measure. When it sits on the same element as
   .wrap, keep the wrap at full width so the text still starts at the same
   left edge as every other section, and constrain the children instead. */
.prose { max-width: 40em; }
.wrap.prose { max-width: var(--max); }
.wrap.prose > * { max-width: 40em; }
.prose p { margin: 0 0 1.5rem; }
.prose h2 { margin-top: 3rem; }
.prose h2:first-child { margin-top: 0; }
.signature { text-align: right; font-family: var(--serif); color: var(--ink-soft); }

/* ---------- definition table ---------- */

.facts { margin: 0; border-top: 1px solid var(--rule); }
.facts div {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--rule);
}
.facts dt { font-size: .8rem; color: var(--muted); letter-spacing: .08em; }
.facts dd { margin: 0; font-size: .975rem; }
@media (min-width: 600px) {
  .facts div { flex-direction: row; gap: 0; align-items: baseline; }
  .facts dt { flex: 0 0 10rem; font-size: .875rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: .9rem 2rem; font-size: .95rem; letter-spacing: .08em;
  border: 1px solid var(--ink);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.tel {
  font-family: var(--serif); font-size: 1.6rem; letter-spacing: .04em;
  text-decoration: none; display: inline-block;
}
.tel:hover { color: var(--gold); }

/* ---------- contact strip ---------- */

.contact-strip { background: var(--ink); color: var(--paper); }
.contact-strip .wrap { padding-block: 3.5rem; }
.contact-strip h2 { color: var(--paper); border-bottom-color: var(--gold-bright); }
.contact-strip p { color: #e8e3d9; max-width: 38em; }
.contact-strip .tel { color: var(--paper); }
.contact-strip .btn { background: var(--gold); border-color: var(--gold); color: #fff; }
.contact-strip .btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

/* ---------- form ---------- */

.form { max-width: 36em; }
.form label { display: block; margin-bottom: 1.5rem; font-size: .9rem; }
.form .req { color: var(--gold); font-size: .75rem; margin-inline-start: .5em; letter-spacing: .05em; }
.form input, .form select, .form textarea {
  display: block; width: 100%; margin-top: .4rem;
  padding: .7rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  border-radius: 0;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; }
.form .consent input { width: auto; margin-top: .45rem; }
.form button { cursor: pointer; font: inherit; }

.form-note {
  border-left: 2px solid var(--gold); padding-left: 1rem;
  font-size: .875rem; color: var(--ink-soft); max-width: 36em;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--paper-alt);
  border-top: 1px solid var(--rule);
  font-size: .875rem;
}
.site-footer .wrap { padding-block: 2.5rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr; } }
.site-footer .brand { display: inline-block; margin-bottom: .75rem; }
.site-footer address { font-style: normal; color: var(--ink-soft); line-height: 1.8; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul a { text-decoration: none; color: var(--ink-soft); }
.site-footer ul a:hover { color: var(--gold); }
.copyright {
  margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .8rem;
}