/* ===== Custom Properties ===== */
:root {
  --color-bg:          #faf8f5;
  --color-text:        #2c2c2c;
  --color-heading:     #3b2a1a;
  --color-body-text:   #4a3828;
  --color-muted:       #6b5744;
  --color-footer:      #7a6854;
  --color-accent:      #b07d4a;
  --color-accent-text: #7a5228;
  --color-card-bg:     #ffffff;
  --color-border:      #e0d4c3;
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== Base ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  padding: 40px 20px;
}

p { color: var(--color-body-text); margin-bottom: 10px; }

a {
  color: var(--color-accent-text);
  text-decoration: none;
  word-break: break-all;
}
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.container { max-width: 680px; margin: 0 auto; }

/* ===== Header ===== */
header { margin-bottom: 48px; }
header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}
header p { font-size: 0.95rem; color: var(--color-muted); }
.updated { font-size: 0.85rem; color: var(--color-footer); }

/* トップページのみ中央寄せ・余白拡大 */
.page-home header {
  margin-bottom: 56px;
  text-align: center;
}
.page-home header h1 { font-size: 2rem; margin-bottom: 12px; }

/* ===== Section / Heading ===== */
section { margin-bottom: 40px; }

h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-heading);
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
  margin-bottom: 14px;
}

/* ===== Card component (.nav-list a / .highlight-box / .contact-box の共通基盤) ===== */
.nav-list a,
.highlight-box,
.contact-box {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

/* ===== Navigation ===== */
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  color: var(--color-heading);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: box-shadow 0.15s;
  word-break: normal;
}
.nav-list a:hover {
  box-shadow: 0 4px 12px rgba(176, 125, 74, 0.15);
  text-decoration: none;
}
.nav-list a span { color: var(--color-accent); font-size: 1.2rem; }

.back-link {
  display: inline-block;
  color: var(--color-accent-text);
  font-size: 0.9rem;
  margin-bottom: 24px;
  text-decoration: none;
  word-break: normal;
}
.back-link:hover { text-decoration: underline; }

/* ===== Highlight box ===== */
.highlight-box { padding: 20px 24px; margin-top: 8px; }
.highlight-box p { margin-bottom: 0; font-weight: 600; color: var(--color-heading); }
.highlight-box + p { margin-top: 14px; }

/* ===== FAQ ===== */
.faq-item { margin-bottom: 24px; }
.faq-item dt {
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 4px;
}
.faq-item dd { color: var(--color-body-text); padding-left: 0; }

/* ===== Contact box ===== */
.contact-box { padding: 24px 28px; }
.contact-box p { margin-bottom: 12px; }
.contact-box a {
  display: inline-block;
  font-weight: 600;
  word-break: break-all;
}

/* ===== Footer ===== */
footer {
  margin-top: 64px;
  font-size: 0.8rem;
  color: var(--color-footer);
  text-align: center;
}

/* ===== Accessibility – focus ring ===== */
a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav-list a:focus-visible { border-radius: 12px; }

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          #1a1410;
    --color-text:        #e8ddd0;
    --color-heading:     #f0e6d8;
    --color-body-text:   #d4c4b0;
    --color-muted:       #a08870;
    --color-footer:      #8a7462;
    --color-accent:      #c99058;
    --color-accent-text: #d4a060;
    --color-card-bg:     #2a1f15;
    --color-border:      #4a3828;
  }
}