/* CSS変数・基本設定（clamp対応版） */
:root {
    /* ブランドカラー */
    --primary-green: #00984f;
    --secondary-orange: #FF823D;
    --text-color: #333;
    --text-light: #666;
    --background: #fff;
    --border-color: #e5e5e5;

    /* レスポンシブスペーシング */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1vw, 1rem);
    --space-md: clamp(0.75rem, 1.5vw, 1.5rem);
    --space-lg: clamp(1rem, 2vw, 2rem);
    --space-xl: clamp(1.5rem, 3vw, 3rem);

    /* レスポンシブフォントサイズ */
    --font-xs: clamp(0.75rem, 0.875vw, 0.875rem);
    --font-sm: clamp(0.875rem, 1vw, 1rem);
    --font-md: clamp(1rem, 1.125vw, 1.125rem);
    --font-lg: clamp(1.125rem, 1.25vw, 1.25rem);
    --font-xl: clamp(1.25rem, 1.5vw, 1.5rem);
    --font-2xl: clamp(1.5rem, 2vw, 2rem);
}

/* 基本設定 */
html {
    scroll-behavior: smooth;
    letter-spacing: 0.05rem;
    /* iOSのSafari用のスクロール最適化 */
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--font-md);
    color: var(--text-color);
    line-height: 1.5;
    background-color: var(--background);
    /* iOSのSafari用の追加設定 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* iOSのSafari用のスクロール最適化 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 固定要素のレンダリング最適化 */
.header,
.footer,
#page-top {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* スクロールコンテナの最適化 */
.mobile-menu-overlay {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* アクセシビリティ */
:focus-visible {
    outline: 3px solid var(--primary-green);
    outline-offset: 2px;
}

/* タイポグラフィ */
h1 {
    font-size: var(--font-2xl);
    font-weight: 700;
}

h2 {
    font-size: var(--font-xl);
    font-weight: 600;
}

h3 {
    font-size: var(--font-lg);
    font-weight: 600;
}

h4 {
    font-size: var(--font-md);
    font-weight: 500;
}

a {
    color: var(--primary-green);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.marker {
    color: var(--primary-green);
    font-weight: 600;
}

/*リキャプチャ 消す*/
.grecaptcha-badge {
    visibility: hidden;
}