@charset "utf-8";

@import url("https://www.mag2.com/css/mag-unit.css");

/* COMMON */
html {
	overflow-y: scroll; /* CSS3 */
	color: #555555;
}

img {
	border: none;
}

ol,ul {
	list-style: none;
}

/* OUTLINE */
#outline {
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

#container {
	margin: 0 auto;
	width: 928px;
	text-align: center;
}

/* HEADER */
#header {
	margin: 0 auto 30px;
	padding: 15px 0 10px;
	border-bottom:dotted 1px #333333;
	width: 928px;
	text-align: left;
}


/* CONTENT */
#content {
	margin: 0 auto 30px;
	width: 782px;
	text-align: left;
}

#content #title {
	width: 782px;
	height: 60px;
	background: url("../img/bg_top.gif") no-repeat 0 0;
}

#content #title h2 {
	padding-top: 20px;
	padding-left: 15px;
	float: left;
	color: #fff;
	font-weight: bold;
	font-size: 160%;
}

#content #title #step-list {
	padding-top: 8px;
	padding-left: 15px;
	float: left;
	font-weight: bold;
}

#content #title #step-list li {
	padding: 0 15px 0 5px;
	border-bottom: solid 7px #fff;
	float: left;
	height: 37px;
	background: url("../img/step_arrow.png") no-repeat right center;
	text-align: center;
}

#content #title #step-list li p {
	padding-top: 12px;
	font-weight: bold;
}

#content #title #step-list .arrow_on {
	border-color: #0071bc;
	background-image: url("../img/step_arrow_on.png");
}

#content #title #step-list #step-1 {
	padding-left: 0;
}

#content #title #step-list #step-last {
	padding-right: 0;
	background-image: none;
}

* html #content #title #step-list #step-last {
	height: 41px;
}

#content #title p.ssl {
	margin-top: 20px;
	padding: 7px 15px 0 23px;
	float: right;
	height: 20px;
	color: #fff;
	background: url("../img/icon_ssl.gif") no-repeat 0 center;
	font-weight: bold;
}

#content #main {
	border-left: solid 1px #333;
	border-right: solid 1px #333;
	width: 780px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

* html #content #main {
	width: 780px;
}


/* MAIN */
#main h3 {
	padding-bottom: 40px;
	font-weight: bold;
	font-size: 120%;
}

#main .contL {
	padding: 20px 15px 25px 15px;
	border-right: dotted 1px #333;
	float: left;
	width: 360px;
	text-align: left;
}

#main .contL ul {
	margin-left: 10px;
}

#main .contL li {
	margin-bottom: 20px;
	line-height: 1.5;
}

#main .contL input {
	padding: 0;
}

#main .contL input#username,
#main .contL input#userpass{
	width: 345px;
	height: 20px;
}

#main .contL .control,
#main .contL .golink {
	text-align: right;
}

#main .contR {
	padding: 20px 0 20px 15px;
	float: left;
	width: 360px;
	text-align: left;
}

#main .contR ul {
	margin-left: 10px;
}

#main .contR li {
	margin-bottom: 10px;
	line-height: 1.5;
}

#main .contR li.btn_next {
	text-align: right;
}

#main .contB {
	padding: 25px 20px 15px;
	clear: both;
	background-color: #f2f2f2;
	text-align: right;
}

#main .main_cont {
	padding: 20px 15px;
	text-align: center;
	text-align: left;
}

#main .main_cont .item-list {
	margin-bottom: 30px;
	text-align: center;
}

#main .main_cont .item-list dt {
	margin-bottom: 15px;
	font-weight: bold;
	text-align: left;
	line-height: 1.3;
}

#main .main_cont .item-list dt.sub-title {
	margin-bottom: 40px;
}

#main .main_cont .item-list dt.sub-title2 {
	margin-bottom: 40px;
	font-size: 153%;
	text-align: center;
}

#main .main_cont .item-list dt.sub-title3 {
	margin-bottom: 5px;
	font-size: 153%;
	text-align: center;
}

#main .main_cont .item-list dt.sub-title4 {
	margin-bottom: 5px;
	font-size: 120%;
	text-align: center;
}

#main .main_cont .item-list dt span {
	font-weight: normal;
	line-height: 2;
}

#main .main_cont .item-list .mail_img {
	text-align: center;
}

#main .main_cont .item-list dd {
	margin: 0 auto 15px;
	border-bottom: dotted 1px #333;
	width: 640px;
	text-align: left;
}

#main .main_cont .item-list dd.no_border {
	border: none;
}

#main .main_cont .item-list dd label {
	margin-bottom: 15px;
	padding-left: 24px;
	float: left;
	width: 165px;
	height: 18px;
	background: url("../img/point.gif") no-repeat 0;
	font-weight: bold;
}

#main .main_cont .item-list dd label.checkbox {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	height: auto;
	background-image: none;
}

#main .main_cont .item-list dd div {
	float: left;
	width: 447px;
}


#main .main_cont .item-list dd input,
#main .main_cont .item-list dd select {
	margin-bottom: 7px;
	padding: 0;
}

#main .main_cont .item-list input.survey {
	text-align: center;
}

#main .main_cont .item-list dd .wide {
	width: 100%;
	height: 20px;
}

#main .main_cont .item-list dd .year,
#main .main_cont .item-list dd .month,
#main .main_cont .item-list dd .day {
	width:  38px;
	height: 20px;
}

#main .main_cont .item-list dd .mag_point {
	margin-left: 190px;
}

#main .main_cont .item-list dd .mag_point li {
	margin-bottom: 10px;
}

#main .main_cont .notes {
	margin: 30px 0;
	text-align: center;
	font-size: 93%;
	line-height: 1.4;
}

#main .main_cont .notes2 {
	margin-top: 30px;
	text-align: center;
	font-size: 93%;
	line-height: 1.4;
}

#main .main_cont .item-list .caution {
	margin-bottom: 15px;
	font-size: 93%;
	line-height: 1.4;
}

#main .main_cont .control {
	text-align: center;
}

#main .main_cont .control .get {
	margin: 0 10px 4px 0;
}

#main .main_cont .mypage_link {
	margin: 20px auto 10px;
	width: 640px;
	text-align: right;
}

#main .main_bottom {
	padding: 15px 15px 5px;
	background-color: #f2f2f2;
	text-align: left;
}

#main .main_bottom dt {
	color: #f03;
	font-weight: bold;
}

#main .main_bottom dd {
	margin-top: 10px;
	font-size: 93%;
}

#main .main_bottom dd span {
	color: #0071bc;
}


/* MAG-LIST */
.title_bar {
	margin-bottom: 10px;
	padding: 5px 0;
	color: #fcee21;
	background: #0071bc;
	font-weight: bold;
	font-size: 138%;
	text-align:center;
}

#mag-list {
	margin: 0 auto;
	padding-bottom: 10px;
	width: 550px;
	text-align: left;
}


/* FOOTER */
#footer,
#footer address {
	position: relative;
	background-image: url("../img/dot-black.png");
	background-repeat: repeat-x;
}

#footer {
	background-position: 0 0;
	text-align: center;
}

#footer ul {
	padding: 5px 0;
}

#footer ul li:first-child,
#footer ul li.first-child {
	padding-left: 0;
	background-image: none;
}

#footer ul li {
	padding-left: 8px;
	display: inline;
	background: url("../img/par.png") no-repeat 0;
}

#footer address {
	padding: 5px 0;
	color: #666;
	background-position: 0 0;
	text-align: right;
}

#footer address span {
	margin-right: 0.5em;
}

#footer address p {
	margin-left: 0.5em;
	display: inline;
}

#footer li.set a {
	color: #f00;
}


/* HEADER */
div#container div#header {
	margin: 0 auto 30px;
	padding: 15px 0 10px;
	border-bottom:dotted 1px #333333;
	position: relative;
	background-repeat: repeat-x;
}

div#container div#footer {
	margin: 0 auto 30px;
	padding: 15px 0 10px;
	border-top:dotted 1px #333333;
	position: relative;
	background-repeat: repeat-x;
}


#header {
	background-position: 0 100%;
}

#header ul li {
	position: absolute;
	bottom: 6px;
}

#header ul li#mypage {
	left: 155px;
}

#header ul li#mypage-assist {
	left: 250px;
	font-size: 85%;
}

#header ul li#beginner {
	right: 0;
}

#header #log-info {
	position: absolute;
	right: 0;
	bottom: 6px;
}

#header #log-info strong {
	font-weight: bold;
	font-size: 108%;
}

/* OTHER */
dd.alert .text,
dd.alert select,
dd.alert textarea {
	color: #000 !important;
	background-color: #fdd !important;
}

dd.alert label {
	background-image: url("../img/alert.png") !important;
}

#content span.caution,
#content .error {
	color: #f00;
}