/* 完全なCSSリセットとカスタムクラスの追加 */

/* ========================================
   Tailwind Base Reset
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: "Noto Serif JP", serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit;
  font-family: "Noto Serif JP", serif;
}

/* ========================================
   WordPress Admin Bar Reset
   ======================================== */
#wpadminbar {
  display: none !important;
}

html {
  margin-top: 0 !important;
}

.admin-bar body {
  margin-top: 0 !important;
}

/* ========================================
   HTML Elements Reset
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button {
  background-color: transparent;
  background-image: none;
  padding: 0;
  line-height: inherit;
  color: inherit;
  border: none;
  cursor: pointer;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/* ========================================
   WordPress Content Reset
   ======================================== */
.wp-block-post-content,
article,
main {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   カラーシステム - モノクロ/グレースケール
   ======================================== */
:root {
  --color-primary: #333333;
  --color-primary-foreground: #ffffff;
  --color-secondary: #f7f7f7;
  --color-secondary-foreground: #333333;
  --color-accent: #f7f7f7;
  --color-accent-foreground: #333333;
  --color-background: #ffffff;
  --color-foreground: #333333;
  --color-card: #ffffff;
  --color-card-foreground: #333333;
  --color-muted: #e8e8e8;
  --color-muted-foreground: #666666;
  --color-border: #e0e0e0;
}

/* ========================================
   Custom Gradient Classes
   ======================================== */
.bg-gradient-radial {
  background-image: radial-gradient(circle, var(--tw-gradient-stops));
}

/* ========================================
   Text Wrap Utilities
   ======================================== */
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* ========================================
   Animations
   ======================================== */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* ========================================
   Smooth Transitions
   ======================================== */
a,
button {
  transition: all 0.3s ease;
}

/* ========================================
   Section Positioning
   ======================================== */
section {
  position: relative;
}

/* ========================================
   Hero Text Line Sizes
   ======================================== */
/* ヒーローセクションの各行に個別のフォントサイズを設定 */

/* モバイル用のフォントサイズ */
.hero-line-1 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.6;
}

.hero-line-2 {
  font-size: 1.75rem; /* 28px */
  line-height: 1.5;
}

.hero-line-3 {
  font-size: 2rem; /* 32px */
  line-height: 1.4;
  font-weight: 700;
}

.hero-line-4 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.6;
}

.hero-line-5 {
  font-size: 2.25rem; /* 36px */
  line-height: 1.3;
  font-weight: 700;
}

.hero-line-6 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.6;
}

.hero-line-7 {
  font-size: 1.75rem; /* 28px */
  line-height: 1.5;
}

/* タブレット用のフォントサイズ (768px以上) */
@media (min-width: 768px) {
  .hero-line-1 {
    font-size: 2rem; /* 32px */
  }

  .hero-line-2 {
    font-size: 2.5rem; /* 40px */
  }

  .hero-line-3 {
    font-size: 3rem; /* 48px */
  }

  .hero-line-4 {
    font-size: 2rem; /* 32px */
  }

  .hero-line-5 {
    font-size: 3.5rem; /* 56px */
  }

  .hero-line-6 {
    font-size: 2rem; /* 32px */
  }

  .hero-line-7 {
    font-size: 2.5rem; /* 40px */
  }
}

/* デスクトップ用のフォントサイズ (1024px以上) */
@media (min-width: 1024px) {
  .hero-line-1 {
    font-size: 2.5rem; /* 40px */
  }

  .hero-line-2 {
    font-size: 3rem; /* 48px */
  }

  .hero-line-3 {
    font-size: 4rem; /* 64px */
  }

  .hero-line-4 {
    font-size: 2.5rem; /* 40px */
  }

  .hero-line-5 {
    font-size: 4.5rem; /* 72px */
  }

  .hero-line-6 {
    font-size: 2.5rem; /* 40px */
  }

  .hero-line-7 {
    font-size: 3rem; /* 48px */
  }
}