@charset "utf-8";
/*

　login.css

*/


#login_contents {
	max-width:1280px;
	margin:auto auto;
	padding:0 1.0rem;
}


/******************************************************************

     login

******************************************************************/

#login {
	margin:auto 2.0rem;
	font-size:1.4rem;
	display:flex;
	flex-wrap:wrap;
	gap: 0 30px;
}

#login h3 {
	width:100%;
}

#login h4 {
	font-size:1.6rem;
}

#login .tabs {
	width:100%;
}

#login .tab_content {
	flex:50%;
	width:calc(50% - 15px);
	padding:1.0rem;
}



#login article {
	height:100%;
	margin:1.0rem 0;
	padding:3.0rem;
	border-radius:10px;
	background-color:#F0F0F0;
}

#login article ul.support {
	border-radius:8px;
	margin:1.0rem 0;
	padding:1.0rem 0;
}

#login article ul.support li {
	margin:0 0 1.0rem 0;
}

#login article ul.support li a {
	display:inline-block;
	background-color:#CCC;
	border-radius:6px;
	padding:0.5rem 1.0rem;
	color:#333;
}

#login article ul.support li a:hover {
	background-color:#999;
	color:#FFF;
}

#login .general_form {
	width:90%;
	margin:auto auto;
}

#login .general_form .btn_area_center {
	max-width:100%;
	margin:2.0rem auto 0 auto;
}

#login .general_form input {
	width:100%;
	max-width:500px;
}

#login .general_form input[type="checkbox"] {
	width:100%;
	width:22px;
	height:22px;
}



#login .general_form input[type="submit"] {
	width:300px;
	padding:1.75rem;
	margin:auto auto;
}

#login i {
	vertical-align:central;
	font-size:1.8rem;
}



/*** タブ切り替え ***/

#login .tabs input[name="tab_switch"] , #login .tabs input[name="tab_switch"] + label {
	display:none;
}



#login .tabs input:checked + .tab_label::after {
	display:none;
}

#login .tabs #tab01_content ,#login .tabs #tab02_content  {
	display:block;
}









/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/

 /*    タブレット   */

/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/


@media (min-width: 768px) and (max-width:1024px) {


#login {
	margin:auto auto;
}

#login article {
	padding:3.0rem 0;
}

#login article h4 {
	padding:0 0 0 2.0rem;
}

#login .general_form input[type="submit"] {
	max-width:100%;
}

#login .general_form input[type="text"] , #login .general_form input[type="password"] {
	max-width:400px;
}



}








/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/


    /*スマートフォントサイズ*/


/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/

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


#login {
	margin:auto 0;
	font-size:1.4rem;
}

#login article {
	width:100%;
	margin:1.0rem 0;
	padding:3.0rem 1.0rem;
	border-radius:10px;
	background-color:#F0F0F0;
}

#login article {
	background-color:#F0F0F0;
}

#login article.login_01 {
	border-radius:0 0 10px 10px;
}

#login article.login_02 {
	border-radius:0 0 10px 10px;
}

#login .general_form {
	width:100%;
}

#login .general_form form {
	padding:1.0rem 1.0rem;
}





/*** タブ切り替え ***/

#login .tabs {
	margin:1.0rem 0 0 0;
}



#login .tabs input[name="tab_switch"] + label {
	display:flex;
	line-height:1.5;
	padding:1.5rem;
}

#login .tabs input[name="tab_switch"] + label[for="tab01"] {
	width:50%;
	border:0;
	border-radius:10px 0 0 0;
}

#login .tabs input[name="tab_switch"] + label[for="tab02"] {
	width:50%;
	border:0;
	border-radius:0 10px 0 0;
}



#login .tabs input[name="tab_switch"] + label.tab_label {
	flex:none;
	text-align:left;
}


#login .tabs #tab01_content ,#login .tabs #tab02_content  {
	display:none;
}


/***/
/* コンテンツの内容が一つしかなく、タブの必要がないとき */

#login .tabs .tab_content:only-child {
	display:block!important;
}

#login .tabs .tab_content:only-child article.login_02 {
	border-radius:10px;
}

/*****************************/


#login .tabs input#tab01:checked ~ #tab01_content, #login .tabs input#tab02:checked ~ #tab02_content {
	display: block;
}

#login .tabs input + .tab_label {
	background-color:#777;
	color:#FFF;
}

#login .tabs input + label.tab_label span {
	line-height:1.5;
	padding:0;
	height:auto;
}

#login label.tab_label span small.sp_view {
	font-size:1.6rem;
}


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

#login .tabs input + label.tab_label span {
	font-size:1.25rem;
}

}

#login .tabs input:checked + .tab_label {
	background-color:#F0F0F0;
	opacity:1.0;
	border:none;
	color:#111;
}

#login .tabs input:checked + .tab_label span i {
	color:#D5000C;
}







#login .tab_content {
	padding:0;
}

#login .tab_content article {
	margin:0;
}

#login .article .general_form {
	width:100%;
}

#login article .general_form input[type="submit"] {
	max-width: 100%;
    padding: 1.75rem;
    margin: auto auto;
}




}