/*
Theme Name: 頭痛治療普及協会テーマ
Description: 日本頭痛治療普及協会の公式Webサイト用のモダンなWordPressテーマです。レスポンシブデザイン、グラデーション背景、プロフェッショナルな医療スタイリングを特徴としています。
Version: 1.0
Author: Claude Code
Text Domain: headache-treatment-association
*/

/* Reset and Base Styles */
:where([class^="ri-"])::before { content: "\f3c2"; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    min-width: 320px;
    overflow-x: hidden;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    h2 {
        font-size: 1.875rem;
    }
    p {
        font-size: 1rem;
    }
}

/* Custom Font Classes */
.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Background Gradients */
.gradient-bg {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
}

.gradient-overlay {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(59, 130, 246, 0.7) 100%);
}

@media (max-width: 640px) {
    .gradient-overlay {
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(59, 130, 246, 0.85) 100%);
    }
}

/* Hero Text Styles */
.hero-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Slideshow Styles */
.slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide.active {
    opacity: 1;
}

/* Card Hover Effects */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Service Card Effects */
.service-card {
    overflow: hidden;
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    top: -75px;
    right: -75px;
}

.service-card::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    bottom: -50px;
    left: -50px;
}

/* Form Input Styles */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}