@charset "utf-8";
/* 
CSS Information
 File name:      guide.css
 Author:         Administrator
 Style Info:     /guide/
----------------------------------------------------- */
/* CSS override and Class setting
***********************************/

/* #guide
***********************************/
.step {
	position: relative;
	padding-bottom: 30px;
	margin: 0 50px;
}

.step + .step {
	margin-top: 70px;
}

.step + .step::before {
	content: url(../img/guide/icon_arrow.gif);
	position: absolute;
	top: -70px;
	left: 50%;
	margin-left: -30px;
}

.step dl {
	min-height: 205px;
	margin-right: 320px;
}

.step dt {
	position: relative;
	min-height: 45px;
	padding: 5px 10px 5px 70px;
	margin-bottom: 5px;
	border: 1px solid #00b611;
	font-size: 131%;
	font-weight: bold;
	color: #3a9701;
	text-align: center;
}
.step.meet dt {
	border-color: #41acc4;
	color: #1297b5;
}
.step.plesure dt {
	border-color: #ff600a;
	color: #ff600a;
}
.step.finish dt {
	border-color: #e42525;
	color: #e42525;
}

.step dt::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 100%;
	background: #00b611 url(../img/guide/icon_step02.png) no-repeat center;
}
.step.meet dt::before {
	background-color: #41acc4;
	background-image: url(../img/guide/icon_step01.png);
}
.step.plesure dt::before {
	background-color: #ff600a;
	background-image: url(../img/guide/icon_step03.png);
}
.step.finish dt::before {
	background-color: #e42525;
	background-image: url(../img/guide/icon_step04.png);
}

.step dd {
	padding: 5px;
	margin-bottom: 5px;
	border: 1px solid #FFD9E6;
	background: #FBF2F3;
}

.step .thumbs li {
	float: left;
	width: 130px;
	margin-right: 10px;
}

.step .thumbs li img {
	max-width: 100%;
}

.step .mainphoto {
	position: absolute;
	top: 0;
	right: 0;
	width: 305px;
	height: 205px;
}

.step .bar {
	height: 45px;
	line-height: 45px;
	margin: 10px 0;
	background: url(../img/guide/bg_bar.gif) no-repeat center;
	text-align: center;
	font-size: 116%;
	font-weight: bold;
}

.info_box {
	padding: 20px 40px;
	margin-bottom: 30px;
	border: 1px solid #E7E7E7;
	background: #f7f7f7;
}

.info_box .push {
	margin-bottom: 15px;
	color: #c00;
	text-align: center;
	font-weight: bold;
}

.info_box .ttl {
	padding-bottom: 5px;
	margin-bottom: 15px;
	border-bottom: 1px solid #333;
	font-weight: bold;
}

.info_box .ttl::before {
	content: "＞＞";
}

.info_box table {
	width: 100%;
	margin-bottom: 15px;
}

.info_box table th,
.info_box table td {
	padding: 5px 10px;
	border-bottom: 5px solid #F7F7F7;
	vertical-align: middle;
	text-align: left;
	font-weight: bold;
}

.info_box table th {
	width: 35%;
	background: #666;
	color: #fff;
}

.info_box table td {
	background: #fff;
}

.info_box.text_area dt {
	color: #900;
}

.info_box.text_area dd li {
	margin-bottom: .5em;
	font-size: 93%;
}

.info_box.text_area dd li strong {
	color: #f60;
	font-weight: bold;
}

.profile .ttl {
	margin-bottom: 15px;
	font-weight: bold;
}

.profile table {
	width: 100%;
	margin-bottom: 15px;
}

.profile table th,
.profile table td {
	padding: 3px 5px;
	border: 1px solid #ccc;
	vertical-align: middle;
	text-align: left;
	font-size: 93%;
}

.profile table th {
	width: 20%;
	background: #666;
	color: #fff;
}