@charset "utf-8";

/*===Header===*/
#header {
	/* padding: 0.3em 0.4em 0.3em 0; */
}
#header div.WGS_logo_title {
	/* float: left; */
	min-width: calc(94px + 3em);
}
#header p.WGS_header_title {
	font-size: 1.2em;
	color: #666666;
	/* padding-left: 11px; */
}
/*---Step Bar---*/
#header ul.WGS_steps {
	/* float: left; */
	/* margin-left: 11px; */
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
#header ul.WGS_steps li {
	display: inline-block;
	position: relative;
	margin-left: 2px;
	margin-right: 2px;
	background-color: #cccccc;
	border-radius: 100%;
	width: 18px;
	height: 18px;
	color: #ffffff;
	text-align: center;
	z-index: 2;
}
#header ul.WGS_steps li:before {
	content: "";
	position: absolute;
	top: 49%;
	/* left: -8px; */
	background-color: #cccccc;
	height: 1px;
	width: 8px;
}
#header ul.WGS_steps li.done {
	background-color: #cc0000;
	z-index: 3;
}
#header ul.WGS_steps li.done:before {
	background-color: #cc0000;
	z-index: 1;
}
#header ul.WGS_steps li:first-child:before {
	display: none;
}

/* FAQ */
#header p.WGS_faq {
	/* margin: 0.5em 0.5em 0 1em; */
	/* padding-right: 0; */
}

/*===Contents===*/
#contents {
	width: 100%;
	padding-top: 0;
}
#contents p {
	margin-bottom: 0.5em;
}
#contents span.WGS_strong_b {
	/* font-weight: bold; */
}
#contents span.WGS_step_num {
	display: inline-block;
	background-color: #cc0000;
	border-radius: 100%;
	width: 1.45em;
	height: 1.45em;
	color: #ffffff;
	text-align: center;
}

/*---Step title---*/
#contents h1.WGS_h1 {
	display: table;
	margin: 0.2em 0.5em 0.3em 0.5em;
	font-size: 1.6em;
	font-weight: normal;
	vertical-align: top;
}
#contents h1.WGS_h1 span.WGS_step_title {
	display: table-cell;
}
#contents h1.WGS_h1 span.WGS_step_num_wrap {
	display: table-cell;
	width: 1.8em;
}

/*---WGS contents---*/
#contents div.WGS_contents {
	position: relative;
	min-height: 300px;
	border-top: 1px solid #696969;
	border-bottom: 1px solid #696969;
}
#contents div.WGS_contents div.WGS_step_prepare,
#contents div.WGS_contents div.WGS_step_connect {
	margin: 0.7em 30px;
}

/*---Detail---*/
#contents div.WGS_detail {
	width: 220px;
	margin: 0 auto;
}
#contents div.WGS_setup_step div.WGS_detail p.WGS_lead ~ p.WGS_lead { /* from 24A-EP */
	margin-top: 1em;
}
#contents div.WGS_detail p.WGS_step_note {
	font-size: 0.7em;
}
#contents div.WGS_detail ol.WGS_step li {
	margin-bottom: 0.5em;
}
#contents div.WGS_detail ol.WGS_step img {
	vertical-align: middle;
}

/*---Next/Back button---*/
#contents div.WGS_contents div.WGS_next_button,
#contents div.WGS_contents div.WGS_back_button {
	position: absolute;
	top: 130px;
	z-index: 250;
}
#contents div.WGS_contents div.WGS_next_button:hover,
#contents div.WGS_contents div.WGS_back_button:hover {
	cursor: pointer;
}
#contents div.WGS_contents div.WGS_next_button img,
#contents div.WGS_contents div.WGS_back_button img {
	width: 30px;
	height: 44px;
}
#contents div.WGS_contents div.WGS_next_button {
	/* right: 0; */
}
#contents div.WGS_contents div.WGS_back_button {
	/* left: 0; */
}
/*---Modal Window---*/
/* common */
#WGS_modal_bg {
	display: none;
	width: 100%;
	height: 100%;
	background-color: #cccccc;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	/* left: 0; */
	z-index: 1999;
}
#container div.WGS_modal_main {
	display: none;
	width: 80%;
	max-height: 80%;
	padding: 0 1em 1em 1em;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	color: #666666;
	position:fixed;
	z-index: 2000;
	overflow: auto;
}
#container div.WGS_modal_close_button {
	position: fixed;
	width: 76%;
	padding: 1em 0;
	/* text-align: right; */
	background-color: #ffffff;
	z-index: 2001;
}
#container div.WGS_modal_close_button a {
	display: inline-block;
}
#container div.WGS_modal_close_button a:hover {
	cursor: pointer;
}
#container div.WGS_modal_main div.modal_contents_main {
	margin-top: 3.2em;
	/* margin-right: 1.5em; */
}
#container div.WGS_modal_main ul.WGS_modal_list_b {
	list-style-type: disc;
	/* padding-left: 2em; */
}
#container div.WGS_modal_main ul.WGS_modal_list_b li {
	margin-bottom: 1em;
}
#container div.WGS_modal_main ul.WGS_modal_list_b li p.WGS_headword{
	font-weight: bold;
}
#container div.WGS_modal_main ol {
	list-style-type: decimal;
	margin-left: 1.5em;
	margin-right: 1.5em;
}
#container div.WGS_modal_main ol>li {
	margin-bottom: 1em;
}
#container div.WGS_modal_main ol>li img {
	vertical-align: middle;
}
#container div.WGS_modal_main ol li span.WGS_connect_url {
	font-size: 1.3em;
	color: #cacaca;
}
#container div.WGS_modal_main ol li span.WGS_strong,
#container div.WGS_modal_main ul li span.WGS_strong { /* from 22A */
	/* font-weight: bold; */
	/* font-style: italic; */
}
#container div.WGS_modal_main ol.WGS_step_list_modal {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
#container div.WGS_modal_main ul li.WGS_modal_list_margin {
	margin-bottom: 1em;
}
#container div.WGS_modal_main p img { /* from 23A */
	max-width: 90%;
}
/* from 22A */
#container div.WGS_modal_main ul.WGS_modal_list li img {
	max-width: 90%;
	/* margin: 0.5em 0.5em 0.5em 0; */
}
#contents div.WGS_modal_main ul.WGS_modal_list_note {
	font-size: 0.9em;
}
#contents div.WGS_modal_main p.WGS_modal_img img { /* from 23A */
	width: 95%;
	max-width: 250px;
}

#contents div.WGS_modal_main p img.WGS_inline_img { /* from 25A */
	vertical-align: bottom;
}

#contents div.WGS_modal_main p.WGS_modal_contents_center { /* from 25A */
	text-align: center;
}
#contents div.WGS_modal_main p.WGS_modal_contents_center img { /* from 25A */
	margin-top: 0.5em;
}

/**********************************************************************************/
@media screen and (min-width: 375px) {
	/*===contents===*/
	/*---Step title---*/
	#contents h1.WGS_h1 {
		font-size: 1.8em;
		margin: 0.4em 0.5em 0.3em 0.5em;
	}
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 1em 30px;
	}
	/*---Detail---*/
	#contents div.WGS_setup_step div.WGS_detail {
		max-width: 85%;
		width: auto;
	}
	#contents div.WGS_setup_step div.WGS_detail ol.WGS_step,
	#contents div.WGS_setup_step div.WGS_detail p.WGS_lead {
		font-size: 1.2em;
	}
	#contents div.WGS_setup_step div.WGS_detail p.WGS_step_note {
		font-size: 0.8em;
	}
}

/**********************************************************************************/
@media screen and (min-width: 480px) {

	/*===Header===*/
	#header {
		/* padding: 0.3em 0.5em 0.3em 0.5em; */
	}
	#header div.WGS_logo_title {
		min-width: calc(130px + 3em);
	}
	#header p.WGS_header_title {
		/* padding-left: 15px; */
	}
	/*---Step Bar---*/
	#header ul.WGS_steps {
		margin-top: 0.7em;
	}
	#header ul.WGS_steps li {
		margin-left: 3px;
		margin-right: 3px;
		width: 20px;
		height: 20px;
	}
	#header ul.WGS_steps li:before {
		/* left: -11px; */
		width: 11px;
	}
	/*---Step title---*/
	#contents h1.WGS_h1 {
		margin: 1.2em 1em 0.3em 1em;
	}
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 1.5em 30px;
	}	
	/*---Detail---*/
	#contents div.WGS_setup_step div.WGS_detail ol.WGS_step,
	#contents div.WGS_setup_step div.WGS_detail p.WGS_lead {
		font-size: 1em;
	}
	#contents div.WGS_setup_step div.WGS_detail p.WGS_step_note {
		font-size: 0.9em;
	}
	/*---Modal Window---*/
	#container div.WGS_modal_close_button {
		width: 78%;
	}
	#contents div.WGS_modal_main p img.WGS_inline_img { /* from 25A */
		vertical-align: top;
	}
}

/**********************************************************************************/
@media screen and (min-width: 600px) {
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 1.5em 50px;
	}	
	/*---Next/Back button---*/
	#contents div.WGS_contents div.WGS_next_button,
	#contents div.WGS_contents div.WGS_back_button {
		top: 190px;
	}
	#contents div.WGS_contents div.WGS_next_button img,
	#contents div.WGS_contents div.WGS_back_button img {
		width: 40px;
		height: 60px;
	}
}

/**********************************************************************************/
@media screen and (min-width: 700px) {
	/*===Header===*/
	#header div.WGS_logo_title {
		display: table;
	}
	#header p.logo {
		display: table-cell;
	}
	#header p.logo img {
		vertical-align: middle;
	}
	#header p.WGS_header_title {
		display: table-cell;
		vertical-align: middle;
		font-size: 1.2em;
		color: #666666;
		/* padding-left: 0; */
	}
	/*---Step Bar---*/
	#header ul.WGS_steps {
		margin-top: 0.5em;
		/* margin-left: 3em; */
	}
	#header ul.WGS_steps li {
		margin-top: 2px;
		margin-bottom: 2px;
	}
	
	/*===Contents===*/
	#contents div.WGS_contents {
		min-height: 330px;
	}
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 5em 50px;
	}
	
	/*---Detail---*/
	#contents div.WGS_setup_step div.WGS_detail ol.WGS_step,
	#contents div.WGS_setup_step div.WGS_detail p.WGS_lead {
		font-size: 1.1em;
	}
	/*---Next/Back button---*/
	#contents div.WGS_contents div.WGS_next_button,
	#contents div.WGS_contents div.WGS_back_button {
		top: 130px;
	}
	/*---Modal Window---*/
	#container div.WGS_modal_main {
		width: 600px;
	}
	#container div.WGS_modal_close_button {
		width: 580px;
	}
}
/**********************************************************************************/
@media screen and (min-width: 1024px) {
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 3em 50px;
	}
	/*---Next/Back button---*/
	#contents div.WGS_contents div.WGS_next_button,
	#contents div.WGS_contents div.WGS_back_button {
		top: 180px;
	}
}
/**********************************************************************************/
@media print {
	#header ul.WGS_steps,
	#contents div.WGS_contents div.WGS_next_button,
	#contents div.WGS_contents div.WGS_back_button {
		display: none !important; /* For print */
	}
/************375px************/
	/*---Step title---*/
	#contents h1.WGS_h1 {
		font-size: 1.8em;
		margin: 0.4em 0.5em 0.3em 0.5em;
	}
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 1em 30px;
	}
	/*---Detail---*/
	#contents div.WGS_setup_step div.WGS_detail {
		max-width: 85%;
		width: auto;
	}
	#contents div.WGS_setup_step div.WGS_detail ol.WGS_step,
	#contents div.WGS_setup_step div.WGS_detail p.WGS_lead {
		font-size: 1.2em;
	}
	#contents div.WGS_setup_step div.WGS_detail p.WGS_step_note {
		font-size: 0.8em;
	}
/************480px************/
	/*===Header===*/
	#header {
		padding: 0.3em 0.5em 0.3em 0.5em;
	}
	#header ul.WGS_steps li {
		margin-left: 3px;
		margin-right: 3px;
		width: 20px;
		height: 20px;
	}
	#header ul.WGS_steps li:before {
		left: -11px;
		width: 11px;
	}
	/*---Step title---*/
	#contents h1.WGS_h1 {
		margin: 1.2em 1em 0.3em 1em;
	}
	#contents div.WGS_contents div.WGS_step_prepare,
	#contents div.WGS_contents div.WGS_step_connect {
		margin: 1.5em 30px;
	}	
	/*---Detail---*/
	#contents div.WGS_setup_step div.WGS_detail ol.WGS_step,
	#contents div.WGS_setup_step div.WGS_detail p.WGS_lead {
		font-size: 1em;
	}
	#contents div.WGS_setup_step div.WGS_detail p.WGS_step_note {
		font-size: 0.9em;
	}
	/*---Modal Window---*/
	/* For Print */
	#container div.WGS_modal_main {
		width: 450px;
		max-height: none; /* from 23A */
		position: absolute;
		top: 0 !important; /* from 23A */
		/* left: 0; */
	}
	#container div.WGS_modal_close_button {
		width: 430px;
		position: absolute;
	}
}