/**
 * 個別指導大河ゼミナール - WordPress最適化版
 * Tailwind CSS + カスタムスタイル
 */

/* Google Fonts の読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* カスタムプロパティ */
:root {
  --primary-cyan: #0891b2;
  --primary-cyan-hover: #0e7490;
  --radius: 0.5rem;
  --font-family-primary: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --vh: 1vh;
}

/* 基本設定 */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-primary) !important;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 日本語テキストの最適化 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-feature-settings: "palt" 1;
}

p, span, div, a, button, input, textarea, select {
  font-family: inherit;
}

/* WordPress互換スタイル */
.wp-block-group {
  margin-bottom: 2rem;
}

@layer components {
  /* カスタムコンポーネント */
  .btn-primary {
    @apply bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded-full transition-all duration-300 font-semibold;
    font-family: var(--font-family-primary);
  }

  .btn-secondary {
    @apply border-2 border-white text-white hover:bg-white hover:text-cyan-600 px-6 py-3 rounded-full transition-all duration-300 font-semibold;
    font-family: var(--font-family-primary);
  }

  /* セクション共通スタイル */
  .section-padding {
    @apply py-16 lg:py-20;
  }

  .container-custom {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* ヘッダー・ナビゲーション */
  .nav-link {
    @apply text-gray-700 hover:text-cyan-600 transition-colors duration-200 font-medium;
    font-family: var(--font-family-primary);
  }

  .nav-link-active {
    @apply text-cyan-600 font-semibold;
    font-family: var(--font-family-primary);
  }

  /* カード要素 */
  .card-hover {
    @apply transform hover:scale-105 transition-all duration-300 hover:shadow-xl;
  }

  /* フォーム要素 */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors;
    font-family: var(--font-family-primary);
  }

  .form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors resize-none;
    font-family: var(--font-family-primary);
  }

  /* ビューポート高さ調整（ヘッダー考慮） */
  .hero-height {
    height: calc(100vh - 5rem);
    min-height: 500px;
  }

  /* 日本語フォント特有の調整 */
  .jp-text-spacing {
    letter-spacing: 0.02em;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 和文・欧文混在テキストの調整 */
  .mixed-text {
    font-feature-settings: "palt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
  }
}

@layer utilities {
  /* ユーティリティ */
  .text-gradient {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .bg-gradient-primary {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
  }

  /* アクセシビリティ */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* フォントローディング対応 */
  .font-loading {
    font-display: swap;
    visibility: hidden;
  }

  .font-loaded {
    visibility: visible;
  }
}

/* アニメーション */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .hero-title {
    @apply text-3xl;
  }

  .section-title {
    @apply text-2xl;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .mobile-text-adjust {
    font-size: 16px;
  }
}

/* WordPress エディタ対応 */
.block-editor-block-list__layout {
  max-width: none;
}

/* プリント対応 */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", serif;
    color: black !important;
    background: white !important;
  }
}

/* 高解像度ディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 動的ビューポート高さ対応（モバイル） */
@supports (height: 100dvh) {
  .hero-height {
    height: calc(100dvh - 5rem);
  }
}

/* iOS Safari対応 */
@supports (-webkit-touch-callout: none) {
  .hero-height {
    height: calc(100vh - 5rem);
    height: calc(var(--vh, 1vh) * 100 - 5rem);
  }
}

/* Circle 1 */
@keyframes circle1 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  15%  { transform: translate(22px,-18px) scale(1.2) rotate(45deg); }
  30%  { transform: translate(-15px,25px) scale(0.8) rotate(-30deg); }
  45%  { transform: translate(28px,-12px) scale(1.15) rotate(90deg); }
  60%  { transform: translate(-8px,30px) scale(0.9) rotate(-60deg); }
  75%  { transform: translate(18px,-22px) scale(1.1) rotate(120deg); }
  90%  { transform: translate(-12px,8px) scale(0.95) rotate(-15deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
.animate-circle-1 { animation: circle1 12s ease-in-out infinite; }

/* Circle 2 */
@keyframes circle2 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  12%  { transform: translate(-25px,20px) scale(0.7) rotate(-60deg); }
  28%  { transform: translate(20px,-28px) scale(1.3) rotate(75deg); }
  42%  { transform: translate(-12px,15px) scale(0.85) rotate(-45deg); }
  58%  { transform: translate(35px,-35px) scale(1.25) rotate(105deg); }
  72%  { transform: translate(-18px,25px) scale(0.9) rotate(-30deg); }
  88%  { transform: translate(8px,-10px) scale(1.05) rotate(150deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
.animate-circle-2 { animation: circle2 15s ease-in-out infinite 2.5s; }

/* Circle 3 */
@keyframes circle3 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  18%  { transform: translate(-25px,18px) scale(0.7) rotate(-90deg); }
  32%  { transform: translate(15px,-22px) scale(1.2) rotate(45deg); }
  48%  { transform: translate(-35px,8px) scale(0.85) rotate(-135deg); }
  65%  { transform: translate(20px,-15px) scale(1.15) rotate(60deg); }
  82%  { transform: translate(-10px,25px) scale(0.9) rotate(-45deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
.animate-circle-3 { animation: circle3 14s ease-in-out infinite 1.5s; }

/* Circle 4 */
@keyframes circle4 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  20%  { transform: translate(-15px,25px) scale(1.3) rotate(270deg); }
  35%  { transform: translate(28px,-18px) scale(0.8) rotate(-90deg); }
  50%  { transform: translate(-20px,30px) scale(1.25) rotate(180deg); }
  68%  { transform: translate(35px,-25px) scale(0.75) rotate(-45deg); }
  85%  { transform: translate(-8px,12px) scale(1.1) rotate(315deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
.animate-circle-4 { animation: circle4 11s ease-in-out infinite 0.5s; }

/* Circle 5 */
@keyframes circle5 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  16%  { transform: translate(30px,-15px) scale(1.5) rotate(120deg); }
  33%  { transform: translate(-22px,20px) scale(0.6) rotate(-75deg); }
  50%  { transform: translate(25px,-28px) scale(1.4) rotate(240deg); }
  67%  { transform: translate(-15px,12px) scale(0.9) rotate(-30deg); }
  84%  { transform: translate(18px,-8px) scale(1.2) rotate(150deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
.animate-circle-5 { animation: circle5 13s ease-in-out infinite 3s; }

/* Scroll indicator */
@keyframes scroll {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(10px); }
}
.animate-scroll { animation: scroll 2s ease-in-out infinite; }

.inquiry-details .wpcf7-list-item {
  display: block;
  margin-bottom: 0.5rem;
}

.form-contact input[type="text"]:focus,.form-contact input[type="tel"]:focus, .form-contact input[type="email"]:focus, .form-contact textarea:focus, .form-contact select:focus, .form-contact textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #06b6d4;
}

.scroll-to-top { 
	bottom: 90px !important;
}