/*
Theme Name: New Kumehome
Theme URI: https://kumehome.okinawa/
Author: PON-TEC STUDIO
Description: 久米ホーム専用テーマ。左サイドバーレイアウトで、不動産プラグインFudouと連携。シンプルで使いやすいデザイン。使用言語：PHP, CSS, JavaScript
Version: 0.1.0
Text Domain: newkumehome
*/

/*
 * CSS Variables
 * レスポンシブ対応のためのCSS変数定義
 */

:root {
  /* === Font Family Variables === */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  /* === Font Size Variables === */
  /* 最小値を12px以上に設定（アクセシビリティ対応） */
  --font-size-xs: clamp(12px, 0.75rem, 14px);
  --font-size-sm: clamp(13px, 0.8125rem, 15px);
  --font-size-base: clamp(14px, 0.875rem, 16px);
  --font-size-md: clamp(15px, 0.9375rem, 17px);
  --font-size-lg: clamp(16px, 1rem, 18px);
  --font-size-xl: clamp(18px, 1.125rem, 22px);
  --font-size-2xl: clamp(20px, 1.25rem, 24px);
  --font-size-3xl: clamp(24px, 1.5rem, 28px);
  --font-size-4xl: clamp(28px, 1.75rem, 36px);

  /* Fluid sizes (viewport-based) */
  --font-size-hero: clamp(22px, 3.6vw, 48px);
  --font-size-section-title: clamp(20px, 2.2vw, 28px);
  --font-size-sidebar-nav: clamp(14px, 1.05vw, 16px);
  --font-size-sidebar-copy: clamp(12px, 0.75vw, 14px);

  /* Additional font sizes */
  --font-size-card-title: clamp(15px, 1.8vw, 22px);
  --font-size-table: clamp(14px, 1.65vw, 16px);
  --font-size-body-text: clamp(14px, 1.6vw, 16px);
  --font-size-note: clamp(14px, 1.5vw, 16px);
  --font-size-badge: clamp(16px, 2vw, 24px);
  --font-size-cta: clamp(13px, 1.6vw, 15px);
  --font-size-hero-mobile: clamp(18px, 5.2vw, 26px);
  --font-size-widget-title: 1rem;
  --font-size-post-meta: 0.85rem;

  /* === Spacing Variables === */
  --spacing-xs: clamp(4px, 0.5vw, 8px);
  --spacing-sm: clamp(8px, 1vw, 12px);
  --spacing-md: clamp(12px, 1.5vw, 16px);
  --spacing-lg: clamp(16px, 2vw, 24px);
  --spacing-xl: clamp(24px, 3vw, 36px);
  --spacing-2xl: clamp(36px, 4vw, 48px);
}

/*
 * Base Styles
 * 基本スタイル（html, body, リンク）
 */

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  background-color: #ffffff;
  color: #3e5463;
  line-height: 1.75;
  touch-action: manipulation;
}

a {
  color: #3a6ea5;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}