:root {
  color-scheme: light;
  --orange: #fa7902;
  --paper: #fffdf9;
  --ink: #27231f;
  --muted: #6b6259;
  --line: #e9e1d7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  border-top: 6px solid var(--orange);
}

a { color: inherit; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.home {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.home-main {
  display: grid;
  place-items: center;
  padding: 64px 24px;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  margin: 0;
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1;
}

.home-brand img {
  width: clamp(80px, 10vw, 132px);
  height: auto;
}

.home-center { display: grid; justify-items: center; gap: 40px; }
.home-navigation { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.home-app-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 8px 4px;
  border-bottom: 2px solid var(--orange);
  font-size: 14px;
  text-decoration: none;
}
.home-app-link:hover { border-bottom-color: var(--ink); }

.home-footer {
  padding: 28px 24px 36px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
}

.home-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
  text-decoration: none;
}

.home-footer a:hover { text-decoration: underline; }

.page-header, .policy, .company, .page-footer {
  width: min(100% - 48px, 800px);
  margin-inline: auto;
}

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 32px; }
.home-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.home-hobby-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; text-decoration: none; }
.home-hobby-link:hover { text-decoration: underline; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 24px; }
.language-switch { display: flex; align-items: center; gap: 4px; }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border-bottom: 2px solid transparent; font-size: 14px; text-decoration: none; }
.language-switch a[aria-current="page"] { border-bottom-color: var(--orange); font-weight: 600; }
.language-switch a:hover { background: #fff3e6; }
.small-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}

.small-brand img { width: 36px; height: 36px; }
.policy, .company { padding-block: 48px 72px; }
.company-heading { padding-bottom: 32px; }
.company-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.8; }
.company-table th, .company-table td { padding: 24px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.company-table th { width: 32%; font-weight: 500; color: var(--muted); }
.company-table tr:last-child > * { border-bottom: 1px solid var(--line); }
.policy-heading { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 16px; color: var(--muted); font-size: 12px; letter-spacing: .16em; }
.policy h1, .company h1 { margin: 0; font-size: clamp(26px, 4.8vw, 38px); line-height: 1.5; font-weight: 600; }
.policy section { margin-top: 36px; }
.policy h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.7; }
.policy p, .policy li { font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
.policy p { margin: 12px 0 0; }
.policy ul { margin: 12px 0 0; padding-left: 1.5em; }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-block: 24px 36px; color: var(--muted); font-size: 12px; }
.page-footer a { display: inline-flex; align-items: center; min-height: 44px; }

.apps-page .page-header, .apps-main, .apps-page .page-footer {
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
}
.apps-page .page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); }
.apps-heading { padding-block: 48px 40px; }
.apps-heading h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 600; line-height: 1.5; }
.apps-intro { margin: 20px 0 0; font-size: 16px; line-height: 1.9; color: var(--muted); }
.app-navigation { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }
.app-navigation a { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; }
.app-section { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; padding-block: 56px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.app-description { min-width: 0; }
.app-identity { display: flex; align-items: center; gap: 16px; }
.app-icon { flex: 0 0 auto; width: 80px; height: 80px; }
.app-category { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.app-identity h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.3; }
.app-description .app-tagline { margin-top: 28px; font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.6; }
.app-description > p:not(.app-tagline):not(.app-requirements), .app-features { font-size: 16px; line-height: 1.9; }
.app-features { margin: 20px 0 28px; padding-left: 1.3em; }
.app-features li { margin-block: 8px; }
.app-features li::marker { color: #b54d00; }
.store-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 22px; min-height: 48px; border-radius: 6px; color: white; background: var(--ink); font-size: 16px; text-decoration: none; }
.store-link:hover { background: #a94400; }
.app-requirements { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.app-preview { margin: 0; min-width: 0; }
.app-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.app-preview figcaption { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.store-note { margin: 0; padding-block: 8px 48px; color: var(--muted); font-size: 13px; line-height: 1.8; }

@media (max-width: 860px) {
  .app-section { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 540px) {
  .home-brand { flex-direction: column; gap: 28px; font-size: clamp(52px, 14vw, 72px); }
  .home-brand img { width: 96px; }
  .home-center { gap: 32px; }
  .home-footer { padding-bottom: 24px; }
  .page-header { padding-block: 24px; }
  .policy, .company { padding-block: 28px 48px; }
  .company-table th, .company-table td { padding: 20px 8px; }
  .company-table th { width: 38%; }
  .apps-heading { padding-top: 28px; }
  .app-section { padding-block: 36px; }
  .app-icon { width: 64px; height: 64px; }
  .apps-page .header-actions { width: 100%; justify-content: space-between; }
  .page-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}