/* =================================================
   デザインシステム ベースCSS（共通・システム）
   ================================================= */

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Typography scale variables */
  --text-2xl: 36px;
  --text-xl: 28px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-tiny: 10px;

  /* Colors */
  --background: rgba(255, 255, 255, 1);
  --foreground: rgba(36, 36, 36, 1);
  --card: rgba(242, 242, 242, 1);
  --card-foreground: rgba(110, 110, 110, 1);
  --primary: rgba(0, 160, 208, 1);
  --primary-foreground: rgba(255, 255, 255, 1);
  --secondary: rgba(255, 255, 255, 1);
  --secondary-foreground: rgba(0, 160, 208, 1);
  --muted: rgba(200, 200, 200, 1);
  --muted-foreground: rgba(255, 255, 255, 1);
  --accent: rgba(53, 187, 227, 1);
  --accent-foreground: rgba(255, 255, 255, 1);
  --destructive: rgba(244, 67, 54, 1);
  --destructive-foreground: rgba(255, 255, 255, 1);
  --border: rgba(200, 200, 200, 1);
  --radius: 8px;
  --elevation-sm:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  --elevation-md:
    0 4px 12px 0 rgb(0 0 0 / 0.15),
    0 2px 4px -1px rgb(0 0 0 / 0.1);

  /* Font weights */
  --font-weight-medium: 600;
  --font-weight-normal: 400;
}

body {
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Typography System */
h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

p {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

/* Header Components */
#header {
  width: 100%;
  background-color: var(--background);
  padding: 1rem 0;
}

.logo-container {
  display: flex;
  justify-content: center;
}

.asoview-logo {
  display: flex;
  align-items: center;
  height: 28px;
  aspect-ratio: 95/18;
  position: relative;
}

@media (min-width: 769px) {
  .asoview-logo {
    height: 32px;
  }
}

.logo-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 18.8%;
  height: 100%;
}

.logo-text {
  position: absolute;
  left: 22.12%;
  top: 17.95%;
  right: 0;
  bottom: 11.29%;
}

/* Footer Components */
#footer {
  width: 100%;
  background-color: #242424;
  padding: 2rem 0;
  text-align: center;
}

#footer p {
  color: white;
  font-size: var(--text-xs);
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}