@charset "utf-8";
/* /static/css/custom.css */

/* 既存のbodyスタイルを更新 */
body {
    font-family: 'Noto Sans JP', sans-serif; /* 日本語に適したフォント */
    position: relative;
    /* overflow: hidden; /* この行を削除またはコメントアウト */
}

input, textarea, select {
    @apply w-full border-2 border-gray-400 rounded-lg p-3 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all;
}
.radio-custom {
    @apply w-4 h-4 inline-block border-2 border-gray-300 rounded-full relative top-1 transition-all;
}
input[type="radio"]:checked + .radio-custom {
    @apply border-blue-500 bg-blue-500 bg-opacity-10;
}
input[type="radio"]:checked + .radio-custom::after {
    content: '';
    @apply block w-2 h-2 bg-blue-600 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
    from {
    opacity: 0;
    transform: translateY(20px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

/* カスタムボタンのスタイル */
.btn-custom {
    background-color: #16a34a; /* Tailwindのgreen-600 */
    color: #ffffff;
    border-radius: 0.375rem; /* Tailwindのrounded-mdに対応 */
    padding: 0.75rem 1rem; /* Tailwindのpy-3 px-4に対応 */
    transition: background-color 0.3s ease-in-out;
}

.btn-custom:hover {
    background-color: #15803d; /* Tailwindのgreen-700 */
}

/* 入力フォーム全般のスタイル調整 */
input, select, textarea {
    border-width: 2px;
    border-color: #d1d5db; /* Tailwindのborder-gray-300 */
    padding: 0.75rem;
    border-radius: 0.375rem;
    background-color: #f3f4f6; /* Tailwindのbg-gray-50 */
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

input:hover, select:hover, textarea:hover {
    border-color: #4ade80; /* Tailwindのhover:border-green-300 */
    background-color: #ffffff;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5); /* Tailwindのfocus:ring-2 focus:ring-green-500に対応 */
}

/* チェックボックスのスタイル */
input[type="checkbox"] {
    width: 1rem; /* Tailwindのw-4 */
    height: 1rem; /* Tailwindのh-4 */
    border-radius: 0.25rem; /* Tailwindのroundedに対応 */
    border-width: 2px;
    border-color: #d1d5db; /* Tailwindのborder-gray-300 */
    transition: border-color 0.3s ease-in-out;
}

input[type="checkbox"]:hover {
    border-color: #4ade80; /* Tailwindのhover:border-green-300 */
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5); /* Tailwindのfocus:ring-2 focus:ring-green-500に対応 */
}

/* エラーメッセージのスタイル */
.errorlist {
    margin-top: 0.5rem; /* Tailwindのmt-2 */
    color: #dc2626; /* Tailwindのtext-red-600 */
    font-weight: 500; /* Tailwindのfont-medium */
    list-style: none;
    padding: 0;
}

/* ラベルと必須フィールドのスタイル */
label.required::after {
    content: " *";
    color: #ef4444; /* Tailwindのtext-red-500 */
}

label:hover {
    color: #16a34a; /* Tailwindのtext-green-600に対応 */
    transition: color 0.3s ease-in-out;
}

/* ヘッダー、フッターの追加スタイル */
header, footer {
    padding: 1rem;
    color: #ffffff;
}

footer {
    background-color: #1f2937; /* Tailwindのbg-gray-800 */
    text-align: center;
    color: #9ca3af; /* Tailwindのtext-gray-400 */
}