@charset "UTF-8";
/*--------------------------------
初期設定
---------------------------------*/
html {font-size: 62.5%;} /* 1.6rem=16px */
body {width: 100%; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI",  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1; word-break: break-all; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 1px; min-width: 320px; padding: 0px;}
a {color: #000;}
a:hover img {}
img {max-width: 100%;height: auto;}
p, ul li, ol li, dl dt, dl dd{margin:0; padding:0; font-size:1.6rem}
ul{ margin:0; padding:0}
ul li{ margin:0; padding:0; list-style-type:none}
.clearfix::after { content: ""; display: block; clear: both;}
a:hover{ text-decoration:none;}
.loginBody{background-image: url(../images/bg.png)}
main {width: 90%;background-color: #fff;box-shadow: 0 0 3px #999;margin: 70px auto 0 auto;padding-bottom: 50px;position: relative;}
h1 {text-align: center;}
h1 img {max-width:500px;width: 90%;margin-top: -60px;}
.loginArea {margin: 60px 20px 20px 20px;}
.m-form-text {width: 100%; border: 1px solid #0d6fb8;padding: 15px;border-radius: 3px;box-sizing: border-box;margin-bottom: 40px;font-size: 16px;}
.keep {text-align: center;margin-bottom: 10px;}
.button03 {width: 155px;height: 50px;padding: 5px 8px; border-radius: 3px;border-top: none;border-left: none;border-right: none;border-bottom: 3px solid #000;background-color: #005b8a;font-size: 16px;color: #fff;font-weight: 500;outline: none;margin: 20px 10px;}
.button03:active{border-bottom: none;background-color: #2f4875;}
.form-submit2{text-align: center;}
small{text-align: center;font-size: 14px;display: block;margin: 100px 0 50px 0;}
.checkbox {display: none;}
.checkbox + .checkbox-icon {position: relative;display: block;}
.checkbox + .checkbox-icon:before {content: '\f0c8';font-family: "Font Awesome 5 Free";color: #0d6fb8;font-size: 25px;font-weight: 500;}
.checkbox:checked + .checkbox-icon:before {content: '\f14a';color: #0d6fb8;font-weight: 900;}
.re .home{width: 30px;position: absolute;top:10px;left: 15px;}
.re .list{width: 30px;position: absolute;top:10px;left: 60px;}
.re{list-style: none;}
.log {width: 30px;position: absolute;top:10px;right: 30px;}
.re .men{width: 30px;position: absolute;top:10px;right: 80px;}
.logname {position: absolute;top:55px;right: 15px;font-size: 14px;}
h2 {font-size: 24px;color: #fff;text-align: center;background-color: #0d6fb8;border-radius: 30px;font-weight: bold;padding: 15px;width: 80%;margin: 50px auto;}
.re_table td {border-bottom: 1px solid #000;line-height: 180%;}
.re_table td {font-size: 16px;padding: 15px;}
.re_table td a{/*text-decoration: none;*/font-size: 16px;}
.re_table span {display: inline-block;margin-top: 30px;float: right;}
.re_table {width: 90%;margin: 0 auto;box-sizing: border-box;}
.button05::before{content: ''; display: inline-block; width: 30px; height: 20px; background-image: url(../images/button05.png);background-size: contain;vertical-align: middle;}
.button04::before{content: ''; display: inline-block; width: 30px; height: 20px; background-image: url(../images/button04.png);background-size: contain;vertical-align: middle;}
.button01{height: 40px; width: 90px;text-align: center;background-color: #ffdded;font-weight: bold;border-radius: 5px;font-size: 16px;box-sizing: border-box;padding-top: 5px;}
.button01:hover{background-color: #ff9bca;color: #fff;transition: 0.5s ;}
.button02{width: 120px;background-color: #d0e1f1;border: 0;text-align: center;font-size: 16px;height: 40px; border-radius: 5px;margin: 30px auto;}
.button02:hover{background-color: #8db6dd;transition: 1s ;}
.center{text-align: center;}
.table02{width: 90%;margin: 0 auto;box-sizing: border-box;}
.table02 td {padding: 20px;font-size: 16px;line-height: 180%;}
.table02 .which{background-color: #f2f2f2;}
.table02 div {text-align: center;font-size: 24px;font-weight: bold;color: #0d6fb8;padding: 50px 0 30px 0;}
.select{display: flex;flex-wrap: wrap;margin-bottom: 50px;justify-content: center;}
.select img {width: 120px;}
.button06{width: 120px;background-color: #2c4e6d;border: 0;text-align: center;font-size: 16px;height: 40px; border-radius: 5px;color: #fff;}
.select li {position: relative;}
.select span.img1 {font-family: 'M PLUS 1', sans-serif;position: absolute;top:30px;left: 55px;font-size: 30px;}
.select span.img2 {font-family: 'M PLUS 1', sans-serif;position: absolute;top:30px;left: 50px;font-size: 30px;}
.select span.img {font-family: 'M PLUS 1', sans-serif;position: absolute;top:30px;left: 40px;font-size: 30px;}
input[class="checkboxr"] + label span.whitetext{color: white}
input[class="checkboxw"] + label span.whitetext{color: white} 
input[class="checkbox"]:checked + label span.whitetext{color: white}
.button06:hover{background-color: #3b6891;transition: 1s ;}
.button07{width: 120px;background-color: #29ac09;border: 0;text-align: center;font-size: 16px;height: 40px; border-radius: 5px;color: #fff;}
.button07:hover{background-color: #4ad60a;transition: 1s ;}
#modal-open {color: #fff;}
#modal-main {display: none;margin: 0;padding: 0;position:fixed;z-index: 2;}
#modal-main img {width: 100%;}
#modal-bg {display:none;width:100%;height:100%;background-color: rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index: 1;}
#modal-open2 {color: #fff;}
#modal-main2 {display: none;margin: 0;padding: 0;position:fixed;z-index: 200;}
#modal-bg2 {display:none;width:100%;height:100%;background-color: rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index: 100;}
#modal-main2 img {width: 100%;}
.small{font-size: 0.8em;color: red;}
a.title{color: #fff;}
textarea{
    width: auto;
    padding: 5px;
    border: solid 1px #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    min-width: 100%;
    max-width:686px;
    min-height: 100px;
}

@media screen and (max-width: 1000px) {
    .select li.img{
        position: relative;
        display: inline-block;
        width: 80px;
        height:70px;
    }
    .select input[id^="checkbox"] + label{
        background-repeat: no-repeat;
        height: 70px;
        background-size: 80px;
    }
    .select span.img1 {
        font-family: 'M PLUS 1', sans-serif;
        position: absolute;
        top:15px;
        left: 37px;
        font-size: 20px;
    }
    .select span.img2 {
        font-family: 'M PLUS 1', sans-serif;
        position: absolute;
        top:15px;
        left: 33px;
        font-size: 20px;
    }
    .select span.img {
        font-family: 'M PLUS 1', sans-serif;
        position: absolute;
        top:15px;
        left: 23px;
        font-size: 20px;
    }
}


@media screen and (min-width: 600px) {
h1 img {max-width: 550px;width: 550px;margin-top: -80px;}
main {margin-top: 100px;width: 550px;}
.loginArea{width: 400px;margin: 60px auto 20px auto;}
.button06{margin: 30px 0px 30px 40px;}
.button07{margin: 30px 0px 30px 40px;}
}


@media screen and (min-width: 1000px) {
h1 img {max-width: 800px;width: 800px;margin-top: -80px;}
main{width: 800px;}
.loginArea{width: 540px;margin-top: 100px;}
.keep{margin-top: 80px;}
.re .home{width: 45px;top:25px;left: 15px;}
.re .list{width: 45px;top:25px;left: 90px;}
.re{list-style: none;}
.log {width: 45px;top:25px;right: 60px;}
.re .men{width: 45px;top:25px;right: 120px;}
.logname {top:90px;right: 50px;font-size: 16px;}
.re_table span{margin-top: 0;}
.re_table td {padding: 40px 15px;}
.select.img{justify-content: space-between;}
#modal-main img {width: 700px;}
#modal-main2 img {width: 700px;}
.select li.img{
    position: relative;
    display: inline-block;
    width: 120px;
    height:70px;
}
.select input[id^="checkbox"] + label{
    background-repeat: no-repeat;
    height: 70px;
    background-size: 120px;
}
.select span.img1 {font-family: 'M PLUS 1', sans-serif;position: absolute;top:30px;left: 55px;font-size: 30px;}
.select span.img2 {font-family: 'M PLUS 1', sans-serif;position: absolute;top:30px;left: 50px;font-size: 30px;}
.select span.img {font-family: 'M PLUS 1', sans-serif;position: absolute;top:30px;left: 40px;font-size: 30px;}
}
