@charset "utf-8";



html,
body {
	position: relative;
}



@media screen and (min-width:834px){
	
	body #wrap {
		opacity: 0;
		transition: opacity 800ms ease-out 500ms; 
	}
	body #bg {
		opacity: 0;
		transition: opacity 800ms ease-out 0ms;
	}
	
	body.fadein #wrap {
		opacity: 1;
	}
	body.fadein #bg {
		opacity: 1;
	}
	
	body.fadein.fadeout #wrap {
		opacity: 0;
		transition: opacity 400ms ease-out 0ms; 
	}
	body.fadein.fadeout #bg {
		opacity: 0;
		transition: opacity 400ms ease-out 400ms; 
	}


	body #wrap {
		position: absolute;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 10;
	}
	body #front {
		position: absolute;
		display: block;
		box-sizing: border-box;
		width: 800px;
		height: 560px;
		left: 50%;
		top: 50%;
		z-index: 20;
		padding: 50px;
		background: rgba(255,255,255,0.75);
		transform: translate(-50%, -50%);
	}
	body #front.compact {
		height: 380px;
	}
	
	body #front article {
		width: 600px;
		margin: 25px 0;
	}
	body #front article p {
		width: 600px;
	}
	
	#login-menu {
		margin: 0 0 20px 40px !important;
	}
	#front form {
		margin: 20px 0 0 40px !important;
	}
	#front .lang {
		position: absolute;
		right: 50px;
		top: 48px;
		margin: 0 !important;
	}
	#front .lang li {
		width: auto;
		vertical-align: middle;
	}
	#front .lang li + li {
		margin-left: 0;
	}
	#front .lang li + li:before {
		content: "";
		position: relative;
		display: inline-block;
		width: 1px;
		height: 13px;
		top: 1px;
		margin: 0 8px;
		background: #B2B2B2;
	}
	#front .lang li a {
		display: inline-block;
		padding: 0;
		color: #B2B2B2;
		border: none;
		background: none !important;
	}
	body[data-lang="ja"] #front .lang li.ja a,
	body[data-lang="en"] #front .lang li.en a,
	body[data-lang="cn"] #front .lang li.cn a {
		color: #404040;
	}


	#login-menu {
		width: 240px !important;
	}
	#login-menu li {
		padding: 0 !important;
	}
	
	#front .idpw input {
		width: 356px;
		padding: 6px 10px;
		border: none;
	}
	#front .submit input {
		width: 356px;
		padding: 6px;
		border-radius: 0;
		background: #000;
	}
	
	
	body #howto {
		position: absolute;
		width: auto;
		left: 50px;
		bottom: 30px;
		margin: 0;
	}
	body #howto dl {
		display: flex;
	}
	body #howto dl + dl {
		margin-top: 5px;
	}
	body #howto .ja dt {
		font-family: adobe-garamond-pro, "Ryumin Bold KL", serif;
	}
	
	
	
	#front .error {
		margin: 0 0 0 40px;
		line-height: 1.3;
	}
	#front div.error + div.error {
	}
	
	
	#front .confirm-view {
		margin: 50px 0;
	}
	
	
	#gohome a {
		padding: 15px 15px 13px;
		background: #000;
		border-radius: 0;
	}
	
	
	
	
	
	#bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 1;
		overflow: hidden;
	}
	#bg video {
		position: absolute;
		z-index: 1;
	}
	#bg .visual {
		display: none;
	}


}




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

	body #wrap {
		opacity: 0;
		transition: opacity 800ms ease-out 500ms; 
	}
	body #bg {
		opacity: 0;
		transition: opacity 800ms ease-out 0ms;
	}
	
	body.fadein #wrap {
		opacity: 1;
	}
	body.fadein #bg {
		opacity: 1;
	}
	
	body.fadein.fadeout #wrap {
		opacity: 0;
		transition: opacity 400ms ease-out 0ms; 
	}
	body.fadein.fadeout #bg {
		opacity: 0;
		transition: opacity 400ms ease-out 400ms; 
	}


	body #wrap {
		position: fixed;
		width: calc(100vw - 40px);
		height: auto;
		max-height: 78vh;
		z-index: 100;
		top: 50%;
		margin: 0 20px;
		overflow-y: scroll;
		transform: translateY(-50%);
		-webkit-overflow-scrolling: touch;
	}
	body #front {
		position: relative;
		display: block;
		box-sizing: border-box;
		z-index: 20;
		padding: 20px 15px 70px;
		background: rgba(255,255,255,0.75);
	}

	#front header img {
		width: 200px;
		height: auto;
	}
	body #front article {
		margin: 20px 0;
	}
	body #front article p {
		font-size: 13px;
		line-height: 2;
	}
	
	body #login-menu {
		width: auto;
		margin: 20px 0;
		text-align: center;
	}
	body #login-menu ul {
		display: block;
		text-align: center;
	}
	body #login-menu li {
		display: inline-block;
		width: 40%;
	}
	body #login-menu li:nth-child(1),
	body #login-menu li:nth-child(2) {
		padding: 0 !important;
		text-align: center;
	}


	body #front .idpw {
		width: auto;
	}
	#front .idpw input {
		box-sizing: border-box;
		width: 100%;
		padding: 6px 10px;
		border: none;
	}
	#front .submit input {
		box-sizing: border-box;
		width: 100%;
		padding: 8px;
		font-size: 14px;
		border-radius: 0;
		background: #000;
	}
	body #howto,
	#front #notice {
		display: none;
	}
	
	#front .lang {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 28px;
		margin: 0 !important;
		text-align: center;
	}
	#front .lang li {
		width: auto;
		vertical-align: middle;
	}
	#front .lang li + li {
		margin-left: 0;
	}
	#front .lang li + li:before {
		content: "";
		position: relative;
		display: inline-block;
		width: 1px;
		height: 13px;
		top: 1px;
		margin: 0 8px;
		background: #B2B2B2;
	}
	#front .lang li a {
		display: inline-block;
		padding: 0;
		color: #B2B2B2;
		border: none;
		background: none !important;
	}
	body[data-lang="ja"] #front .lang li.ja a,
	body[data-lang="en"] #front .lang li.en a,
	body[data-lang="cn"] #front .lang li.cn a {
		color: #404040;
	}

	body #front .password-reset {
		text-align: center !important;
	}



	#front .error {
		width: auto !important;
		margin: 0;
		line-height: 1.3;
	}
	#front div.error + div.error {
	}
	
	
	#front .confirm-view {
		margin: 50px 0;
	}
	
	
	#gohome a {
		padding: 15px 15px 13px;
		background: #000;
		border-radius: 0;
	}



	html, body {
		position: fixed;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	#bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 1;
		overflow: hidden;
	}
	
	#bg video {
		position: absolute;
	}
	#bg .visual {
		position: absolute;
		width: 100%;
		height: 100vh;
		z-index: 1;
		background-position: 50% 50%;
		background-size: cover;
		

		display: none;
	}

}





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