/* exam定義を打ち消し */
/* header高さ 40px; */
/* footer高さ 44px; */
body {
    margin: 0;
}
#contents {
    margin: 0;
    padding: 0;
}
#contents #main {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ログイン画面CSS */
.container {
	padding-bottom: 44px;
    position: relative;

    display: flex;
    flex-direction: column;
}

/*
	すまほ
*/
.container .bg-upper {
    display: none;
}
.container .bg-lower {
    display: none;
}
.container .wrapper {
    width: 100%;
    background-color: rgb(253, 134, 40);
}
.container .wrapper h2 {
    padding-top: 30px;
    text-align: center;
    margin-bottom: 40px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 3px rgb(100, 100, 100);
}

/* ログイン画面 入力欄 */
.container .wrapper .l-window {
    background-color: rgb(255, 240, 222);

    padding: 20px;
    display: block;
}
.container .wrapper .l-window .lw-left {
    width: 100%;
    margin-bottom: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ログイン画面 入力欄 */
.container .wrapper .l-window .lw-left form {
    width: 100%;
}
.container .wrapper .l-window .lw-left .input {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.container .wrapper .l-window .lw-left .input input {
    padding: 3px 3px;
    width: calc(100% - 6px);
}
.container .wrapper .l-window .lw-left .submit {
    display: flex;
    justify-content: center;
}
.container .wrapper .l-window .lw-left .submit input[type="submit"] {
    width: 70%;
    color: rgb(255, 255, 255);
    background-color: rgb(253, 134, 40);
    background-image: none;
    border: none;
}
.container .wrapper .l-window .lw-left .input #password-wrapper {
    position: relative;
}
.container .wrapper .l-window .lw-left .input #password-wrapper #view {
    position: absolute;
    right: 10px;
}

/* ログイン画面 説明欄 */
.container .wrapper .l-window .lw-right {
    padding: 20px;
    width: calc(100% - 40px);

    background-color: rgb(255, 255, 255);
    border-radius: 5px;
}
.container .wrapper .l-window .lw-right h3 {
    color: rgb(253, 134, 40);
    text-align: center;
}
.container .wrapper .l-window .lw-right dl {
    font-size: 12px;
}
.container .wrapper .l-window .lw-right dl dt {
    color: rgb(253, 134, 40);
    text-decoration: underline;
}
.container .wrapper .l-window .lw-right dl dd {
    color: rgb(100, 100, 100);
    line-height: 1.2rem;
}

/* 情報欄 */
.container .wrapper .l-etc {
	font-size: 12px;
	padding: 10px;
	background-color: rgb(239, 239, 239);
}
.container .wrapper .l-etc .le-left {

}
.container .wrapper .l-etc .le-right {

}

/*
	ぱそこん	メディアクエリー: 720px
*/
@media screen and (min-width: 720px) {
    .container .bg-upper {
        display: block;
        height: 300px;
        background-color: rgb(253, 134, 40);
    }
    .container .bg-lower {
		height: calc(100vh - 300px - 40px - 44px);
        display: block;
        background-color: rgb(239, 239, 239);
        flex-grow: 1;
    }
    .container .wrapper {
        width: 720px;
        max-width: 90%;
        background-color: initial;

        position: absolute;
        top: 60px;
        left: 50%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 05);
    }
    .container .wrapper h2 {
        padding-top: 0;
    }
    .container .wrapper .l-window {
		margin-bottom: 10px;
        padding: 20px 20px 20px 40px;
		box-shadow: 2px 2px 3px rgb(100, 100, 100);
        display: flex;
    }
    .container .wrapper .l-window .lw-left {
        width: 46%;
    }
    .container .wrapper .l-window .lw-left .input,
    .container .wrapper .l-window .lw-left .submit {
        padding: 0 40px 0 0;
    }

    /* ログイン画面 説明欄 */
    .container .wrapper .l-window .lw-right {
        width: 54%;
    }

    /* 情報欄 */
    .container .wrapper .l-etc {
        display: flex;
        width: 100%;
    }
    .container .wrapper .l-etc .le-left {
        width: 46%;
        font-size: 12px;
    }
    .container .wrapper .l-etc .le-right {
        width: 54%;
        font-size: 12px;
    }
}