/*-----------------------------------------------------------
	VARIABLE
	-----------------------------------------------------------*/
	@light-blue: #6699cc;
	@deep-blue: #336699;
	@content-width:940px;

	.border-radius (@radius) {
		-moz-border-radius: @radius;
		-webkit-border-radius: @radius;
		border-radius: @radius;
	}
	.text-shadow{
		text-shadow:1px 1px 1px #cccccc;
	}
	.border-gray{
		border:1px solid #cccccc;
	}
/*-----------------------------------------------------------
	STEP
	-----------------------------------------------------------*/
/*----- clock common -----*/
body.index,
body.use,
body.about {
	div.two_column {
		width: 100%;
		overflow: auto;
		zoom: 1;

		.left02 {
			width: 620px;
			padding: 10px 20px;
			float: left;
		}
		.right02 {
			width: 220px;
			margin: 10px 0;
			float: right;
			padding-right: 0;
		}
	}
}
/*----- end clock common -----*/

body.index {
	#content_header {
		background-color:#99ccff;
		border-radius:10px 10px 0 0;
		height: auto;
		padding-bottom: 20px;
	}

	.app_container {
		padding:0 20px;
		color:#ff3333;
		width: 750px;
		margin: 0 auto;

		dl.available_at {

			dt {
				padding-right: 3px;
				padding-top: 0;
			}

			dd {
				padding-top: 1px;
				width: 400px;
			}

		}

		h1 {
			padding: 5px 0 40px;
			text-align: center;

			img#under_page_ttlImg {
				width:150px;
				margin-right: 30px;
				padding-right: 30px;
				border-right: 3px solid #6699cc;
			}

			span {
				color: #ff6803;
			}

		}

		.intro {
			overflow: hidden;
			height: 350px;

		}

		.intro .desc {
			float: left;
			width:528px;
			padding-right: 20px;
			color:@deep-blue;
		}

		.new {
			height: 44px;
			background: url(/images/badge_new_slider.png) left 50% no-repeat;
			margin-bottom: 0;
			pading-top: 0;
			padding-left: 52px;
			color: #60a021;
			text-shadow: none;
			font-weight: bold;
			font-size: 16px;
			line-height: 1.6;
		}
		.visual {

			img {
				border: 1px solid #336699;
			}
		}

		h2 {
			color:@deep-blue;
			font-weight: bold;
			font-size: 18px;
		}
		}/* .app_container */

	#content{

		#about_step{
			color:@deep-blue;
			background-color:#ffffff;
			border-radius:0 0 8px 8px ;
			margin-bottom: 30px; 
			padding:30px 35px 5px 35px;

			a:link, a:hover, a:active, a:visited {
				color: #ff6803;
			}

			.row{
				margin-bottom:30px;
				padding-bottom: 5px;
				overflow: hidden;

				h1{
					font-size:28px;
					margin-bottom:30px;
				}

				p {
					font-size: 16px;
				}

	    	img{
	    		width:150px;
	    		border: 1px solid #336699;
		    	}

				p.desc{
					font-size:15px;
					line-height:1.6;
					margin-bottom: 10px;
				}

				.about_wrap{
		    	color:@deep-blue;
		    	width: 275px;
		    	float: left;
		    	margin-right: 20px;

					h3{
						background:url('../images/icon_ring.png') no-repeat left 50%;
						padding-left:30px;
						font-size:22px;
						font-weight:bold;
						vertical-align:center;
					}

		    	h3 {
		    		height: 40px;
		    		margin-bottom: 15px;
		    		font-size: 16px;
		    	}
					h3.icon01 {
						background:url('../images/step_about_logo01.png');
					}
					h3.icon02 {
						background:url('../images/step_about_logo02.png');
					}
					h3.icon03 {
						background:url('../images/step_about_logo03.png');
					}
		    	h3.icon01, h3.icon02, h3.icon03 {
		    		background-position: top 10px;
		    		background-repeat: no-repeat;
						background-size: 24px;
		    	}

		    	p {
		    		float: left;
		    		height: 120px;
		    	}

		    }
				.about_wrap:last-child{
					margin-right: 0;
				}

		  }/* .row */
			.movie_wrap{
				margin-bottom: 50px;
				padding: 20px 30px;
				border-radius: 8px;
				background-color: #fee2d8;

				p {
					width: 640px;
					padding-left: 0;
					list-style-type: none;
					margin: 0 auto;
				}

			}/* .movie_wrap */
			.movie_wrap:last-child{
				margin-bottom: 10px;
			}
		}
	}/* #content */
}

body.about {
	#content {
		#about_wrap {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
}