/* styles.css — owaruzendo.com */

:root {
  --bg:         #ffffff;
  --bg-alt:     #f6f6f9;
  --text:       #1a1a2e;
  --text-muted: #5a5a78;
  --heading:    #0a1628;
  --accent:     #1d3a7a;
  --border:     #e2e4ec;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", Meiryo, sans-serif;
  --max-w: 860px;
  --pad-v: 5rem;
  --pad-h: 2rem;
}

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

html { font-size: 16px; }

body {
  font-family: var(--font);
  color:       var(--text);
  background:  var(--bg);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

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

/* ────────────── Header ────────────── */

.site-header {
  background:  var(--heading);
  color:       #fff;
  padding:     4.5rem var(--pad-h) 4rem;
  text-align:  center;
}

.wordmark {
  font-size:      2.6rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: lowercase;
  margin-bottom:  1.25rem;
}

.tagline {
  font-size:   1rem;
  line-height: 2;
  color:       rgba(255, 255, 255, .65);
}

.tagline [lang="en"] {
  font-size: .875rem;
  color:     rgba(255, 255, 255, .4);
}

/* ────────────── Sections ────────────── */

.section {
  padding: var(--pad-v) 0;
}

.section--alt { background: var(--bg-alt); }

.section h2 {
  font-size:      1.35rem;
  font-weight:    700;
  color:          var(--heading);
  margin-bottom:  2rem;
  padding-bottom: .875rem;
  border-bottom:  2px solid var(--border);
  display:        flex;
  align-items:    baseline;
  gap:            .75em;
}

.section h2 [lang="en"] {
  font-size:   .9rem;
  font-weight: 400;
  color:       var(--text-muted);
}

/* ────────────── About ────────────── */

.about-body p {
  color:         var(--text);
  margin-bottom: 1rem;
  max-width:     640px;
}

.about-body p[lang="en"] {
  color: var(--text-muted);
}

/* ────────────── Services ────────────── */

.services-list {
  list-style: none;
  border-top: 1px solid var(--border);
}

.services-list li {
  border-bottom: 1px solid var(--border);
  padding:       1.375rem 0;
}

.service-ja {
  display:       block;
  font-weight:   600;
  color:         var(--text);
  font-size:     1rem;
  margin-bottom: .25rem;
}

.service-en {
  display:   block;
  font-size: .9rem;
  color:     var(--text-muted);
}

/* ────────────── Representative ────────────── */

.rep-wrap {
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
}

.rep-label {
  font-size:      .8rem;
  letter-spacing: .06em;
  color:          var(--text-muted);
  text-transform: uppercase;
}

.rep-img {
  display:   block;
  width:     280px;
  height:    auto;
  max-width: 100%;
}

/* ────────────── Contact ────────────── */

.contact-email {
  font-size: 1.05rem;
}

.contact-email a {
  color:           var(--accent);
  text-decoration: none;
  font-weight:     500;
}

.contact-email a:hover { text-decoration: underline; }

/* ────────────── Footer ────────────── */

.site-footer {
  background:     var(--heading);
  color:          rgba(255, 255, 255, .4);
  text-align:     center;
  padding:        2rem var(--pad-h);
  font-size:      .8rem;
  letter-spacing: .04em;
}

/* ────────────── Responsive ────────────── */

@media (max-width: 640px) {
  :root {
    --pad-v: 3rem;
    --pad-h: 1.25rem;
  }

  .wordmark   { font-size: 2rem; }
  .section h2 { font-size: 1.15rem; }
  .rep-img    { width: 220px; }
}