.wrap label {
    display: block;
    margin-bottom: 5px;
}

.wrap input[type="text"],
.wrap input[type="email"],
.wrap input[type="password"],
.wrap input[type="date"],
.wrap input[type="number"],
.wrap input[type="tel"],
.wrap select,
.wrap textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.wrap {
    max-width: 800px;  /* フォームの最大幅 */
    margin: 0 auto;    /* 中央寄せ */
    min-height: calc(100vh - 128px); /* 画面の高さから下部の余白を引いた値 */
    margin-bottom: 64px;
}

.langs {
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 24px;
}
.input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-group label {
    margin-right: 10px;
    white-space: nowrap;
}
.langs-select-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 16px;
}
.langs-select-wrap .langs-select {
    display: block;
    width: 230px!important;
    margin-bottom: 4px;
}
.langs-select-wrap small {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
    a {
        color: #666;
        text-decoration: underline;
    }
}
@media (max-width: 600px) {
    .input-group {
        flex-direction: column; /* 小さい画面では縦に並べる */
        align-items: flex-start; /* 左揃えにする */
    }

    .input-group label {
        margin-right: 0; /* スペースを削除 */
        margin-bottom: 5px; /* 入力欄とのスペースを追加 */
    }
}

main {
    padding: 20px;     /* 内側の余白 */
    background: white; /* 背景色 */
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* シャドウ */
}
.send {
    margin-top: 16px;
}

.send-button {
    float: right;
    display: block;
    min-width: 50%;
    padding: 12px;
    font-size: 16px;
    color: white;
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
footer {
    max-width: 800px;  /* フォームの最大幅 */
    margin: 16px auto;    /* 中央寄せ */
    margin-top: 100px;
    text-align: center;
}

header {
    border-bottom: 4px solid var(--primary-color);
    padding: 20px;
    margin-bottom: 24px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body {
    background: var(--background-color);
    color: #3b3b3b;
    font-family: 'Noto Sans', sans-serif;
}
hr {
    border: none;
    border-top: 1px solid var(--background-color);
    margin: 32px 0;
}

.field-label {
    font-size: 20px;
    margin-bottom: 8px;
}

.required {
    color : #b61919;
    font-size: 12px;
}
.field-description {
    font-size: 14px;
    padding: 8px;
}

.form-description {
    font-size: 14px;
    padding: 8px;
}


.dropzone {
    width: 100%;
    padding: 60px 20px;
    border: 2px dashed #ccc;
    text-align: center;
    margin-bottom: 20px;
    color: #999;
}
.dropzone.dragover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.progress-bar {
    width: 0%;
    height: 20px;
    background-color: var(--primary-color);
    text-align: center;
    color: white;
    line-height: 20px;
    margin-top: 10px;
}
.file-icon {
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0.3;
}
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: 1px solid #999;
    margin: 8px;
    width: 100px;
    height: 120px;
    position: relative;
}
.file-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    z-index: 10;
    font-size: 10px;
}

.file-progress-wrap {
    position: absolute;
    width: 95%;
    height: 10px;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: gainsboro;
    border-radius: 4px;
    border: #333 1px solid;
}
.file-progress {
    background-color: var(--primary-color);
    color: white;
    border: none;
    height:100%;
    font-size: 6px;
    text-align: center;
}

.file-list {
    display: flex;
    flex-wrap: wrap;
}

.file-remove:before {
    content: '×';
    color: white;
    background-color: #333;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: -6px;
    right: -8px;
    cursor: pointer;
}

.file-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;
}

/* デフォルトカラー（その他の拡張子用） */
.file-icon {
    color: #888; /* グレー */
}

/* PDFファイル */
.file-icon-pdf {
    color: #D32F2F; /* 赤 */
}

/* 画像ファイル */
.file-icon-jpg,
.file-icon-jpeg,
.file-icon-png,
.file-icon-gif,
.file-icon-bmp,
.file-icon-tiff,
.file-icon-svg,
.file-icon-webp {
    color: #4CAF50; /* 緑 */
}

/* Wordファイル */
.file-icon-doc,
.file-icon-docx,
.file-icon-odt {
    color: #1E90FF; /* 青 */
}

/* Excelファイル */
.file-icon-xls,
.file-icon-xlsx,
.file-icon-ods {
    color: #388E3C; /* 濃い緑 */
}

/* PowerPointファイル */
.file-icon-ppt,
.file-icon-pptx,
.file-icon-odp {
    color: #FF7043; /* オレンジ */
}

/* テキストファイル */
.file-icon-txt,
.file-icon-rtf,
.file-icon-md,
.file-icon-log {
    color: #616161; /* ダークグレー */
}

/* 圧縮ファイル */
.file-icon-zip,
.file-icon-rar,
.file-icon-7z,
.file-icon-tar,
.file-icon-gz,
.file-icon-bz2 {
    color: #FFCA28; /* ゴールド */
}

/* 動画ファイル */
.file-icon-mp4,
.file-icon-avi,
.file-icon-mov,
.file-icon-wmv,
.file-icon-flv,
.file-icon-mkv,
.file-icon-webm {
    color: #FF5722; /* オレンジレッド */
}

/* 音声ファイル */
.file-icon-mp3,
.file-icon-wav,
.file-icon-flac,
.file-icon-aac,
.file-icon-ogg,
.file-icon-m4a {
    color: #3F51B5; /* 濃い青紫 */
}

/* コード・ソースファイル */
.file-icon-js,
.file-icon-html,
.file-icon-css,
.file-icon-php,
.file-icon-py,
.file-icon-rb,
.file-icon-java,
.file-icon-c,
.file-icon-cpp,
.file-icon-h,
.file-icon-cs,
.file-icon-sh,
.file-icon-go,
.file-icon-ts,
.file-icon-json,
.file-icon-yml,
.file-icon-yaml,
.file-icon-xml {
    color: #FF9800; /* オレンジ */
}

/* データファイル (CSV, SQL, JSON) */
.file-icon-csv,
.file-icon-sql,
.file-icon-json {
    color: #43A047; /* 緑 */
}

/* フォントファイル */
.file-icon-ttf,
.file-icon-otf,
.file-icon-woff,
.file-icon-woff2 {
    color: #795548; /* 茶色 */
}

/* その他ドキュメント */
.file-icon-psd, /* Photoshopファイル */
.file-icon-ai,  /* Illustratorファイル */
.file-icon-indd, /* InDesignファイル */
.file-icon-eps {
    color: #673AB7; /* 紫 */
}

/* システムファイル */
.file-icon-exe,
.file-icon-dll,
.file-icon-sys,
.file-icon-bin,
.file-icon-dmg,
.file-icon-iso {
    color: #9E9E9E; /* 灰色 */
}

.thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    .thanks-message {
        font-size: 16px;
        line-height: 1.6;
        color: #333;
    }
    .thanks-icon {
        color: var(--primary-color);
        margin-bottom: 20px;
        svg {
            width: 80px;
            height: 80px;
        }
    }
  }
.thanks-animation {
    animation: fadeInUp 0.8s ease-out;
}

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