@charset "UTF-8";

html {
    font-size: 100%;
}

body {
    color: #383e45;
    font-size: 0.9rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

a {
    text-decoration: none;
    color: blue;
}
img {
    max-width: 100%;
}
li {
    list-style: none;
}
.hr {
    border-top: 2px solid #707070;
}
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.site-title {
    margin-left: 20px;
    padding: 12px 0;
    font-size: 2rem;
}
.site-title a {
    display: block;
}
.section-title {
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 60px;
    border-bottom: solid 1px #383e45;
}
.content-title {
    font-size: 1rem;
    margin: 10px 0;
}
.wrapper {
    max-width: 960px;
    margin: 0 auto 20px auto;
    padding: 0 4%;
    text-align: center;
}

/*-------------------------------------------
 header
 -------------------------------------------*/
#header {
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 60px;
    background: #90D4D9 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: left;
}

#header a {
    color: #FFF;
    text-decoration: none;
}

/*-------------------------------------------
 loading
 -------------------------------------------*/
#loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #90D4D9   ;
    display: none;
    z-index: 9999;
}
.spinner {
    width: 100px;
    height: 100px;
    margin: 200px auto;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}
@keyframes sk-scaleout {
    0% {
        transform: scale(0);
    } 100% {
        transform: scale(1.0);
        opacity: 0;
    }
}

/*-------------------------------------------
 description
 -------------------------------------------*/
#desc-parts {
    margin: 20px;
    padding: 25px;
    font-size: 1rem;
    border: 1px solid #90D4D9;
    border-radius: 4px;
    opacity: 1;
}

/*-------------------------------------------
 upload
 -------------------------------------------*/
#upload-parts {
    margin: 20px 20px 40px;
    font-size: 1rem;
}

/*-------------------------------------------
 select button
 -------------------------------------------*/
.original-file-btn {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 35px;
    color: #FFF;
    cursor: pointer;
    background: #1DABB5 0% 0% no-repeat padding-box;
    box-shadow: 3px 3px 6px #0000003D;
    border-radius: 4px;
    padding: 5px 1em;
    margin-bottom: 20px;
}
.original-file-btn input[type="file"] {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/*-------------------------------------------
 upload button
 -------------------------------------------*/
 .upload-file-btn {
    box-shadow: 3px 3px 6px #0000003D;
}

/*-------------------------------------------
 delete button
 -------------------------------------------*/
.delete-file-btn {
    box-shadow: 3px 3px 6px #0000003D;
}

/*-------------------------------------------
 disp
 -------------------------------------------*/
#disp-parts {
    margin: 20px;
    padding: 25px;
    font-size: 1rem;
    border: 1px solid #90D4D9;
    border-radius: 4px;
    opacity: 1;
}

#uploaded-contents {
    margin-bottom: 20px;
    /* display: flex;
    flex-wrap: nowrap; */
}
#uploaded-contents div {
    width: calc(33.3% - 10px);
    margin: 5px;
}
#uploaded-contents img {
    box-shadow: 3px 3px 2px #0000003D;
}

/*-------------------------------------------
 footer
 -------------------------------------------*/
#footer {
    font-size: 0.5rem;
    padding: 10px 0;
    text-align: center;
}


/*-------------------------------------------
 SP
 -------------------------------------------*/
@media screen and (max-width: 600px) {

    /*-------------------------------------------
     Mainvisual
     -------------------------------------------*/
    #mainvisual img {
        height: calc(50vh - 160px);
    }

}