/* =========================================================
 * auth.css — login.html / logout.html 共通スタイル
 * 旧: login_style.css + logout_style.css を統合
 * ========================================================= */

/* ---------------------------------------------------------
 * login styles (旧: login_style.css)
 * --------------------------------------------------------- */

.login-wrapper {    
    margin-top: 5%;
    color: #343434;
}

.login-wrapper .form-signin {
    max-width: 450px;
    min-width: 375px;
    padding: 30px 38px;
    margin: auto;
    background-color: #eee;
    border-radius: 0.5rem;
    border: 1px solid rgba(0,0,0,0.1);  
}
.form-signin #usrmsg {
    display: none;
    text-align: center;
    font-size: 1rem;
    margin: 10px 0 0 0;
    border-radius: 0.5rem;
}
.form-signin #jsdisablemsg {
    text-align: center;
    font-size: 1rem;
    margin: 20px 0 0 0;
}
.form-signin .btn {
    border: 0.5px solid #88888887;
    border-radius: 4px;
    box-shadow: 0.5px 0.5px 0.5px #80808000;
}
.form-signin .btn:hover {
    opacity: 0.7;
}

.form-signin .btn .g_id_signin {
    position: relative;
}

.form-signin-head {
    max-width: 450px;
    min-width: 375px;
    text-align: center;
    margin: auto;
    margin-bottom: 10px;
}
.colorgraph {
    height: 6px;
    margin-bottom: 26px;
    border-top: 0;
    background: #c4e17f;
    border-radius: 6px;
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

.form-signin-select .btn {
    font-size: 1rem;
    color: inherit;
}
.form-signin-select .form-signin-sso #btnssoG {
    display: none;
}
.form-signin-select #btnmirai {
    display: inline-block;
    background: #15B29A;
    color: #ffffff;
    white-space: nowrap;
    padding: 6px 0px 6px 20px;
    text-align: left;
}
.form-signin-select #btnmirai .icon {
    background: url('../img/mirai.ico') transparent 0 50% no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
.form-signin-select #btnmirai .buttonText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 1rem;
    font-size: 1rem;
    font-weight: bold;
    font-family: 'Meiryo', sans-serif;
    text-align: left;
}
.form-signin-select #login-form-01 {
    display: inline-block;
    background: transparent;
    color: #444;
    white-space: nowrap;
    padding: 0px 0px 0px 0px;
    text-align: left;
    border: 0.5px solid transparent;
    box-shadow: 0.5px 0.5px 0.5px transparent;
}
.form-signin-select #login-form-01 .icon {
    background: url('../img/google_logo.png') transparent 0 50% no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
.form-signin-select #login-form-01 .buttonText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 1rem;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Meiryo', sans-serif;
    text-align: left;
}

.form-signin-select #login-form-02 {
    display: inline-block;
    background: #ffffff;
    color: #2f2f2f;
    white-space: nowrap;
    padding: 6px 0px 6px 20px;
    text-align: center;
}
.form-signin-select #login-form-02 .icon {
    background: url('../img/microsoft_logo.webp') transparent 0 50% no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
.form-signin-select #login-form-02 .buttonText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.3rem;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Meiryo', sans-serif;
    text-align: left;
}
.form-signin-select #login-form-03 {
    display: inline-block;
    background: white;
    color: #444;
    white-space: nowrap;
    padding: 0px 0px 0px 3px;
    text-align: center;
}
.form-signin-select #login-form-03 .icon {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%227%200%2017%2044%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15.7099491%2C14.8846154%20C16.5675461%2C14.8846154%2017.642562%2C14.3048315%2018.28274%2C13.5317864%20C18.8625238%2C12.8312142%2019.2852829%2C11.852829%2019.2852829%2C10.8744437%20C19.2852829%2C10.7415766%2019.2732041%2C10.6087095%2019.2490464%2C10.5%20C18.2948188%2C10.5362365%2017.1473299%2C11.140178%2016.4588366%2C11.9494596%20C15.9152893%2C12.56548%2015.4200572%2C13.5317864%2015.4200572%2C14.5222505%20C15.4200572%2C14.6671964%2015.4442149%2C14.8121424%2015.4562937%2C14.8604577%20C15.5166879%2C14.8725366%2015.6133185%2C14.8846154%2015.7099491%2C14.8846154%20Z%20M12.6902416%2C29.5%20C13.8618881%2C29.5%2014.3812778%2C28.714876%2015.8428163%2C28.714876%20C17.3285124%2C28.714876%2017.6546408%2C29.4758423%2018.9591545%2C29.4758423%20C20.2395105%2C29.4758423%2021.0971074%2C28.292117%2021.9063891%2C27.1325493%20C22.8123013%2C25.8038779%2023.1867451%2C24.4993643%2023.2109027%2C24.4389701%20C23.1263509%2C24.4148125%2020.6743484%2C23.4122695%2020.6743484%2C20.5979021%20C20.6743484%2C18.1579784%2022.6069612%2C17.0588048%2022.7156707%2C16.974253%20C21.4353147%2C15.1382708%2019.490623%2C15.0899555%2018.9591545%2C15.0899555%20C17.5217737%2C15.0899555%2016.3501271%2C15.9596313%2015.6133185%2C15.9596313%20C14.8161157%2C15.9596313%2013.7652575%2C15.1382708%2012.521138%2C15.1382708%20C10.1536872%2C15.1382708%207.75%2C17.0950413%207.75%2C20.7911634%20C7.75%2C23.0861411%208.64383344%2C25.513986%209.74300699%2C27.0842339%20C10.6851558%2C28.4129053%2011.5065162%2C29.5%2012.6902416%2C29.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: center;    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    width: 19px;
    height: 38.5px;
}
.form-signin-select #login-form-03 .buttonText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Meiryo', sans-serif;
    text-align: center;
}


.form-signin-select #login-form-04 {
    background-color: #f0776c;
}

.hr-text {
    text-align: center;
    margin: 30px 0 0;
    color: #aaa;
    overflow: visible;
}
.hr-text:after {    
    content: '\307E\305F\306F';
    display: inline-block;position: relative;
    top: -15px;
    padding: 0 10px;
    background: #eee;
    color: black;
    font-size: 18px;
}

.form-signin-body {
    display: none;
    padding-top: 0px;
}
.form-signin-body .form-control {
    text-align: center;
    margin: 15px 0;
    font-size: 1.1rem;
    border-radius: 0.5rem;
}
.form-signin-body #form-login {
    padding: 10px 0 0;
}
.form-signin-body #btchkinfo {
    text-align: center;
    margin: 3% 10% 0;
    width: 80%;
    font-size: 1.1rem;
    border-radius: 0.5rem;
}
.form-signin-body #login-form-return {
    background-color: #cdcdcd;
    font-size: 1.1rem;
}

input:focus::placeholder {
    color: transparent;
}

.login-wrapper .form-notice {
    max-width: 450px;
    min-width: 375px;
    height: auto;
    padding: 10px;
    margin: 20px auto;
    background-color: #fefefe;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    color: #888;   
    font-size: 1.1rem;
}

.form-notice p {
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.form-notice hr {
    margin-top: 2px;
    margin-bottom: 5px;
}

.form-notice-head {
    display: inline-block;
    white-space: nowrap;
}

.form-signin .loading {
    display: inline-block;
    vertical-align: sub;
}
.form-signin .loading #spinner {
    display: none;
}

.alert-warning{
	color: #330000;
	background-color: #ffdddd;
	border-color: #ffdddd;
}

.img-fluid {
	max-width: 100%;
	margin-bottom: 2rem;
}

.mobile {
	font-size:10px;
}

.form-notice #notice_text {
    color: #888; 
	resize: none;
    background-color: transparent;
    border-color: transparent;
}

.sso-btn-block {
    width: 297px;
    margin: 8px auto;
}

.form-signin-sso {
    position: relative;
    text-align: center;
}

/* ---------------------------------------------------------
 * logout styles (旧: logout_style.css)
 * --------------------------------------------------------- */

.wrapper {    
    margin-top: 8%;
    color: #343434;
}

.wrapper .form-head {
    max-width: 420px;
    min-width: 375px;
    text-align: center;
    margin: auto;
    margin-bottom: 10px;
}
.form-head .img-fluid {
    width: 100%;
    margin-bottom: 2rem;
    height: auto;
}

.wrapper .form-signout {
    max-width: 420px;
    min-width: 375px;
    min-height: 272px;
    padding: 30px 38px;
    margin: auto;
    background-color: #eee;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);  
}

.form-signout {
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
    font-family: 'Meiryo', sans-serif;
}

.form-signout-cont {
    background-color: #fff;
    padding: 24px 32px;
    border-radius: 6px;
    border: 1px solid darkred;
}
.form-signout-cont #msg {
    color: #555;
}

.form-signout-body .btn {
    border: 0.5px solid #888;
    border-radius: 6px;
    box-shadow: 0.5px 0.5px 0.5px grey;
    margin: 1.4rem 0;
    background-color: #eee;
    margin-bottom: 0;
    font-size: 0.9rem;
}
.form-signout-body .btn:hover {
    opacity: 0.7;
}