@charset "UTF-8";

    * {
        font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    }

    header {
        width: 100%;
        color: #fff;
    }

    .h_top {
        height: 50px;
        background-color: #000;
    }

    .h_under {
        height: 40px;
        background-color: #2fadd7;
        font-size: 23px;
        font-weight: bold;
        padding-left: 10px;
    }

    .headerLogo {
        background-image: url(/img/logo_01.svg);
        background-size: 100%;
        position: absolute;
        width: 100px;
        height: 30px;
        margin: 10px;
    }

    .middle {
        line-height: 40px;
    }

    body {
        background-color: #eaeaea;
    }

    #wrapper {
        width: 90%;
        margin: 10px auto 0;
        text-align: center;
        color: #363636;
    }

    .buttonLink {
        width: 75%;
        margin: 40px auto 0;
    }
    
    .buttonTitle {
        margin-bottom: 5px;
        font-size: 20px;
    }
    

    .buttonDeco {
        display: block;
        width: 161px;
        height: 2em;
        line-height: 2em;
        margin: 0 auto;
        font-size: 24px;
        font-weight: bold;
        text-decoration: none;
        border-radius: 4px;
        color: #fff;
        background-color: #2554a1;
    }

    select,input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;           
    }
    
    select.inputForm {
        color: #9ea09e;
    }
    
    .placeText {
        display: none;
    }
       
    .inputWrap {
        width: 80%;
        position: relative;
        display: inline-block;
        margin-top: 10px;
    }
    
    .inputForm {
        width: 100%;
        height: 38px;
        padding: 5px 0 5px 8px;
        border-radius: 0;
        font-size: 16px;
        position: relative;
        background-color: transparent;
        border: 1px solid #828282;
    }
    
    .requieForm {
        border: 2px solid #565656;
    }
    
    .error {
        background-color: #ffdfdf;
        border-color: #f00;
    }
    
    .errorTxt {
        width: 80%;
        color: #f00;
        font-size: 12px;
        display: inline-block;
        text-align: left;
        padding: 2px 0 0 5px;
    }
    
    .selectArrow::after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0px;
        border-bottom: solid 2px #b4b3b3;
        border-right: solid 2px #b4b3b3;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -6px;
    }
    
    .fileCheck::before {
        content: "";
        width: 12px;
        height: 24px;
        border: 0px;
        border-bottom: solid 8px #ddd;
        border-right: solid 8px #ddd;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -6px;
    }
    
    .fileBoxWrap {
        display: inline-block;
        width: 10vh;
        height: auto;
        margin: 1%;
    }
    
    .fileBoxWrap p {
        font-size: 12px;
        font-weight: bold;
    }
    
    .fileBox {
        width: 10vh;
        height: 10vh;
        border-radius: 15px;
        background-image: url(/img/camera01.png);
        background-color: #fff;
        background-size: cover; 
        position: relative;
    }
    .fileDeco {
        display: block;
        width: 100%;
        height: 100%;
        color: transparent;
    }
    
    .fileNone {
        display: none;
    }
    
    .fileDeco p {
        color: transparent;
    }
    
    #submitWrap {
        margin-bottom: 40px;
    }

    #submitButton {
        width: 100%;
        font-size: 20px;
        height: 2em;
        line-height: 2em;
        font-weight: bold;
        color: #fff;
        background-color: #2554a1;
        border: none;
        border-radius: 5px;
    }
    
    .textWrap {
        width: 80%;
        position: relative;
        display: inline-block;
        margin: 3px 0 10px;
    }
    
    .caution {
        margin-top: 3px;
        font-size: 12px;
        color: #f00;
    }
    
    .dateCaution {
        text-align: left;
        line-height: 1.3em;
    }
    .checkWrap {
        width: 80%;
        display: inline-block;
        text-align: left;
        margin-top: 15px;
        font-size: 14px;
    }
    
    .infoLink {
        display: block;
        margin: 0 0 15px 5px;
    }
    
    .inputCheck {
        display: none;
    }
    
    .checkParts {
        padding-left: 25px;
        position: relative;
    }
    
    .checkParts::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #828282;
        border-radius: 2px;
    }
    .inputCheck:checked + .checkParts {
        color: #009a9a;
    }
    
    .inputCheck:checked + .checkParts::before{
        border-color: #009a9a;
    }
    
    .inputCheck:checked + .checkParts::after{
        content: "";
        display: block;
        position: absolute;
        top: -5px;
        left: 5px;
        width: 7px;
        height: 14px;
        transform: rotate(40deg);
        border-bottom: 3px solid #009a9a;
        border-right: 3px solid #009a9a;
    }
    
    .end {
        font-size: 14px;
    }
/*----------------info----------------*/    

    #infomation {
        text-align: left;
        font-size: 13px;
        counter-reset: num;
    }
    
    #infomation h1 {
        font-size: 18px;
        margin-bottom: 1em;
    }
    
    #infomation h2 {
        margin-bottom: 1em;
    }
    
    #infomation h3::before {
        counter-increment: num;
        content: counter(num) ".";
        margin-right: 5px;
    }
    
    .indent {
        margin-left: 1em;
    }

    .listChild {
        list-style-type: disc;
        margin-left: 2em;;
    }
    
    .notList {
        list-style: none;
    }
    
    .lastItem {
        margin-bottom: 1em;
    }
 

/*----------------date----------------*/
    
    .dateInputWrap {
        width: 90%;
        display: inline-block;
        margin: 10px 0 20px;
    }
    
    .dateInputWrap p {
        text-align: left;
    }

    .dateBarWrap {
        width: 96%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 5px auto 0;
    }
    
    .dateBarWrap p {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
    }
    
    .dateBarWrap label {
        flex-basis: 25%;
    }
    
    .dateCheck {
        display: none;
    }
    
    .dateCheck-parts {
        position: relative;
        text-align: right;
        font-size: 12px;
        padding: 7px 3px 7px 0;
        width: 97%;
        transition: 0.3s;
        color: #fff;
        border-radius: 3px;
        border: 1px solid #9ea09e;
        background: #9ea09e;
        display: inline-block;
        line-height: 1;
    }
    
    .dateCheck:checked + .dateCheck-parts{
        background: #B0ED5D;
        color: #fff;
        border: 1px solid #B0ED5D;
    }
    
    .dateCheck-parts:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: 14px;
        left: 4px;
        background: #fff;
        transition:width .2s;
        transform: rotate(140deg);
    }
    
    .dateCheck-parts:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0px;
        background: #fff;
        left: 10px;
        transition:width .2s .2s;
        transform: rotate(230deg);
    }
    
    .dateCheck:checked + .dateCheck-parts:before{
        width: 2px;
        height: 5px;
    }
    .dateCheck:checked + .dateCheck-parts:after{
        width: 2px;
        height: 13px;
    }
    
    .dateSubmitWrap {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    
    .dateSubmitWrap a {
        flex-basis:45%;
        font-size: 20px;
        height: 2em;
        text-decoration: none;
        line-height: 2em;
        font-weight: bold;
        color: #fff;
        background-color: #f58992;
        border: none;
        border-radius: 5px;
    }
    
    .dateSubmitButton {
        flex-basis:45%;
        font-size: 20px;
        height: 2em;
        line-height: 2em;
        font-weight: bold;
        color: #fff;
        background-color: #2554a1;
        border: none;
        border-radius: 5px;
    }
    
    .dateError {
        width: 100%;
        display: block;
        text-align: left;
        color: #f00;
        font-size: 14px;
        padding-left: 3px;
    }
    
    .confirmTitle {
        font-weight: bold;
    }
    
    .confirmData {
        padding-left: 1em;
    }