/*
 * 大泉学園介護サロン スタイルシート
 * NeoFlowデザインシステム適用
 * 
 * 目次:
 * 1. CSS変数・カスタムプロパティ
 * 2. ベーススタイル・リセット
 * 3. フォント設定
 * 4. アニメーション定義
 * 5. レイアウトコンポーネント
 * 6. UIコンポーネント
 * 7. ページ固有スタイル
 * 8. レスポンシブデザイン
 * 
 * リファクタリング適用:
 * - [SF] シンプルな構造に最適化
 * - [DRY] 重複スタイルの統合
 * - [PA] パフォーマンス向上のための最適化
 * - [ISA] 業界標準に準拠したCSS構造
 */

/* ========================================
   1. CSS変数・カスタムプロパティ
   ======================================== */

:root {
    /* カラーパレット - ライトブルーテーマ */
    --color-primary-50: #f0f9ff;
    --color-primary-100: #e0f2fe;
    --color-primary-200: #bae6fd;
    --color-primary-300: #7dd3fc;
    --color-primary-400: #38bdf8;
    --color-primary-500: #0ea5e9;
    --color-primary-600: #0284c7;
    --color-primary-700: #0369a1;
    --color-primary-800: #075985;
    --color-primary-900: #0c4a6e;

    /* グラデーション */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-200) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* スペーシング */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ボーダーラディウス */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Neutral - グレースケール */
    --color-neutral-50: #FAFAFA;
    --color-neutral-100: #F5F5F5;
    --color-neutral-200: #E5E5E5;
    --color-neutral-300: #D4D4D4;
    --color-neutral-400: #A3A3A3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0A0A0A;

    /* シャドウ */
    --shadow-sm: 0 2px 10px rgba(125, 211, 252, 0.1);
    --shadow-md: 0 4px 15px rgba(125, 211, 252, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);

    /* アニメーションタイミング */
    --timing-fast: 0.2s;
    --timing-normal: 0.3s;
    --timing-slow: 0.6s;
    --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   2. ベーススタイル・リセット
   ======================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'M PLUS 1p', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom right, #f0f9ff, #e0f7fa, #e0f2fe);
    min-height: 100vh;
}

/* ========================================
   3. フォント設定
   ======================================== */

.font-geist {
    font-family: 'M PLUS 1p', sans-serif !important;
}

.font-space-grotesk {
    font-family: 'M PLUS 1p', sans-serif !important;
}

/* ========================================
   3.1 モバイルファースト タイポグラフィ
   ======================================== */
/* ベースとなるフォントサイズをモバイルファーストで設定 */
html {
    font-size: 118%; /* 18.9px 基準 - モバイルで高齢者向けに拡大 */
}

/* タブレット・PCでは標準的なサイズに調整 */
@media (min-width: 768px) {
    html {
        font-size: 100%; /* 標準16px - PCでは通常サイズ */
    }
}

/* 行間をゆったりめに調整して読みやすさを向上 */
body {
    line-height: 1.75;
}

/* 汎用テキストサイズを clamp で動的に調整 - モバイルで高齢者向けに拡大 */
p,
li,
label,
.form-input,
.form-button,
.form-textarea {
    font-size: clamp(1rem, 2vw + 0.6rem, 1.2rem);
    line-height: 1.8;
}

/* 見出しのスケールをレスポンシブに統一 - モバイルで高齢者向けに拡大、PCで適正サイズ */
h1,
.hero-main-title {
    font-size: clamp(1.8rem, 6vw + 1rem, 3.2rem) !important;
    line-height: 1.3;
}

h2,
.section-title {
    font-size: clamp(1.3rem, 4vw + 0.5rem, 2.2rem) !important;
    line-height: 1.4;
}

h3,
.subsection-title {
    font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.5rem) !important;
    line-height: 1.5;
}

/* 小さなテキストクラスの最小サイズを調整 - PCでli要素と同等サイズを保証 */
.text-sm {
    font-size: clamp(1.05rem, 1.8vw + 0.75rem, 1.2rem) !important;
    line-height: 1.6;
}

.text-xs {
    font-size: clamp(1.0rem, 1.5vw + 0.7rem, 1.2rem) !important;
    line-height: 1.5;
}

/* ========================================
   4. アニメーション定義
   ======================================== */

/* アニメーション基本クラス */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
}

.animate-fade-up:not(.animation-pending) {
    animation: fadeUpSmooth 0.8s var(--easing-smooth) forwards;
}

.animate-slide-right {
    opacity: 0;
    transform: translateY(35px);
}

.animate-slide-right:not(.animation-pending) {
    animation: fadeUpSmooth 0.9s var(--easing-smooth) forwards;
}

.animate-blur-in {
    opacity: 0;
    transform: translateY(25px);
}

.animate-blur-in:not(.animation-pending) {
    animation: fadeUpSmooth 1s var(--easing-smooth) forwards;
}

.animate-scale-up {
    opacity: 0;
    transform: translateY(25px);
}

.animate-scale-up:not(.animation-pending) {
    animation: fadeUpSmooth 0.7s var(--easing-smooth) forwards;
}

/* アニメーション待機状態 */
.animation-pending {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    animation: none !important;
}

/* スクロールアニメーション */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--timing-slow) var(--easing-smooth);
}

.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* アニメーション完了状態 - チラつき防止 */
.animate-fade-up.animate-visible,
.animate-slide-right.animate-visible,
.animate-blur-in.animate-visible,
.animate-scale-up.animate-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation-fill-mode: forwards;
}

/* 遅延クラス */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }
.delay-1100 { animation-delay: 1.1s; }
.delay-1200 { animation-delay: 1.2s; }
.delay-1300 { animation-delay: 1.3s; }
.delay-1400 { animation-delay: 1.4s; }
.delay-1500 { animation-delay: 1.5s; }

/* スクロールアニメーション遅延 */
.scroll-animate.delay-100 { transition-delay: 0.1s; }
.scroll-animate.delay-200 { transition-delay: 0.2s; }
.scroll-animate.delay-300 { transition-delay: 0.3s; }
.scroll-animate.delay-400 { transition-delay: 0.4s; }
.scroll-animate.delay-500 { transition-delay: 0.5s; }
.scroll-animate.delay-600 { transition-delay: 0.6s; }
.scroll-animate.delay-700 { transition-delay: 0.7s; }
.scroll-animate.delay-800 { transition-delay: 0.8s; }

/* キーフレーム定義 */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes blurIn {
    to {
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes scaleUp {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========================================
   5. レイアウトコンポーネント
   ======================================== */

/* グラスエフェクト */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 改善されたパネルデザイン */
.enhanced-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-md) 0;
    transition: all var(--timing-normal) ease;
}

.enhanced-panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* セクションタイトル */
.section-title {
    background: var(--gradient-primary);
    color: var(--color-primary-700);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 0;
    text-align: center;
    margin: var(--spacing-xl) 0;
    width: 100%;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(179, 229, 252, 0.4);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(179, 229, 252, 0.3);
}

.section-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.section-title:hover::before {
    left: 100%;
}

/* サブタイトル */
.subsection-title {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
    color: var(--color-primary-700);
    padding: 0.75rem var(--spacing-lg);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary-300);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

/* ========================================
   6. UIコンポーネント
   ======================================== */

/* ボタンスタイル */
.btn-gradient {
    background: var(--gradient-secondary);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--timing-fast) ease;
    box-shadow: var(--shadow-lg);
}

.btn-gradient:hover {
    background: linear-gradient(to right, var(--color-primary-700), var(--color-primary-800));
    transform: scale(1.02);
}

/* アイコンラッパー */
.icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.icon-wrapper.violet {
    background: linear-gradient(to bottom right, var(--color-primary-400), var(--color-primary-600));
}

.icon-wrapper.emerald {
    background: linear-gradient(to bottom right, #10b981, #059669);
}

.icon-wrapper.orange {
    background: linear-gradient(to bottom right, #f97316, #ea580c);
}

.icon-wrapper.blue {
    background: linear-gradient(to bottom right, var(--color-primary-500), var(--color-primary-700));
}

/* カード類 */
.info-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    border: 1px solid rgba(144, 202, 249, 0.2);
    box-shadow: var(--shadow-sm);
    transition: all var(--timing-normal) ease;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(144, 202, 249, 0.3);
}

/* リストスタイル */
.enhanced-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enhanced-list li {
    background: rgba(144, 202, 249, 0.08);
    padding: 0.75rem var(--spacing-md);
    margin: var(--spacing-sm) 0;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary-300);
    transition: all var(--timing-normal) ease;
}

.enhanced-list li:hover {
    background: rgba(144, 202, 249, 0.15);
    transform: translateX(5px);
}

/* ホバーエフェクト */
.hover-lift {
    transition: transform var(--timing-fast) ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* ========================================
   7. ページ固有スタイル
   ======================================== */

/* ヒーローセクション */
.hero-section {
    /* Tailwind未適用の初期描画でも安定させるため、クリティカルなレイアウトをCSSで定義 [SF][PA][ISA] */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 45vh;          /* デスクトップ初期高さ */
    min-height: 520px;     /* 大きめに確保してレイアウトシフトを防止 */
    background: var(--gradient-hero);
}

/* アニメーションボタンスタイル */
.btn_box {
    position: absolute;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 20;
    margin: 0;
}

/* タブレットでの位置調整 */
@media (min-width: 640px) and (max-width: 1023px) {
    .btn_box {
        bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
    }

    #btn_animation .btn {
        width: 270px;
        height: 95px;
        font-size: 17px;
        padding: 9px 14px;
    }
}

/* スマートフォンでの中央配置 */
@media (max-width: 639px) {
    .btn_box {
        bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
    }

    #btn_animation .btn {
        width: 260px !important;
        height: 90px !important;
        font-size: 16px !important;
        padding: 8px 12px !important;
    }
}

#btn_animation .btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 280px !important;
    height: 100px !important;
    font-size: 18px !important;
    text-decoration: none !important;
    background-color: var(--color-neutral-500) !important;
    color: #fafafa !important;
    text-align: center !important;
    overflow: hidden !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    border: 1px solid var(--color-neutral-600) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* CTAボタン内の各行（Safari改行互換） */
.btn-line {
    display: block;
}
@supports (-webkit-touch-callout: none) {
    /* iOS Safari向け微調整 */
    #btn_animation .btn {
        line-height: 1.2;
        -webkit-font-smoothing: antialiased;
    }
}

.accent-text {
    color: #FCE4EC;
    font-weight: 700;
}

#btn_animation .btn:hover {
    text-decoration: none !important;
    color: #ffffff !important;
    background-color: var(--color-neutral-400) !important;
    border-color: var(--color-neutral-500) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

#btn_animation .btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fbfbfb;
    animation: btn_animation 2.5s ease-in-out infinite;
}

@-webkit-keyframes btn_animation {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 背景レイヤー（画像＋オーバーレイ） */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 背景画像の初期スタイル（常にカバー） */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none !important; /* 初期拡大を明示的に抑止 */
    will-change: auto;
}

/* グラデーションオーバーレイ */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}

/* コンテンツレイヤー */
.hero-content {
    position: relative;
    z-index: 10;
}

.hero-content-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--hero-text-color);
    /* animation: heroFadeIn 1s ease-out forwards; */
}

.hero-text-line {
    transition: all 0.8s var(--easing-smooth);
    -webkit-transition: all 0.8s var(--easing-smooth);
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
}

.hero-text-line.visible {
    opacity: 1 !important;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.hero-main-title {
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}

/* ヒーローメッセージのフェードイン・フェードアウト */
.hero-message-container {
    position: relative;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    transition: all 1s var(--easing-smooth);
    opacity: 0;
    transform: translateY(20px);
}

.hero-message.active {
    opacity: 1;
    transform: translateY(0);
}

/* 改行制御と読みやすさの最適化 - 高齢者向け */
.hero-message br.hidden {
    display: none;
}

.hero-message br.hidden.md\:block {
    display: none;
}

@media (min-width: 768px) {
    .hero-message br.hidden.md\:block {
        display: block;
    }
}

/* 全端末での文字はみ出し防止と適切な改行制御 */
/* 基本的な文字列制御 - 全画面サイズで適用 */
body, p, span, div, h1, h2, h3, h4, h5, h6,
.hero-message, .text-slate-600, .text-slate-700,
.hero-main-title, .hero-subtitle,
.section-title, .subsection-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

/* [DRY] 日本語文字列の適切な改行制御 - 統合最適化 */
body, p, span, div, li, label,
.form-input, .form-button, .form-textarea {
    word-break: keep-all; /* 単語の途中で改行しない */
    line-break: strict;   /* 厳格な改行ルール */
    overflow-wrap: break-word; /* 必要時のみ強制改行 */
}

/* [PA] 長い英数字文字列の制御 - パフォーマンス最適化 */
code, pre, .monospace,
input[type="email"], input[type="url"], input[type="tel"] {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* [SF] 特定要素の最大幅制御 - 統合最適化 */
.hero-content-wrapper,
.hero-message-container,
.info-card,
.enhanced-panel,
.contact-form,
.contact-info-group,
.fee-info-container,
.no-x-scroll {
    max-width: 100%;
}

/* [PA] 横スクロール防止 - パフォーマンス向上 */
.no-x-scroll {
    overflow-x: hidden;
}

/* スマートフォンでの追加制御 */
@media (max-width: 640px) {
    /* 見出しの文字はみ出し防止 */
    .hero-main-title, .section-title, .subsection-title {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }
    
    /* 長い文章の適切な改行とスペーシング */
    p, li, .text-slate-600, .text-slate-700 {
        max-width: 100%;
        word-wrap: break-word;
        line-height: 1.8;
        margin-bottom: 1rem;
    }
    
    /* 表組みやカードの横スクロール防止 */
    .info-card, .enhanced-panel {
        max-width: 100%;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    /* モバイル専用テキスト調整 */
    .text-mobile-break {
        word-break: keep-all;
        line-break: anywhere;
        overflow-wrap: break-word;
    }

    /* Safariモバイルでのテキスト折り返し最適化 */
    p, .text-slate-600, .text-slate-700,
    .info-card p, .enhanced-panel p {
        word-break: break-word;
        line-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* フレックスアイテムの縮小防止 */
    .flex-shrink-0 {
        flex-shrink: 0;
    }
    
    /* 長いURL・メールアドレス対応 */
    input[type="email"], input[type="url"] {
        word-break: break-all;
        font-size: 16px; /* iOS zoom prevention */
    }
    
    /* アドレス情報の行間を狭く調整 */
    .space-y-1 > * + * {
        margin-top: 0rem !important;
    }
    
    /* アドレス部分の行間をさらに狭く */
    .space-y-1 p {
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }
}

 .hero-cta {
    transition: all 0.8s var(--easing-smooth);
    -webkit-transition: all 0.8s var(--easing-smooth);
    opacity: 1; /* JSが動かなくても常時表示 [REH][SF] */
    transform: none;
    -webkit-transform: none;
}

.hero-cta.visible {
    opacity: 1 !important; /* アニメーション用クラスだが可視性に依存しない */
    transform: none;
    -webkit-transform: none;
}

/* 参加費情報ボックス */
.info-box-pink {
    background: linear-gradient(135deg, #fefcfd 0%, #fdf9fa 100%);
    border: 1px solid #fce7f3;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.05);
    text-align: center;
}

.fee-info-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.fee-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.fee-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.fee-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1e293b;
}

.fee-free {
    color: #dc2626;
    text-decoration: underline;
    text-decoration-color: #dc2626;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.target-value {
    color: #0f172a;
    font-weight: 600;
}

/* 連絡先パネル */
.contact-panel {
    background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-200) 100%);
    color: var(--color-primary-800);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 8px 32px rgba(187, 222, 251, 0.3);
}

/* フォーム関連 */
.contact-form {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    transition: all var(--timing-normal) ease;
}

.contact-form:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

/* フォーム要素の幅を統一 */
.form-group,
.inquiry-type-group,
.schedule-checkboxes {
    width: 100%;
}

/* フィールドセットのスタイル統一 */
.form-group fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-group legend {
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    color: var(--color-primary-700);
    font-size: 1.1rem;
    position: relative;
}

/* 必須マークのスタイル統一 */
.form-group legend .text-red-500 {
    color: #dc2626;
    font-weight: 700;
    margin-left: 0.25rem;
}

/* フォーム要素間の一貫した間隔 */
.form-group + .form-group {
    margin-top: var(--spacing-xl);
}

/* 特別なグループ（連絡先情報など）のスタイル */
.contact-info-group,
.form-group.name-group,
.form-group.inquiry-type-group-wrapper,
.form-group.message-group,
.form-group.salon-schedule-group {
    border: 1px solid rgba(144, 202, 249, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    background: rgba(240, 249, 255, 0.3);
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.contact-info-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary-700);
    margin-bottom: var(--spacing-md);
    display: block;
    line-height: 1.5;
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--color-primary-700);
    font-size: 1.1rem;
}

.form-input {
    width: 100%;
    padding: 0.9rem var(--spacing-md);
    border: 1px solid rgba(144, 202, 249, 0.3);
    border-radius: var(--radius-md);
    font-size: 1.2rem;
    transition: all var(--timing-normal) ease;
    background: white;
    color: #1e293b;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.1);
    transform: translateY(-1px);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    font-size: 1.2rem;
}

.form-button {
    background: var(--gradient-secondary);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--timing-normal) ease;
    width: 100%;
    box-shadow: 0 4px 15px rgba(66, 165, 245, 0.3);
}

.form-button:hover {
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(66, 165, 245, 0.4);
}

.form-button:active {
    transform: translateY(0);
}

/* エラーメッセージ */
.error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: var(--spacing-sm);
    display: none;
    font-weight: 500;
}

.error-message.show {
    display: block;
    animation: fadeIn var(--timing-normal) ease-out;
}

.form-input.error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* ========================================
   フォーム要素の統一されたスタイル
   ======================================== */

/* フォーム要素の統一されたスタイル */
.inquiry-type-group,
.schedule-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.inquiry-type-option,
.schedule-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 2px solid rgba(144, 202, 249, 0.2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all var(--timing-normal) ease;
    position: relative;
    overflow: hidden;
    width: 100%; /* 幅を100%に設定 */
}

.inquiry-type-option:hover,
.schedule-option:hover {
    border-color: var(--color-primary-300);
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.inquiry-type-option:has(input:checked),
.schedule-option:has(input:checked) {
    border-color: var(--color-primary-500);
    background: rgba(14, 165, 233, 0.05);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    transform: translateY(-1px);
}

/* 選択状態のアニメーション */
.inquiry-type-option:has(input:checked)::before,
.schedule-option:has(input:checked)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0.02) 100%);
    opacity: 0;
    animation: fadeIn var(--timing-normal) ease forwards;
}

/* ラジオボタンとチェックボックスのカスタムスタイル */
.inquiry-type-radio,
.schedule-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-primary-300);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all var(--timing-normal) ease;
    flex-shrink: 0;
}

.schedule-checkbox {
    border-radius: 4px;
}

.inquiry-type-radio:checked,
.schedule-checkbox:checked {
    border-color: var(--color-primary-500);
    background: var(--color-primary-500);
    transform: scale(1.1);
}

/* チェックマークの表示（アニメーション付き） */
.inquiry-type-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: scaleIn var(--timing-normal) ease forwards;
}

.schedule-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    width: 4px;
    height: 8px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    animation: scaleIn var(--timing-normal) ease forwards;
}

/* アニメーション定義 */
@keyframes scaleIn {
    from {
        transform: translate(-50%, -50%) scale(0);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes scaleInCheckbox {
    from {
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }
}

/* ラベルテキストのスタイル */
.inquiry-type-label,
.schedule-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary-700);
    cursor: pointer;
    user-select: none;
    flex: 1;
    transition: color var(--timing-normal) ease;
}

.inquiry-type-option:has(input:checked) .inquiry-type-label,
.schedule-option:has(input:checked) .schedule-label {
    color: var(--color-primary-800);
    font-weight: 600;
}

/* フォーカス状態のスタイル */
.inquiry-type-radio:focus,
.schedule-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* アクセシビリティ向上のためのフォーカス表示 */
.inquiry-type-option:focus-within,
.schedule-option:focus-within {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
    transform: translateY(-1px);
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
    .inquiry-type-option,
    .schedule-option {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
        min-height: 56px; /* タッチターゲットの最小サイズ */
    }
    
    .inquiry-type-label,
    .schedule-label {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    .inquiry-type-radio,
    .schedule-checkbox {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    
    /* モバイルでの選択状態の視認性向上 */
    .inquiry-type-option:has(input:checked),
    .schedule-option:has(input:checked) {
        background: rgba(14, 165, 233, 0.08);
        border-width: 3px;
    }
    
    /* フォーム要素間の間隔調整 */
    .inquiry-type-group,
    .schedule-checkboxes {
        gap: var(--spacing-sm);
    }
    
    .form-group + .form-group {
        margin-top: var(--spacing-lg);
    }
}

/* 超小型デバイス対応 */
@media (max-width: 480px) {
    .inquiry-type-option,
    .schedule-option {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .inquiry-type-label,
    .schedule-label {
        font-size: 0.95rem;
    }
    
    .form-group legend {
        font-size: 1rem;
        margin-bottom: var(--spacing-sm);
    }
}

.contact-info-group {
    border: 1px solid rgba(144, 202, 249, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    background: rgba(240, 249, 255, 0.3);
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.contact-info-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary-700);
    margin-bottom: var(--spacing-md);
    display: block;
    line-height: 1.5;
}

/* Googleマップ */
.google-map-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.google-map-container iframe {
    width: 100%;
    height: 200px;
    border: 0;
}

/* ユーティリティクラス */
.slide-in-left {
    animation: slideInFromLeft 0.8s ease-out;
}

.slide-in-right {
    animation: slideInFromRight 0.8s ease-out;
}

/* ========================================
   8. レスポンシブデザイン
   ======================================== */

/* フォントサイズの調整 - 全端末で読みやすく */
@media (max-width: 1200px) {
    .section-title {
        font-size: 1.75rem;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .subsection-title {
        font-size: 1.125rem;
    }
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .enhanced-panel {
        padding: var(--spacing-lg);
        margin: var(--spacing-sm) 0;
    }

    /* タブレットでのヒーロー高さ（安定表示） */
    .hero-section {
        height: 50vh;
        min-height: 460px;
    }
    
    .hero-main-title {
        font-size: 2.75rem;
        line-height: 1.15;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
}

/* 小型タブレット・大型スマートフォン対応 */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }
    
    .hero-main-title {
        font-size: 2.25rem;
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
        line-height: 1.4;
    }
    
    .hero-section {
        height: 60vh;
        min-height: 420px;
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .section-title {
        font-size: 1.5rem;
        padding: var(--spacing-md) var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }
    
    .subsection-title {
        font-size: 1rem;
        padding: 0.5rem var(--spacing-md);
    }
    
    .enhanced-panel {
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
    }
    
    .contact-form {
        padding: var(--spacing-md);
    }
    
    .form-input {
        padding: 0.6rem var(--spacing-sm);
        font-size: 16px; /* iOS拡大防止 */
    }
    
    .animate-slide-right {
        animation: fadeUp 0.6s ease-out forwards;
        transform: translateY(20px);
    }
}

/* スマートフォン対応 */
@media (max-width: 640px) {
    .fee-info-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* 講座の流れの番号サークルサイズ調整 */
    .info-card .flex.items-start.gap-3 > div:first-child {
        min-width: 28px;
        min-height: 28px;
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }
    
    .hero-section {
        height: 65vh;
        min-height: 460px;
    }
    
    .hero-main-title {
        font-size: 2.4rem;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        line-height: 1.6;
    }
    
    .section-title {
        font-size: 1.5rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .subsection-title {
        font-size: 1.1rem;
    }
    
    .enhanced-list li {
        padding: 0.6rem var(--spacing-sm);
        font-size: 1.1rem;
    }
    
    .info-card {
        padding: var(--spacing-sm);
    }
}

/* 超小型スマートフォン対応 */
@media (max-width: 480px) {
    :root {
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.25rem;
    }
    
    .hero-main-title {
        font-size: 2.1rem;
        line-height: 1.4;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.7;
    }
    
    .hero-section {
        height: 72vh;
        min-height: 400px;
        padding: var(--spacing-md);
    }
    
    .section-title {
        font-size: 1.35rem;
        padding: var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
    
    .enhanced-panel {
        padding: var(--spacing-sm);
        margin: var(--spacing-sm) 0;
    }
    
    .contact-form {
        padding: var(--spacing-sm);
    }
    
    .form-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 1.1rem;
    }
}

/* 横向き表示対応 */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        height: 80vh;
        min-height: 350px;
    }
    
    .hero-main-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
    }
}

/* 高DPI表示対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-section img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* アニメーション削減設定 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero-text-line,
    .hero-cta,
    .animate-fade-up,
    .animate-slide-right,
    .animate-blur-in,
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   ユーティリティクラス・互換性対応
   ======================================== */

/* Tailwind CSS互換性 */
.bg-violet-50 { background-color: rgb(245 243 255); }
.bg-purple-50 { background-color: rgb(250 245 255); }
.bg-indigo-100 { background-color: rgb(224 231 255); }
.text-slate-900 { color: rgb(15 23 42); }
.text-slate-600 { color: rgb(71 85 105); }
.text-slate-500 { color: rgb(100 116 139); }
.text-violet-700 { color: rgb(109 40 217); }
.border-violet-200 { border-color: rgb(196 181 253); }

.rounded-3xl { border-radius: var(--radius-xl); }
.rounded-xl { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-sm); }
.backdrop-blur-xl { backdrop-filter: blur(24px); }

.shadow-custom {
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.06),
                0px 1px 1px -0.5px rgba(0,0,0,0.06),
                0px 3px 3px -1.5px rgba(0,0,0,0.06),
                0px 6px 6px -3px rgba(0,0,0,0.06),
                0px 12px 12px -6px rgba(0,0,0,0.06),
                0px 24px 24px -12px rgba(0,0,0,0.06);
}

/* ========================================
   エラー表示・フォールバック
   ======================================== */

/* 画像読み込みエラー時のフォールバック */
.image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.1);
    color: rgba(71, 85, 105, 0.8);
    font-size: 0.875rem;
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-align: center;
    min-height: 200px;
}

/* フォント読み込み失敗時のフォールバック */
.font-geist {
    font-family: 'M PLUS 1p', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif !important;
}

.font-space-grotesk {
    font-family: 'M PLUS 1p', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif !important;
}

/* 外部リソース読み込みエラー通知 */
.resource-error-notification {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    z-index: 1000;
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--timing-normal) ease;
}

.resource-error-notification.show {
    opacity: 1;
    transform: translateX(0);
}