@charset "utf-8";

@font-face {
    font-family: 'Sawarabi Gothic';
    src: url('../font/SawarabiGothic-Regular.woff') format('woff');
    src: url('../font/SawarabiGothic-Regular.eot') format('eot');
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans';
    src: url('../font/SourceSansPro-Regular.ttf') format('ttf');
    font-display: swap;
}

body, .l-container {
    margin: 0;
}

body {
    display: block;
    width: 100%;
    height: auto;
    font-family: "さわらびゴシック", sans-serif;
}

/* コンテンツ */
.l-container{
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: center;
    min-width: 1100px;
    height: 100%;
    min-height: unset;
    margin-right: auto;
    margin-left : auto;
    padding: 0;
    box-sizing: border-box;
    background-color:#FFFFFF;
}

@media screen and (max-width: 1600px) {
    .l-container{
        min-width: unset;
        min-height: unset;
        overflow-x: hidden;
        overflow-y: scroll;
    }
}

@media screen and (max-width: 768px) {
    .l-container{
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        box-sizing: border-box;
    }
}

@supports (-webkit-touch-callout: none){
    .l-container{
        min-height: -webkit-fill-available;
    }

}

/* /コンテンツ */

/* 左側BG */
.bg-panel {
    position:relative;
    display: flex;
    flex-flow: column;
    flex-basis: 60%;
    align-items: center;
    justify-content: center;
    width: min(50vw, 100%);
    max-width: 100%;
    height: 100vh;
    margin: 0;
    border: none;
    background-image: url(../img/background.jpg);
    background-clip: border-box;
    background-repeat:  no-repeat;                         /* 画像の繰り返しを指定  */
    background-size: cover;
    background-position: 60% 80%;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .bg-panel{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 400%;
        background-position: 90% 70%;
        overflow: hidden;
    }
    .bg-panel::after{
        display: block;
    }
}

.bg-layer {
    margin: 0;    
    border: none;
    height: 100%;
    width: 1055px;
    /* background-color: #386385;
    opacity:40%; */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* /左側BG */

/* 左側アイキャッチ文章 */
.caption1, .caption2 {
    position: relative;
    margin-bottom: min(8vh, 5em);
    padding: 0 1em;
    text-align: center;
    color: #FFFFFF;
}

.caption1 p span,
.caption2 p span {
    display: inline-block;
}

.caption1 {
    /* top: 308px; */
    /* left: 175px; */
    font-size: 37px;
    width: fit-content;
    text-align: center;
    /* 20220222追加 */
    font-size: clamp(20px, 2.2vw, 37px);
}

.caption1 p {
    text-align: left;
}

.caption2 {
    font-size: 20px;
    text-align:center;
}

@media screen and (max-width: 768px) {
    .caption1,
    .caption2{
        display: none;
    }
}

/* /左側アイキャッチ文章 */

/* ログインフォーム枠 */
#form { 
    position: relative;
    display: flex;
    width: 50vw;
    max-width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    align-self: center;
    background-color: #fff;
    flex-direction: column;
    margin: 0;
}

@media screen and (max-width: 768px) {
    #form{
        padding: 5vh 5vw 4vh;
        border-radius: 36px;
	width: 80vw;
        
    }
}

@media screen and (max-width: 600px) {
    #form{
        width: 85vw;
        height: 85%;
        max-height: min(100%, 640px);
        flex-basis: unset;
        padding-top: clamp(20px, 6.5vh, 64px);
    }
}

@media screen and (max-height: 600px) {
    #form{
        height: 85%;
        width : 80%;
        margin: 0;
        padding: 5vh 5vw 2vh;
    }
}

/* /ログインフォーム枠 */

/* ログインフォーム ロゴ */
.login-logo {
    height: 113px;
    margin-top: 10px;
    margin-left: 269px;
    margin-bottom: 23px;
    width: clamp(500px, 30vw, 500px);
    object-fit: contain;                                        /* 画像全体を表示 */
    margin: 0 auto;
    -webkit-appearance: none;
}

@media screen and (max-width: 768px) {
    .login-logo{
        width: clamp(100px, max(35vw, 155px), 278px);
	margin-bottom: 15%;
    }
}

@media screen and (max-height: 600px) {
    .login-logo{
        width: 45%;
	margin-top: -5px;
	margin-bottom: 0%;
    }
}


/* エラー文章 */
.has-error .form-control {
    box-shadow: none!important;
    border-color: red;
}
.has-error .form-control:focus {
    border-color: red;
}
.help-block {
    padding-left: 5px;
    font-size: 15px;
    color: #E8353E !important;
    font-size: 12px;
}


.error-icon ::before{
    content: "";           /* 疑似要素に必須 */
    width: 18px;           /* アイコンの横幅 */
    height: 18px;          /* アイコンの高さ */
    background: url(../img/information-filled.png) no-repeat center center / auto 100%;
    display: inline-block; /* 高さを持たせるためにインラインブロック要素にする */
    position: absolute;    /* 相対位置に指定 */
    left: -25px;
    position: relative;
    left: -0.5em;
    vertical-align: top;
}

/* ロゴ直下 */
.login-logo+.form-group.has-error {
    height: fit-content;
}
.login-logo+.form-group.has-error img{
    position: absolute;
    top: 50%;
    left: calc(50% - 16em);
    transform: translateY(-50%);
    height: 1.5em;
    width: 1.5em;
    object-fit: contain;
}
@media (max-width: 768px) {
    
    .login-logo+.form-group.has-error img{
        left: 0;
    }
}
.login-logo+.form-group.has-error .help-block{
    height: fit-content;
    min-height: 2em;
    padding-left: 2em;
}
/* /エラー文章 */


.login-title {
    margin-top: 53px;
    font: normal normal bold 35px/21px Source Sans Pro;
    letter-spacing: 7px;
    color: #3D7271;
    line-height: 1;
}
.login-sub-title {
    margin-top: 14px;
    font: normal normal normal 18px/13px Source Sans Pro;
    letter-spacing: 0px;
    color: #4D4F5C;
    opacity: 0.5;
}

/* ログインフォーム 入力要素 */

input[type="text"], [type="password"] {
    font-size: 15px;
    border: unset;
    border-radius: 0;
    border-bottom: 2px solid #E9E9F0;
    margin-top: 23px;
    margin-left: 212px;
    width: 100%;
    height: 3.5em;
    margin: min(1vh, 1.5em) auto;
    box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus{
    box-shadow: none;
}

@media screen and (max-width: 768px) {
    input[type="text"], [type="password"] {
        height: 3.5em;
        line-height: 3.5em;
    }
}



.user-box, .pw-box, .pw-confirm-box  {
    display: inline-block;
    position: relative;    /* 基準値とする */
    width: min(50%, 30em);
}

.user-box{
    margin-top: calc(1.2em + 5px + 8px );                      /* エラーメッセージ分の余白を作る */
}

.has-error .user-box{
    margin-top: 0;                                              /* エラーメッセージ分の余白を消す */
}

.pw-eye {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .user-box,
    .pw-box,
    .pw-confirm-box{
        width: 100%;
    }
    
    .user-box input,
    .pw-box input,
    .pw-confirm-box input{
        margin-top: 0;
        font-size: 14px;
    }
    
    .user-box::before,
    .pw-box::before,
    .pw-confirm-box::before{
        top: calc(100% / 3);
    }
}

/* /ログインフォーム 入力要素 */

/* ログインフォーム パスワード忘れ */
.pw-forgot-link p {
    color: #43425D;
    font-size: 15px;
    margin-top: 28px;
    margin-left: 352px;
    text-decoration:underline;
    text-decoration-color: #43425D;
    text-underline-offset:0.5em;
    margin: 64px auto 77px 0;
}

@media screen and (max-width: 768px) {
    .pw-forgot-link p{
        font-size: 14px;
        margin: 0.5em auto 50px 0;

    }
}
@media screen and (max-height: 600px) {
    .pw-forgot-link p{
        font-size: 14px;
        margin: 0.5em auto 30px 0;

    }
}

/* ログインフォーム ログインボタン */

button[type="submit"] {
    position: relative;
    margin-top: 15px;
    margin-left: 311px;
    margin-bottom: 23px;
    width: 209px;
    max-width: 209px;
    height: 50px;
    background: #51A4A1;
    border-radius: 4px;
    opacity: 1;
    border: none;
    color: #FFFFFF;
    font-size: 15px;
    margin: 0;
    transition: background-image .4s;
    -webkit-transition: background-color .4s;
    -o-transition: background-color .4s;
    -moz-transition: background-color .4s;
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
    transform: translateZ(0);     /* 上記filterを使う場合GPU使用を強制しないとsafariのみバグる */
}

button[type="submit"]:hover  {

    background-image: linear-gradient(to right, #5DA0B4, #5893AE);
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.32));
    
}

@media screen and (max-width: 768px) {
    button[type="submit"] {
        width: 100vw;
        max-width: 160px;
        height: 4em;
        font-size: 14px;
    }
}

@media screen and (max-width: 512px){
    button[type="submit"] {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 4em;
        font-size: clamp(12px, 3vw, 16px);
    }
}
@media screen and (max-height: 600px){
    button[type="submit"] {
        display: flex;
        justify-content: center;
        align-items: center;
	width:150px;
        height: 5em;
        font-size: clamp(12px, 3vw, 16px);
	margin-top: 0.5em;
	margin-bottom: 0.5em;

    }
}

.reset-logo {
    height: 98px;
}
.reset-title {
    font: 18px/24px Sawarabi Gothic;
    color: #51A4A1;
    margin-top: 33px;
}
.lead {
    font: 15px/25px Source Sans Pro;
    color: #43425D;
    margin-top: 61.77px;
}
/* パスワード忘れフォーム　入力要素 */
.email-box  {
    display: inline-block;
    position: relative;    /* 基準値とする */
    width: min(50%, 30em);
    margin-top: calc(1.2em + 5px + 8px );                      /* エラーメッセージ分の余白を作る */
}

/* パスワード忘れフォーム　入力要素 */
input[type="email"] {
    font-size: 15px;
    border: unset;
    border-radius: 0;
    border-bottom: 2px solid #E9E9F0;
    margin-top: 23px;
    margin-left: 212px;
    width: 100%;
    height: 3.5em;
    margin: min(1vh, 1.5em) auto;
    box-shadow: none;
}
input[type="email"]:focus {
    box-shadow: none;
}

/* パスワード忘れフォーム ログインリンク */
.login-link p {
    color: #43425D;
    font-size: 15px;
    margin-top: 28px;
    margin-left: 352px;
    text-decoration:underline;
    text-decoration-color: #707070;
    text-underline-offset:0.5em;
    margin: 64px auto 77px 0;
}