@charset "utf-8";
/*--京input.css--*/
/*##########モバイルファースト##########*/

/*##########SP##########*/
.input_flow{
    box-sizing: border-box;
    width: 100%;
    padding: 0.5em 5vw;
    position: sticky;
    top: 17vw;
    z-index: 2;
    background: #fff;
}

    .input_flow ul{
        display: flex;
        line-height: 1;
    }

    .input_flow ul li{
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

        .input_flow ul li::after{
            content: "";
            display: block;
            width: 100%;
            height: 0;
            border-top: 2px solid #ccc;
            position: absolute;
            top: calc(1rem - 1px);
            left: 50%;
            z-index: 0;
        }

        .input_flow ul li:last-child:after{
            content: none;
        }

        .input_flow ul li .icon{
            position: relative;
            z-index: 1;
        }

        .input_flow ul li .icon::before{
            box-sizing: border-box;
            font-family: FontAwesome;
            content:"\f00c";
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background: #e6e6e6;
            border: 2px solid #fff;
            color: #616161;
            font-size: 0.9em;
        }

        .input_flow ul li .lbl{
            text-align: center;
            font-size: 0.8em;
            line-height: 1.2;
            position: relative;
            z-index: 1;
        }

    /*済時の表示*/
    .input_flow ul li.done:after{
        border-top-color: var(--base_color1);
    }

    .input_flow ul li.done .icon::before{
        background: var(--base_color1);
        color: #fff;
    }

.file_uploader{
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .file_uploader_inner{
        background: #e9f7f8;
        padding: 1.5em 1.5em 1em;
        margin: 0 5vw 1em 5vw;
        border-radius: 0.75rem;
    }

    .file_uploader .btn_file_input{
        display: flex;
        justify-content: center;
    }

        .file_uploader .btn_file_input label{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5em;
            background: var(--base_color4);
            color: #fff;
            width: 75%;
            height: 3.25rem;
            font-size: 1.1em;
            font-weight: 500;
            border-radius: 100vh;
            cursor: pointer;
            transition: .3s all ease;
        }

        .file_uploader .btn_file_input label:hover{
            filter: brightness(1.2);
            box-shadow: 4px 4px 0 0 rgba(0,0,0,0.1);
        }

            .file_uploader .btn_file_input label .icon{
                width: 1.4em;
            }

            .file_uploader .btn_file_input label input[type="file"]{
                display: none;
            }

    .file_uploader .msg_wifi{
        text-align: center;
        font-weight: 600;
        color: var(--base_color4);
        margin-bottom: 0.8em;
    }

    .file_uploader .msg_file_size,
    .file_uploader .msg_owned{
        font-size: 0.9em;
    }

    .file_uploader .msg_file_size{
        margin-top: 1em;
        margin-bottom: 0.5em;
        text-align: center;
        line-height: 1.4;
    }

    .file_uploader .msg_file_size strong{
        font-weight: 600;
    }

    .file_uploader .msg_owned{
        color: #bd0000;
        text-align: center;
    }

    .upload-list{
        width: 100%;
    }

    .file_progress_info{
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        width: calc(100% - 10vw);
        margin: 0 5vw 0.5em;
        border: 1px solid #ccc;
        padding: 0.5em 0.75em;
        border-radius: 0.5rem;
    }

        .file_progress_info .fig_file_icon{
        }

            .file_progress_info .fig_file_icon .icon{
                display: block;
                width: 2rem;
            }

        .file_progress_info .progress_file_name{
            flex: 1;
            margin-left: 1em;
        }

            .file_progress_info .progress_file_name .progress{
                background: #ddd;
                position: relative;
                line-height: 1;
                padding: 0.25em 1em;
                font-size: 0.8em;
                border-radius: 100vh;
                overflow: hidden;
                display: flex;
                gap: 0.5em;
                color: #fff;
            }

                .file_progress_info .progress_file_name .progress .bar{
                    background: var(--base_color1);
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 0;
                    height: 100%;
                }

                .file_progress_info .progress_file_name .progress .lbl_percent{
                    position: relative;
                    z-index: 1;
                }

                .file_progress_info .progress_file_name .progress .upload-item__speed{
                    position: relative;
                    z-index: 1;
                }

                .file_progress_info .progress_file_name .progress .upload-item__eta{
                    position: relative;
                    z-index: 1;
                }


            .file_progress_info .progress_file_name .lbl_file_name{
                font-size: 0.9em;
            }

            .file_progress_info .progress_file_name .upload-item__actions{
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                line-height: 1.2;
            }

            .file_progress_info .progress_file_name .upload-item__error{
                font-size: 0.9em;
                padding-right: 0.5em;
            }

            .file_progress_info .progress_file_name .upload-item__actions button{
                border: none;
                border: 1px solid #eee;
                background: #eee;
                border-radius: 100vh;
                padding: 0.2em 0.8em;
                white-space: nowrap;
                cursor: pointer;
                transition: .3s all ease;
            }

            .file_progress_info .progress_file_name .upload-item__actions button:hover{
                border-color: #ccc;
                background: #fff;
            }

                .file_progress_info .progress_file_name .upload-item__actions button::before{
                    margin-right: 0.3em;
                }

            .file_progress_info .progress_file_name .upload-item__actions button.remove-file-button{}

                .file_progress_info .progress_file_name .upload-item__actions button.remove-file-button::before{
                    font-family: FontAwesome;
                    content:"\f1f8";
                    color: #2f2e75;
                }

            .file_progress_info .progress_file_name .upload-item__actions button.retry-button{}

                .file_progress_info .progress_file_name .upload-item__actions button.retry-button::before{
                    font-family: FontAwesome;
                    content:"\f0e2";
                    color: #00663c;
                }

            .file_progress_info .progress_file_name .upload-item__actions button.cancel-button{}

                .file_progress_info .progress_file_name .upload-item__actions button.cancel-button::before{
                    font-family: FontAwesome;
                    content:"\f00d";
                    color: #bd0000;
                }


.file_example{
    padding: 1em 0 0 0;
}

    .file_example ul{
        display: flex;
        gap: 1em;
    }

        .file_example ul li{
            flex: 1;
            display: flex;
            align-items: center;
        }

            .file_example ul li .icon{
                box-sizing: border-box;
                width: 3rem;
                aspect-ratio: 1 / 1;
                background: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0.5rem;
            }

            .file_example ul li dl{
                font-size: 0.8em;
                line-height: 1.4;
                margin-left: 1em;
            }

                .file_example ul li dl dt,
                .file_example ul li dl dd{
                    display: inline;
                }

                .file_example ul li dl dt{
                    font-weight: 500;
                }

                .file_example ul li dl dt::after{
                    content: "：";
                }

.error-msg{
    margin: 0 5vw 1em;
    color: #bd0000;
}

.error-msg:empty{
    margin-bottom: 0;
}

.input_box_wrapper{
    background: #f5f5f5;
    padding: 1.5em 5vw 0.5em;
}

    .input_box_wrapper hr{
        margin: 1em 0;
        border: none;
        border-top: 1px solid rgba(0,0,0,0.2);
    }

    .input_box{
        background: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 1rem;
        padding-top: 1em;
        margin-bottom: 1em;
    }

        .input_box input[type="text"],
        .input_box input[type="tel"],
        .input_box select{
            box-sizing: border-box;
            /*border: 1px solid rgba(0,0,0,0.2);*/
            border: 2px solid var(--base_color1);
            border-radius: 0.375rem;
            font-size: 1.1em;
            padding: 0.5em 0.5em;
            width: 100%;
            background: #fff;
            color: var(--base_color0);
            outline: none;
        }

        .input_box input[type="text"]:focus,
        .input_box input[type="tel"]:focus,
        .input_box select:focus{
            background: #e9f7f8;
        }

        .input_box input[type="text"].opitional,
        .input_box select.opitional{
            border-color: rgba(0,0,0,0.2);
        }

        .input_box textarea{
            box-sizing: border-box;
            /*border: 1px solid rgba(0,0,0,0.2);*/
            border: 2px solid var(--base_color1);
            border-radius: 0.375rem;
            font-size: 1.1em;
            padding: 0.5em 0.5em;
            width: 100%;
            height: 8em;
            outline: none;
        }

        .input_box textarea:focus{
            background: #e9f7f8;
        }

        .input_box input[type="text"]::placeholder,
        .input_box input[type="tel"]::placeholder{
            font-size: 0.9em;
        }

        .input_box_wrapper > h3{
            display: flex;
            justify-content: center;
            margin-top: 1.5em;
            margin-bottom: 0.75em;
        }

            .input_box_wrapper > h3 .lbl{
                font-size: 1.2em;
                font-weight: 600;
            }

        .input_box > dl{
            padding: 0 1em;
            margin-bottom: 1em;
        }

            .input_box > dl > dt{
                margin-bottom: 0.2em;
            }

                .input_box > dl > dt .lbl{
                    font-size: 1.05em;
                    font-weight: 600;
                }

                .input_box > dl > dt .input_notes{
                    font-size: 0.8em;
                    margin-left: 0.3em;
                }

                .input_box > dl > dt .input_notes::before{
                    content: "";
                    display: inline-block;
                    width: 1.1em;
                    aspect-ratio: 1 / 1;
                    background-image: url(../shared/icon/icon_info_1.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    margin-right: 0.2em;
                    vertical-align: baseline;
                    transform: translateY(0.15em);
                }

            .input_box > dl > dd{}

            .input_box > dl > dd.keyword_detail{
                margin-top: 0.5em;
            }

        .input_wrapper{
            position: relative;
            padding-right: 2rem;
        }
            /*OKな場合*/
            .input_wrapper::after{
                content:"";
                display: inline-flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                width: 2rem;
                height: 100%;
                background-image: url(../shared/icon/icon_check_on.png);
                background-size: 1.5rem auto;
                background-repeat: no-repeat;
                background-position: right top 0.5em;
            }

        .error_msg{
            display: none;
        }

    /*初期状態の表示*/
    .input_wrapper:has([class="empty"])::after{
        background-image: url(../shared/icon/icon_check_off.png);
    }

    .input_wrapper input[type="text"].empty,
    .input_wrapper select.empty,
    .input_wrapper textarea.empty{
        border-color: rgba(0, 0, 0, 0.2);
    }

    /*エラー時の表示*/
    .input_wrapper:has([class*="error"])::after{
        background-image: url(../shared/icon/icon_ng.png);        
    }

    .input_wrapper input[type="text"].error,
    .input_wrapper select.error,
    .input_wrapper textarea.error{
        border-color: var(--base_color5);
    }


    .input_wrapper:has([class*="error"]) + .error_msg{
        display: block;
        color: var(--base_color6);
        font-size: 0.9em;
        margin-top: 0.3em;
    }

    .area_detail {
        margin-top: 0.3em;
    }



    .datetime_info_set{}

        .datetime_info_set dl{
            display: flex;
            align-items: center;
            line-height: 1.2;
            margin-bottom: 0.3em;            
        }

        .datetime_info_set dl dt{
            width: 3em;
        }

        .datetime_info_set dl dd{
            flex: 1;
            margin-left: 0.7em;
        }

        .datetime_info_set dl dd .input_ymd{
            display: flex;
            gap: 0 0.5em;
        }

            .datetime_info_set dl dd .input_ymd select,
            .datetime_info_set dl dd.input_time select{
                width: auto;
                padding: 0.5em 0.3em;
            }

    .keyword_description{
        margin-top: 0.5em;
        font-size: 0.9em;
    }

    .contact_info_set{}

        .contact_info_set dl{
            display: flex;
            line-height: 1.2;
            margin-bottom: 0.4em;
        }

        .contact_info_set dl dt{
            width: 4em;
            padding-top: 1em;
        }

        .contact_info_set dl dd{
            flex: 1;
            margin-left: 0.7em;
        }

        .contact_info_set dl dd .sei_mei{
            display: flex;
            gap: 0.5em;
        }

            .contact_info_set dl dd .sei_mei li{
                flex: 1;
            }

    .terms_agreement{}

        .terms_agreement .terms_list ul{
            display: flex;
            justify-content: center;
            gap: 1em;
        }

    .agreement_check{
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        display: flex;
        justify-content: center;
    }

        .agreement_check label{
            display: inline-block;
            cursor: pointer;
            position: relative;
        }

        .agreement_check input[type="checkbox"]{
            /*display: none;*/
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .agreement_check .lbl{
            display: flex;
            align-items: center;
            gap: 0.75em;
            font-weight: 500;
            padding: 1em;
            background: rgba(251,208,168,0.5);
            border-radius: 0.25rem;
            transition: .3s all ease;
        }

        .agreement_check label:hover .lbl{
            background: rgba(251,208,168,1);
        }


            .agreement_check .lbl .icon_check{
                box-sizing: border-box;
                border: 1px solid #808080;
                box-shadow: 0 0 0 3px #fff;
                background: #fff;
                border-radius: 2px;
                width: 1rem;
                aspect-ratio: 1 / 1;
                position: relative;
            }

                .agreement_check .lbl .icon_check::before{
                    box-sizing: border-box;
                    content:"";
                    color: #fff;
                    display: inline-block;
                    height: 0.5rem;
                    width: 0.8rem;
                    border-left: 2px solid #fff;
                    border-bottom: 2px solid #fff;
                    transform: rotate(-45deg);
                    transform-origin: left bottom;
                    position: absolute;
                    top: 0.3rem;
                    left: 0.35rem;
                    opacity: 0;
                }

                .agreement_check input[type="checkbox"]:checked + .lbl .icon_check{
                    background: var(--base_color1);
                    border-color: var(--base_color1);
                }

                .agreement_check input[type="checkbox"]:checked + .lbl .icon_check::before{
                    opacity: 1;
                }

.submit_box{
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
    padding-bottom: 1em;
}

    .submit_box button{
        box-sizing: border-box;
        border: none;
        width: 65%;
        height: 3.5rem;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.375em;
        font-size: 1.1em;
        font-weight: 500;
        border-radius: 100vh;
        background: var(--base_color4);
        color: #fff;
        cursor: pointer;
        transition: .3s all ease;
    }

    .submit_box button:hover{
        filter: brightness(1.2);
        box-shadow: 4px 4px 0 0 rgba(0,0,0,0.1);
    }

        .submit_box button .icon{
            width: 1.3rem;
        }

    .submit_box button:disabled{
        background: #adadad;
        cursor:no-drop;
    }

    .submit_box button:disabled:hover{
        filter: none;
        box-shadow: none;
    }

    .submit_box button.done{
    }

.datetime_about{
    margin-top: 0.5em;
}

    .datetime_about ul{
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }

        .datetime_about ul li{
            width: calc((100% - 0.5em) / 2);
        }

            .datetime_about ul li label{
                display: block;
                position: relative;
            }

                .datetime_about ul li label input[type="radio"]{
                    position: absolute;
                    top: 1em;
                    left: 0.75em;
                }

                .datetime_about ul li label .lbl{
                    box-sizing: border-box;
                    border: 2px solid rgba(0, 0, 0, 0.2);
                    padding: 0.4em 0.5em 0.4em 1.8em;
                    display: flex;
                    border-radius: 100vh;
                    position: relative;
                }

                .datetime_about ul li label input[type="radio"]:checked + .lbl{
                    border-color: var(--base_color1);
                }

.check_has_not_email{
    margin-top: 0.5em;
}

.mail_information{
    margin-top: 0.5em;
    color: var(--base_color6);
    line-height: 1.3;
}


/*##########タブレット##########*/
@media (min-width: 768px) {
    .input_flow{
        top: 6rem;
    }

    .file_uploader .btn_file_input label{
        width: 40%;
    }

    .file_example{
        padding: 1em 5rem;
    }

    .input_box{
        padding-top: 2em;
    }

    .input_box > h3{
        padding-left: 2em;
    }

    .input_box > dl{
        padding: 0 2em;
    }

    .contact_info_set dl dt{
        padding-top: 0.9em;
    }

    .agreement_check .lbl{
        padding-left: 2em;
        padding-right: 2em;
    }

    .submit_box button{
        width: 40%;
    }

    .datetime_about ul li{
        width: auto;
    }

        .datetime_about ul li label .lbl{
            padding-right: 1em;
        }

        .datetime_about ul li label input[type="radio"]{
            top: 1.15em;
        }


}

/*##########PC##########*/
@media (min-width: 1024px) {
    .input_flow{
        padding: 0.75em 0;
    }

        .input_flow ul{
            width: 800px;
            margin: 0 auto;
        }

    .file_uploader{
        padding: 1em 0 1.5em;
    }

    .file_progress_info{
        width: 600px;
        margin: 0 auto;
        padding: 0.75em;
    }

    .file_example{
        padding: 1em 0 0 0;
        display: flex;
        justify-content: center;
    }

        .file_example ul{
            gap: 2em;
        }

        .file_example ul li{
            align-items: center;
            flex: auto;
        }

        .file_example ul li .icon{
            padding: 0.7rem;
        }

    .input_box_wrapper hr{
        margin: 1.5em 0;
    }

    .input_box{
        width: 1024px;
        margin: 0 auto 1em;
    }

    .input_box > dl > dt{
        margin-bottom: 0.4em;
    }

    .input_box input[type="text"]{}

    .input_wrapper{
        display: inline-block;
    }

    .input_wrapper.w100{
        display: block;
    }

    .input_box select{
        width: auto;
        max-width: 100%;
    }

    .datetime_info_set{
        display: flex;
    }

        .datetime_info_set dl:nth-child(2){
            margin-left: 2em;
        }

    .contact_info_set dl dt{
        width: 7em;
    }

    .input_box select[name="f001shooting_area"],
    .input_box select[name="f001shooting_area_detail"]{
        width: 12em;
    }

    .input_box select[name="f001keyword"],
    .input_box select[name="f001keyword_detail"]{
        width: 18em;
    }

    .input_box input[type="text"][name="f001submitter_name"],
    .input_box input[type="tel"][name="f001submitter_phone"]{
        width: 20em;
    }



    .file_uploader .btn_file_input label,
    .submit_box button{
        width: 30rem;
    }

    .submit_box{
        padding-bottom: 3em;
    }

}