@charset "utf-8";

/* Header */
#logoArea {
	position: relative;
}

#logoArea img {
	max-height: 60px;
}

#barArea {
	position: relative;
	width: 100%;
	height: 40px;
	background-color: #009fe8;
}

#area_title {
	color: #FFF;
	font-size: 120%;
	line-height: 2.2;
	font-weight: bold;
	margin-left: 16px;
}

#languageArea {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -20px;
	width: 35%;
	max-width: 167px;
	height: 40px;
	background-color: #59c1f0;
	/* drop-down-button */
	background-image: url(../img/open_btn_language.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}

div#choose_language {
	color: white;
	margin-top: 0.5em;
	margin-left: 1em;
}

#current_language {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#language_selector {
	position: absolute;
	top: 40px;
	right: 0;
	width: 35%;
	max-width: 167px;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 50;
	display: none;
}

/* language element */
#language_selector li {
	display: block;
	padding: 0.5em 0;
}

/* language label */
#language_selector li div {
	color: white;
	padding-right: 1.5em;
	font-size: 1.3em;
	text-align: right;
	/* text smoothing */
	text-shadow: rgba(0,0,0,.04) 0 0 1px;
	-webkit-text-shadow: rgba(0,0,0,.04) 0 0 1px;
}

@media only screen and (max-width: 600px) {
	div#choose_language {
		margin-top: 0.8em;
		font-size: 0.9em;
	}

	#language_selector li div {
		padding-right: 1em;
		font-size: 1.1em;
	}

}

@media only screen and (max-width: 320px) {
	div#choose_language {
		margin-top: 1.1em;
		font-size: 0.8em;
	}

	#language_selector li div {
		padding-right: 0.7em;
		font-size: 0.9em;
	}

}

#alertArea {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 4px;
}

.alert {
	color: #e60012;
	font-size: 120%;
	line-height: 1.5;
}

/* wrap */
#wrap {
	width: 100%;
	overflow: hidden;
}

/* pc_nav */
#pc_nav {
	position: relative;
	width: 100%;
	max-width: 733px;
	margin: 0 auto;
	top: 180px;
	z-index: 10;
	display: none;
}

#left_btn_pc {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}

#right_btn_pc {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

/* tabHolder */
#tabHolder {
	position: relative;
	width: 100%;
	height: 420px;
}

/* tab common */
.slide_nav ul {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.slide_nav li {
	display: table-cell;
}

.nav_left,
.nav_right {
	cursor: pointer;
}

section h2 {
	display: block;
	width: 40%;
	margin: 0 auto;
	margin-top: 4px;
	padding-top: 12px;
	margin-bottom: 4px;
}

.cover_btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	opacity: 0.0;
}

/* Wi2 User */
#wi2user {
	display: block;
	position: absolute;
	top: 0;
	left: 0px;
	width: 90%;
	max-width: 600px;
	z-index: 10;
}

#wi2user .contents {
	position: relative;
	background-color: #66bcf1;
	height: 340px;
}

#wi2user .contents h2{
	padding: 0.2em;
	font-size: 2.4em;
	letter-spacing: 0.05em;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
}

/* wi2_form */
.wi2_form {
	width: 100%;
}

.wi2_form input {
	width: 90%;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #333;
	font-size: 135%;
	text-align: center;
	text-indent: 1em;
	margin-left: 5%;
	margin-right: 5%;
	box-sizing: border-box;
}

#wi2_id input {
	background-color: #ebebeb;
	background-image: url(../img/form_bg_id.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#wi2_pass input {
	background-color: #ebebeb;
	background-image: url(../img/form_bg_pass.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.wi2_form input::-webkit-input-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.wi2_form input:-ms-input-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.wi2_form input:-moz-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.wi2_form input::-moz-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.forgetArea {
	text-align: center;
}

.forget {
	color: #FFF;
	font-size: 95%;
	text-decoration: none;
	line-height: 2;
	display: inline-block;
	margin-top: 4px;
	margin-bottom: 4px;
}

ul.btnArea {
	display: table;
	table-layout: fixed;
	width: 85%;
	margin: 0 auto;
	margin-bottom: 12px;
}

.btnArea li.registration {
	display: table-cell;
	text-align: center;
	vertical-align: bottom;
	width: 44%;
	padding-right: 10px;
}

.btnArea li.login {
	display: table-cell;
	text-align: center;
	vertical-align: bottom;
	width: 56%;
	padding-left: 10px;
}

#registration_btn_wi2 {
	max-width: 180px;
	max-height: 44px;
	white-space: nowrap;
	background-color: #2382e2;
	border-style: solid;
	border-color: #94dfff;
	border-width: 2px;
	border-radius: 5px;
	padding: 0.33em;
	font-size: 1.0em;
	font-weight: bold;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
	/* text smoothing */
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;

	cursor: pointer;
}

#registration_btn_wi2 a {
	text-decoration: none;
	color: #fff000;
}

#login_btn_wi2 {
	max-width: 232px;
	max-height: 56px;
	background-color: #2382e2;
	border-style: solid;
	border-color: #94dfff;
	border-width: 2px;
	border-radius: 5px;
	padding: 0.33em;
	font-weight: bold;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
	font-size: 1.5em;
	/* text smoothing */
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;

	cursor: pointer;
}

p.note {
	color: #FFF;
	font-size: 90%;
	text-decoration: none;
	line-height: 1.2;
	margin-left: 6%;
	/*text-indent:-1em;*/
	padding-bottom: 40px;
}

p.note a {
	color: #FFF;
	line-height: 1.2;
}

#chara_wi2 {
	position: absolute;
	right: -30px;
	bottom: -20px;
	pointer-events: none;
}

/* Guest */
#guest {
	display: block;
	position: absolute;
	top: 0;
	left: 200px;
	width: 90%;
	max-width: 600px;
	z-index: 20;
}

#guest .contents {
	position: relative;
	background-color: #67d178;
	background-size: cover;
	min-height: 340px;
}

#guest .contents h2{
	padding: 0.2em;
	font-size: 2.4em;
	letter-spacing: 0.1em;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
}

.guest_form h3 {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.guest_form h3 span {
	display: table-cell;
	width: 100%;
	height: 40px;
	background-color: #069955;
	color: #fff000;
	font-size: 85%;
	font-weight: bold;
	line-height: 1.1;
	text-indent: 0.5em;
	vertical-align: middle;
	padding-right: 28px;
	background-image: url(../img/open_btn_gu.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
}

.guest_input_data {
	display: none;
	overflow: hidden;
	padding-top: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.guest_form {
	width: 100%;
}

.guest_form input {
	width: 90%;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #333;
	font-size: 135%;
	text-align: left;
	text-indent: 0.5em;
	margin-left: 5%;
	margin-right: 5%;
	box-sizing: border-box;
}

.guest_form ul {
	display: table;
	table-layout: fixed;
	width: 96%;
}

.guest_form li {
	display: table-cell;
	vertical-align: middle;
}

.guest_form  .g_input {

}

.guest_form  .g_btn {
	width: 100px;
}

#guest_mail input {
	background-color: #ebebeb;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#guest_code input {
	background-color: #ebebeb;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.guest_form input::-webkit-input-placeholder {
	color: #b3b3b3;
	font-size: 0.6em;
	font-weight: bold;
	text-align: left;
	line-height: 2.6;
}

.guest_form input:-ms-input-placeholder {
	color: #b3b3b3;
	font-size: 0.6em;
	font-weight: bold;
	text-align: left;
	line-height: 2.6;
}

.guest_form input::-moz-placeholder {
	color: #b3b3b3;
	font-size: 0.6em;
	font-weight: bold;
	text-align: left;
	line-height: 2.6;
}

.guest_form input:-moz-placeholder {
	color: #b3b3b3;
	font-size: 0.6em;
	font-weight: bold;
	text-align: left;
	line-height: 2.6;
}

div.guest_login_buttons {
	border-radius: 5px;
	padding: 0.33em;
	font-weight: bold;
	background-color: #00b420;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
	/* text smoothing */
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

p.msg {
	color: #FFF;
	font-size: 100%;
	text-decoration: none;
	line-height: 1;
	display: block;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 15px;
}

p.msg_left {
	color: #FFF;
	font-size: 95%;
	text-decoration: none;
	line-height: 1.6;
	display: block;
	text-align: left;
	margin-top: 10px;
	margin-left: 4%;
}

#guest_mail #guest_mail_txt2 {
	font-size: 60%;
}

#send_btn_guest,
#login_btn_guest {
	cursor: pointer;
}

#chara_gu {
	position: absolute;
	right: -40px;
	bottom: -20px;
	pointer-events: none;
}

#sns_login h3 {
	margin: 30px 0 10px;
}

#sns_login ul {
	display: table;
	table-layout: fixed;
	width: 90%;
	margin: 0 auto;
}

#sns_login li {
	display: table-cell;
	text-align: center;
	padding: 5px;
}

p.sns_note {
	color: #FFF;
	font-size: 90%;
	text-decoration: none;
	line-height: 1.6;
	margin-left: 6%;
	margin-right: 6%;
}

/* Roaming */
#roaming {
	display: block;
	position: absolute;
	top: 0;
	left: 300px;
	width: 90%;
	max-width: 600px;
	z-index: 30;
}

#roaming .contents {
	position: relative;
	background-color: #f48285;
	height: 340px;
}

#roaming .contents h2{
	padding: 0.2em;
	font-size: 2.4em;
	letter-spacing: normal;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
}

.roaming_form {
	width: 100%;
}

.roaming_form select {
	width: 90%;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #333;
	font-size: 75%;
	text-align: center;
	text-indent: 1em;
	margin-left: 5%;
	margin-right: 5%;
	box-sizing: border-box;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #ebebeb;
}

.roaming_form input {
	width: 90%;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #333;
	font-size: 135%;
	text-align: center;
	text-indent: 1em;
	margin-left: 5%;
	margin-right: 5%;
	box-sizing: border-box;
}

#roaming_id {
	position: relative;
}

#roaming_id input {
	background-color: #ebebeb;
	background-image: url(../img/form_bg_id.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	line-height: 1em;
	top: 0;
	left: 0;
	z-index: 1;
}

.roaming_form span {
	width: 90%;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 135%;
	margin-left: 5%;
	margin-right: 5%;
	box-sizing: border-box;
}

#roaming_id span.mark-realm {
	padding: 6px 5px;
	text-align: right;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	color: #888888;
	line-height: 1em;
	height: 1px;
	visibility: hidden;
}

#roaming_pass input {
	background-color: #ebebeb;
	background-image: url(../img/form_bg_pass.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.roaming_form input::-webkit-input-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.roaming_form input:-ms-input-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.roaming_form input::-moz-placeholder {
	color: #b3b3b3;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}

.roaming_form ul.btnArea {
	display: table;
	table-layout: fixed;
	width: 45%;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 20px;
}

.roaming_form .btnArea li.login {
	display: table-cell;
	text-align: center;
	vertical-align: bottom;
	width: 100%;
}

#login_btn_roaming {
	max-width: 232px;
	max-height: 56px;
	background-color: #c93235;
	border-radius: 5px;
	padding: 0.33em;
	font-weight: bold;
	color: #fff000;
	vertical-align: middle;
	text-align: center;
	font-size: 1.5em;
	/* text smoothing */
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;

	cursor: pointer;
}

#chara_ro {
	position: absolute;
	right: -30px;
	bottom: -20px;
	pointer-events: none;
}

/* banner */
#bannerArea {
	position: relative;
	width: 100%;
	padding: 0 5%;
	text-align: center;
	box-sizing: border-box;
}

/* footer */
#footerArea {
	position: relative;
	width: 95%;
	margin: 0 auto;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 16px;
}

#footerArea li {
	display: inline-block;
	font-size: 95%;
	color: #808080;
	line-height: 2.6;
}

#footerArea li a {
	display: inline-block;
	font-size: 95%;
	text-decoration: none;
	color: #808080;
	line-height: 2.6;
	margin-left: 4px;
	margin-right: 4px;
}

#footerArea li a:hover {
	display: inline-block;
	font-size: 95%;
	text-decoration: none;
	color: #808080;
	line-height: 2.6;
}

/* copyright */
#copyrightArea {
	position: relative;
	width: 100%;
	text-align: center;
	height: 72px;
	background-color: #009fe8;
	display: table;
}

#copyrightArea p {
	display: table-cell;
	vertical-align: middle;
	color: #FFF;
	font-size: 80%;
}

/* PC sized */
@media screen and (min-width: 980px) {
	body {
		font-size: 110%;
	}
	#pc_nav {
		display: block;
	}
}

@media only screen and (max-width: 600px) {
	div#choose_language {
		margin-top: 0.8em;
		font-size: 0.9em;
	}

	#language_selector li div {
		padding-right: 1em;
		font-size: 1.1em;
	}

	#wi2user .contents h2 {
		font-size: 2.1em;
	}

	img.chara {
		/* original height: 120px */
		height: 105px;
	}

	#registration_btn_wi2 {
		font-size: 0.9em;
	}

}

@media only screen and (max-width: 320px) {
	div#choose_language {
		margin-top: 1.1em;
		font-size: 0.8em;
	}

	#language_selector li div {
		padding-right: 0.7em;
		font-size: 0.9em;
	}

	#wi2user .contents h2,
	#guest .contents h2,
	#roaming .contents h2 {
		font-size: 1.8em;
	}

	#registration_btn_wi2 {
		font-size: 0.8em;
	}

	#login_btn_wi2,
	#login_btn_roaming,
	#login_btn_wi2,
	#login_btn_roaming,
	#logout_btn_guest,
	#logout_btn_roaming,
	#logout_btn_wi2,
	#mypage_btn_wi2,
	#logout_btn_wi2,
	#retry_btn_guest,
	#retry_btn_roaming,
	#reconnect_btn_guest,
	#wi2home_btn_guest {
		font-size: 1.0em !important;
	}

	.guest_form input::-webkit-input-placeholder {
		font-size: 0.4em;
	}

	.guest_form input:-ms-input-placeholder {
		font-size: 0.4em;
	}

	.guest_form input::-moz-placeholder {
		font-size: 0.4em;
	}

	.guest_form input:-moz-placeholder {
		font-size: 0.4em;
	}

	#roaming_id span.mark-realm {
		font-size: 1em;
	}

	img.chara {
		/* original height: 120px */
		height: 90px;
	}
}