/*!
 * style.css • v0.0.1
 * GVT co.,Ltd.
 */

:root {
    --baseColor:#e4007f;
    --baseColor2:#00b6cb;
    --baseLogoColor1:#c84094;
    --baseLogoColor2:#3450a4;
    --height:calc(3rem + 50px);
}

/******************************** common ********************************/
html, body { width:100vw; height:100%; }
body { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
main { width:1080px; max-width:90%; margin:0 auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; }
a { text-decoration:none; color:#000; }

#title { background-color: #000; color: #fff; font-size:1rem; display: inline-block; padding: 0.75rem 3rem; border-radius: 0.5rem; margin: 0 auto 2rem; }
.leadText { width:100%; margin:1rem auto 3rem; line-height:1.5; text-align:justify; letter-spacing:1.5px; }

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

/******************************** header ********************************/
header {display:flex; justify-content:center; align-items:flex-end; min-height:8rem; width:100vw; margin:0 auto 2rem; padding:2rem 0 0; }
#logoAnchor { height:100%; }
#logo { width:auto; height:100%; }
header > span { font-weight:bold; margin:0 1rem -0.3rem; font-size:0.75rem; letter-spacing:0.1px; }
header > span:first-child { visibility:hidden; }
/******************************** header ********************************/

/******************************** footer ********************************/
footer { width:100%; padding:2rem 0; text-align:center; background-color:#000; margin-top:auto; }
footer > p { font-weight:bold; color:var(--baseColor); letter-spacing:1px; }
/******************************** footer ********************************/

/******************************** upload ********************************/
#era {font-weight:bold; margin:1rem 0; font-size:1.25rem; }
#expUpForm { margin:0 auto 3rem; display:flex; flex-wrap:wrap; align-items:center; }
#expUpFile { position:absolute; opacity:0; top:0; left:0; width:100%; height:100%; }
#fileName { padding-left:2rem; }
.fileUpBtn { position:relative; display:inline-block; padding:1rem 0; background-color:var(--baseColor); color:#fff; cursor:pointer; width:60%; text-align:center; font-weight:bold; letter-spacing:2px; border-radius:0.5rem; transition:0.3s;}
.formBox { width:100%; display:flex; justify-content:flex-start; align-items:center; margin-bottom:1.5rem; }
.formBox input { width:85%; border:1px solid #000; padding:1rem; border-radius:0.5rem; ;}
.formBox input[type="radio"] { width:auto !important;}
.formBox > label:first-child, .formBox > span:first-child { width:10%; font-weight:bold; letter-spacing:2px; }
.formStatus { flex-wrap:wrap; margin-bottom:4rem; }
.formStatus > label { padding-left:0.5rem; font-weight:bold; letter-spacing:2px; }
.formStatus > span:last-child { font-weight:normal; padding-left:10%; padding-top:1rem; text-align:justify; }
.formStatus > input:not(:first-of-type) { margin-left:2rem; }
#expBtnArea { display:flex; justify-content:space-around; align-items:center; width:100%; margin-top:4rem; }
#expBtnArea > button, #expBtnArea > input[type="submit"] { width:40%; padding:0.75rem 0; letter-spacing:3px; border-radius:0.5rem; transition:0.3s; }
#expUpBtn { background-color:#000; color:#fff; font-weight:bold; cursor:pointer; border:3px solid #000; }
#expDLBtn { background-color:var(--baseColor); color:#fff; outline:2px solid var(--baseColor); font-weight:bold; cursor:pointer; }
#expUpClsBtn { border:2px solid #000; color:#000; font-weight:bold; }
#expUpBtn:hover, #expDLBtn:hover,#expUpClsBtn:hover { opacity:0.75; }
/******************************** upload ********************************/

/******************************** download ********************************/
.dlTitle { background-color:var(--baseColor2) !important; }

#dlForm { width:100%; display:flex; flex-direction:column; align-items:center; }
#dlData { width:100%; border-collapse:collapse; border:1px solid #000; }
#dlData tbody tr:hover { background-color:#b5eeff66 !important; }
#dlData tbody tr:nth-child(odd) { background-color:#c8409422; }
#dlData th, #dlData td { border:1px solid #000; }
.dlDataHead { font-weight:normal; padding:0.5rem 0; }
.dlDataHead:first-child { width:3%; }
.dlDataHead:nth-child(2) { width:10%; }
.dlDataHead:nth-child(3) { width:20%; }
.dlDataHead:nth-child(4) { width:12%; }
.dlDataHead:nth-child(5) { width:15%; }
.dlDataHead:nth-child(6) { width:25%; }
.dlDataHead:last-child { width:15%; }
.dlDataVal { font-size:0.85rem; padding:0.75rem 0.5rem; }
.dlDataVal:first-child, .dlDataVal:nth-child(2), .dlDataVal:nth-child(5), .dlDataVal:last-child { text-align:center; }
.nodata { text-align:center; padding:0.5rem; }
.fileDL::before { content:'\f019'; font-family:fontawesome; padding-right:0.5rem; }

#pagination { display:flex; justify-content:center; align-items:center; margin:3rem 0 5rem; }
#pageDisp { margin:0 4rem; }
#pagePrev, #pageNext { opacity:0.4; }
#pagePrev.valid, #pageNext.valid { cursor:pointer; opacity:1; }
#pagePrev::after { content:'\f053'; color:#000; font-size:1.5rem; font-family:fontawesome; }
#pageNext::after { content:'\f054'; color:#000; font-size:1.5rem; font-family:fontawesome; }

#fileDlBtn, #deleteFileBtn { background-color:var(--baseColor); color:#fff; font-weight:bold; width:40%; padding:1rem 0; margin-bottom:3rem; border-radius:0.5rem; ;}
#deleteFileBtn { background-color:#333; margin-bottom:5rem; }

#overlay { position:fixed; top:0; bottom:0; left:0; right:0; width:100%; background-color:rgba(0, 0, 0, 0.6); z-index:-1; display:flex; justify-content:center; align-items:center; transition:0.3s; opacity:0; }
#overlay.active { opacity:1; z-index:10; }
#overlay::after { content:'\f110'; z-index:11; font-size:3rem; font-family:fontawesome; color:#fff; animation: fa-spin 1s infinite steps(8); }

section#extraction { display: flex; align-items: center; margin-bottom: 1rem; width: 100%; }
#yearly { margin: 0 2rem 0 0.5rem; width: 8rem; position: relative; padding: 0.5rem; border: 1px solid #999; border-radius: 0.5rem; }
#year { width: 100%; outline: none; }
#yearly::after { content: '\f0d7'; position: absolute; font-family: 'FontAwesome'; transform: translateX(-75%); }
#uid { padding: 0.5rem; width: 8rem; margin-left: 0.5rem; margin-right: 2rem; border: 1px solid #ccc; border-radius: 0.5rem; }
#uidExt, #blank { padding: 0.5rem 1rem; border-radius: 0.5rem; background-color: #aaa; color: #fff; border: 1px solid #888; filter: drop-shadow(1px 2px 1px black); }
#blank { margin-left:auto; margin-right:1rem; }
#uidExt:active, #blank.active, #blank:active { transform: translate(1px, 2px); filter: drop-shadow(0px 1px 1px black); }
#blank.active { color:#f00; transition:0.3s; }

#annualLink { display:block; margin-left:auto; margin-bottom:1rem; color:#f00; }
#annualLink::after { content:'\f08e'; font-family:fontawesome; padding-left:0.5rem; }
/******************************** download ********************************/

/******************************** annual ********************************/
#annualUpdate { display:flex; justify-content:center; width:100%; margin:1rem auto 3rem; line-height:1.5; text-align:justify; letter-spacing:1.5px; }
#annualUpdate #annualBtn { width:20vw; height:7.5vw; background-color:var(--baseLogoColor1); color:#fff; font-weight:bold; border-radius:2rem; cursor:pointer; transition:0.3s; }
#annualUpdate #annualBtn:hover { background-color:var(--baseLogoColor2); opacity:0.75; }
/******************************** annual ********************************/

/********************************   sp   ********************************/
@media screen and (min-width:1080px){
    .fileUpBtn { background-color:#e4007f33; color:#666; padding:2rem; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:0; outline:0.125rem dashed #fff; outline-offset:-0.5rem; }
    .fileUpBtn:hover { background-color:#e4007f; color:#fff; }
    .fileUpBtn::before { content:'ここにファイルをドロップ\Aまたは\A'; white-space:pre; }
}
/********************************   sp   ********************************/

/******************************** tablet ********************************/
@media screen and (max-width:1080px){
    main { width:90vw; }
}
/******************************** tablet ********************************/

/********************************   sp   ********************************/
@media screen and (max-width:800px){
    html, body { font-size:14px; }
    header { flex-direction:column; align-items:center; margin-top:1rem; }
    header > span { margin:0 0.25rem 0;  }
    header > span:first-child { display:none; }
    #logo { width:auto; max-width:30vw; height:100%; display:block; }
    #title { padding:0.75rem 1.5rem; white-space:pre; }
    .leadText > a { word-wrap:break-word; }

    .formBox { flex-direction:column; align-items:flex-start; }
    .formBox > label:first-child, .formBox > span:first-child { width:auto; padding-bottom:0.5rem; }
    .formBox input { width:100%; }
    .formStatus { align-items:center !important; }
    .formBox input[type="radio"] { opacity:0; height:2rem; }
    .formBox input[type="radio"]:checked + label { background-color:var(--baseColor); }
    .formStatus > label  {width:90%; color:#fff; background-color:#999; padding:0.75rem; text-align:center; border-radius:0.75rem; transition:0.5s; margin-top:-1rem; }
    .formStatus > span { width:100% !important; padding-left:0 !important; }
    .fileUpBtn { width:90%; margin:0 auto; }
    .fileUpBtn::before { display:none; }
    #fileName { margin-top:1rem; }
    #expBtnArea { flex-direction:column; width:90%; margin:4rem auto; }
    #expBtnArea > button, #expBtnArea > input[type="submit"] { width:100%; }
    #expUpClsBtn { margin-top:2rem; }
    #expUpFile { width:10vw;  }

    input::placeholder { font-size:0.875rem; }
}

@media screen and (max-width:480px){
    header { padding-top: 1rem; }
}
/********************************   sp   ********************************/