@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

body, 
h1, h2, h3, h4, h5, h6, p, div, 
ul, ol, li, dl, dt, dd,
table, th, td {
	line-height: 1;
	margin: 0px;
	padding: 0px;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.container {
    width: 100vw;
}

.main {
    width: 60vw;
    height: 100vh;
    float: left;
}

.main_box {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.box_title {
    display: block;
    height: 30%;
    background-color: #12648D;
    color: white;
    padding-left: 10%;
    padding-top: 10%;
}

.box_title p {
    margin-bottom: 1%;
    font-size: 1vw;
    line-height: 150%;
}

.box_title h1 {
    margin-bottom: 2%;
    font-size: 4vw;
}

.meidenlogo_tab {
    display: none;
}

.meidenlogo_mob {
    display: none;
}

.box_img {
    display: block;
    width: 100%;
    height: 56%;
    background-image: url(images/login/login_img.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
}

.box_copyright {
    display: block;
    width: 100%;
    height: 3%;
    text-align: center;
}

.box_copyright p {
    display: block;
    color: #12648D;
}

.box_copyright_2 {
    display: none;
}

.side {
    width: 40vw;
    height: 100vh;
    background-color: #6298C2;
    float: left;
}

.meidenlogo {
    display: block;
    width: 37vw;
    text-align: right;
    margin-top: 2vw;
    margin-bottom: 5%;
    margin-right: 2vw;
}

.side_box {
    display: block;
    width: 60%;
    height: 50%;
    margin: auto;
    margin-top: 40%;
}

.form_box {
    display: block;
    text-align: center;
}
.feedback-input {
	color:#3c3c3c;
	font-size: 18px;
	border-radius: 10px;
	line-height: 22px;
	background-color: #fff;
	padding: 13px 13px 13px 54px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  	border: 1px solid #0057AA;
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 2px solid #0057AA;
	color: #0057AA;
	outline: none;
    padding: 13px 13px 13px 54px;
}

#button-blue {
    width: 100%;
    border-radius: 50px;
    border-style: none;
    cursor: pointer;
    background-color: #12648D;
    color: white;
    font-size: 24px;
    padding-top: 7px;
    padding-bottom: 7px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top: 0px;
    font-weight: 700;
}
.contact {
    margin-top: 10px;
    color: white;
}

.contact a {
    color: #00fffF;
    text-decoration-line: none;
}



/* スクリーンサイズ 幅 1920px 以上で適用する設定・上から継承したスタイルを上書き */
@media only screen and (min-width: 1920px) {

    .box_title p {
        margin-bottom: 1%;
        font-size: 18px;
        line-height: 150%;
    }
    
    .box_title h1 {
        margin-bottom: 2%;
        font-size: 72px;
    }
}


/* Icons ---------------------------------- */
#id{
	background-image: url("images/login/id.svg");
	background-size: 20px 20px;
	background-position: 14px 14px;
	background-repeat: no-repeat;
}

#id:focus{
	background-image: url("images/login/id.svg");
	background-size: 20px 20px;
	background-position: 14px 14px;
	background-repeat: no-repeat;
}
#name{
	background-image: url("images/login/user.svg");
	background-size: 20px 20px;
	background-position: 14px 14px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url("images/login/user.svg");
	background-size: 20px 20px;
	background-position: 14px 14px;
	background-repeat: no-repeat;
}

#password{
	background-image: url("images/login/pass.svg");
	background-size: 20px 20px;
	background-position: 14px 14px;
	background-repeat: no-repeat;
}

#password:focus{
	background-image: url("images/login/pass.svg");
	background-size: 20px 20px;
	background-position: 14px 14px;
	background-repeat: no-repeat;
}

input:hover, 
input:focus  {
	background-color:white;
}

/* スクリーンサイズ 幅 768px 以下で適用する設定・上から継承したスタイルを上書き */

@media only screen and (max-width:768px) {
    
    .main {
        width: 100vw;
        height: 65vh;
    }

    .box_title {
        display: block;
        width: 92vw;
        height: 30%;
        padding-left: 8vw;
        padding-top: 4vw;
    }

    .box_title p {
        font-size: 2vw;
    }

    .box_title h1 {
        font-size: 6vw;
    }

    .meidenlogo_tab {
        display: block;
        width: 88vw;
        text-align: right;
        padding-right: 4vw;
    }

    .box_img {
        height: 62%;
    }

    .box_copyright {
        display: none;
    }

    .meidenlogo {
        display: none;
    }

    .meidenlogo_mob {
        display: none;
    }
    
    
    .side {
        width: 100vw;
        height: 35vh;
    }

    .side_box {
        width: 60%;
        height: 80%;
        margin: auto;
        margin-top: 5%;
    }

    .box_copyright_2 {
        display: block;
        width: 100%;
        text-align: center;
    }

    .box_copyright_2 p {
        display: block;
        color: #fff;
    }

    .box_copyright_2 br {
        display: none;
    }
}

/* スクリーンサイズ 幅 425px 以下で適用する設定・上から継承したスタイルを上書き */

@media only screen and (max-width:425px) {

    .main {
        height: 90vw;
    }
    
    .box_title {
        height: 30vw;
        padding-top: 2vw;
    }

    .box_title p {
        font-size: 3.5vw;
    }

    .box_title h1 {
        font-size: 10vw;
    }

    .box_img {
        height: 58vw;
    }

    .meidenlogo_tab {
        display: none;
    }
    
    .meidenlogo_mob {
        display: block;
        text-align: right;
        width: 88vw;
        padding-right: 4vw;
        padding-bottom: 4vw;
    }
    
    .m_off {
        display: none;
    }

    .side {
        height: calc(100vh - 90vw);
    }

    .side_box {
        width: 80%;
        height: 85%;
    }

    .box_copyright_2 {
        font-size: 1vw;
    }
    .box_copyright_2 br {
        display: inherit;
    }
}