/* Static support page styles. Edit this file directly for layout changes. */
:root {
  color-scheme: light;
  --ink: #16181d;
  --muted: #6d7078;
  --line: #dfe1e6;
  --accent: #4d6655;
  --contact-soft: #f4d2cf;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f4f0ea;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.page {
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(82, 106, 86, .14), transparent 34%), linear-gradient(135deg, #f8f5ef 0%, #eee8dd 100%);
}
.shell { width: min(calc(100% - 3rem), 72rem); margin: 0 auto; }
.topbar { display: flex; justify-content: flex-end; align-items: center; min-height: 4.75rem; }
.nav { display: flex; gap: 1.35rem; }
.nav a, .footer a { color: var(--muted); font-size: .82rem; }

.hero {
  min-height: 20rem;
  padding: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #263a30 0%, #263a30 38%, #4d6655 100%);
  border-radius: 1.75rem;
}
.hero h1 { display: inline-flex; align-items: center; gap: 1rem; max-width: 31rem; margin: 0; font-size: clamp(2rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -.065em; }
.hero-title-text, .hero-lead, .section-intro h2, .contact-header h2, .privacy-intro h2 { display: flex; flex-direction: column; }
.hero-title-english, .section-title-english, .privacy-title-english, .contact-title-english { font-size: .52em; font-weight: 600; line-height: 1.15; }
.hero-title-english {
  color: #fff;
  letter-spacing: normal;
}
.hero-lead-english { color: rgba(255, 255, 255, .72); }
.hero-support-mark { display: grid; place-items: center; width: 6.4rem; height: 6.4rem; }
.support-icon {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 60;
}
.hero-support-icon { font-size: 3.7rem; }
.hero-lead { gap: .22rem; margin: 1.8rem 0 0; color: rgba(255, 255, 255, .68); font-size: 1.05rem; line-height: 1.8; }
.hero-lead-english { font-size: .86em; }

.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.quick-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 5.6rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; }
.quick-links a:hover, .quick-links a:focus-visible { border-color: var(--accent); box-shadow: 0 .7rem 1.8rem rgba(22, 24, 29, .08); text-decoration: none; transform: translateY(-.15rem); }
.quick-index { color: var(--accent); font-size: .7rem; font-weight: 800; }
.quick-links strong, .quick-links small, .quick-link-english, .quick-link-description-english { display: block; }
.quick-links strong { font-size: .92rem; }
.quick-link-english { margin-top: .12rem; color: var(--muted); font-size: .76rem; font-weight: 650; }
.quick-links small { margin-top: .28rem; color: var(--muted); font-size: .72rem; }
.quick-link-description-english { margin-top: .12rem !important; font-size: .66rem !important; }
.arrow { color: var(--accent); font-size: 1.1rem; }

.apps-section, .contact-section, .privacy-section { padding: clamp(5rem, 10vw, 8rem) 0; }
.section-eyebrow { margin: 0; color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .14em; }
.section-intro h2, .contact-header h2, .privacy-intro h2 { margin: .65rem 0 0; font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.25; letter-spacing: -.06em; }
.section-title-english, .privacy-title-english { color: var(--muted); }
.section-intro > p:last-child { display: flex; flex-direction: column; gap: .22rem; margin: 1rem 0 0; color: var(--muted); font-size: .98rem; }
.section-description-english { color: #7a7d83; font-size: .88em; }

.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2.5rem; }
.app-card { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 7.25rem; padding: 1.25rem; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; }
.app-card-background-icon { position: absolute; right: -.35rem; bottom: -.35rem; z-index: 0; color: #dfe1e6; font-size: 100px; pointer-events: none; }
.app-mark { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; background: var(--accent); color: #fff; border-radius: .85rem; }
.app-icon { font-size: 1.45rem; }
.app-card-body { position: relative; z-index: 1; min-width: 0; }
.app-card h3 { margin: 0; font-size: .98rem; }
.app-card p { display: flex; flex-direction: column; gap: .16rem; margin: .35rem 0 0; color: var(--muted); font-size: .76rem; }
.app-platform-english { color: #7a7d83; font-size: .9em; }
.app-store-badge-link { display: inline-flex; width: 6.8rem; height: 2.5rem; margin-top: .75rem; line-height: 0; }
.app-store-badge { display: block; width: 6.8rem; height: 2.5rem; object-fit: contain; }

.contact-section { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: 3rem; padding-right: clamp(1.5rem, 6vw, 6rem); padding-left: clamp(1.5rem, 6vw, 6rem); color: #fff; background: var(--accent); border-radius: 1.75rem; }
.contact-section .section-eyebrow { color: rgba(255, 255, 255, .58); }
.contact-header h2 { max-width: 15rem; }
.contact-title-english { color: rgba(255, 255, 255, .68); }
.contact-body { align-self: center; max-width: 38rem; }
.contact-body > p:first-child { margin: 0; color: rgba(255, 255, 255, .8); font-size: 1rem; line-height: 1.9; }
.contact-english { margin: .45rem 0 0; color: rgba(255, 255, 255, .68); font-size: .88rem; line-height: 1.75; }
.email { margin: 2.1rem 0 0; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 700; }
.email span { color: rgba(255, 255, 255, .72); font-size: .76em; }
.note, .owner { margin: .45rem 0 0; color: rgba(255, 255, 255, .68); font-size: .82rem; line-height: 1.6; }
.owner { margin-top: .2rem; }

.privacy-section { padding-bottom: 5rem; }
.privacy-intro { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 8vw, 7rem); padding-bottom: 2.25rem; border-bottom: 1px solid var(--line); }
.privacy-intro h2 { grid-column: 2; grid-row: 1; }
.revision { grid-column: 2; grid-row: 1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; margin: 0; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.privacy-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 8vw, 7rem); padding-top: 3rem; }
.policy-nav { align-self: start; position: sticky; top: 1.5rem; display: grid; gap: .35rem; }
.policy-nav a { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .55rem; padding: .6rem 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.policy-nav a > span:first-child { color: var(--accent); font-size: .7rem; font-weight: 800; }
.policy-nav small { display: block; margin-top: .15rem; color: var(--muted); font-size: .88em; }
.policy-body { max-width: 45rem; }
.policy-body > p:first-child, .policy-item p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.95; }
.policy-english { color: #7a7d83 !important; font-size: .92rem !important; line-height: 1.85 !important; }
.policy-item { scroll-margin-top: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.policy-item h3 { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.4; }
.policy-item h3 span + span { color: var(--muted); font-size: .52em; font-weight: 600; }
.policy-item p + p { margin-top: 1.25rem; }
.footer { display: flex; justify-content: flex-end; padding: 2rem 0 3rem; color: var(--muted); font-size: .8rem; }

@media (max-width: 52rem) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-intro, .privacy-layout { grid-template-columns: 12rem minmax(0, 1fr); column-gap: 2rem; gap: 2rem; }
}
@media (max-width: 40rem) {
  .shell { width: min(calc(100% - 1.5rem), 72rem); }
  .topbar { align-items: flex-start; flex-direction: column; padding: 1rem 0; }
  .nav { flex-wrap: wrap; gap: .55rem 1rem; }
  .hero { min-height: 0; padding: 2.25rem 1.35rem 1.5rem; border-radius: 1.25rem; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .hero-lead { font-size: .8rem; }
  .quick-links, .app-grid, .contact-section, .privacy-layout { grid-template-columns: 1fr; }
  .contact-section { gap: 2rem; padding-right: 1.35rem; padding-left: 1.35rem; border-radius: 1.25rem; }
  .contact-header h2 { max-width: none; }
  .privacy-intro { align-items: flex-start; grid-template-columns: 1fr; row-gap: .8rem; }
  .privacy-intro h2, .revision { grid-column: 1; grid-row: auto; justify-self: start; }
  .revision { align-items: flex-start; }
  .policy-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
}