@charset "utf-8";
/**
 * base.css 
 * (c) FOURDIGIT Inc.
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag, siteCommonClass
 * 4. Layout
 *
 */
/**
 * 1. import
 */

/* initialize */
	@import "ext/reset.css";

/* baselayout */
	@import "ext/layout/2col-main-aside.css";
/*@import "ext/layout/2col-aside-main.css";*/
/*@import "ext/layout/1col.css";*/

	@import "ext/fonts/sans-serif.css";
	@import "ext/fonts/typograph.css";

/* extension */
	@import "ext/util/accessibility.css";
	@import "ext/util/logtag.css";
	@import "ext/util/fnav/center.css";
	@import "ext/util/box.css";
	@import "ext/util/clearfix.css";
	@import "ext/util/float.css";
	@import "ext/util/margin-padding.css";
	@import "ext/util/nav.css";
	@import "ext/util/textalign.css";
	@import "ext/util/wrapper.css";

/**
 * 2. html, body
 */

/* html */
	html {
		overflow: auto;
	}
/* body */
	body {
		padding-bottom: 0;
	}
	
/* .page */	
	.page {
		margin: 0 auto;
		font-size: 14px;
		line-height: 1.5;
	}


/**
 * 3. HTMLtag, siteCommonClass
 */
 
/* common */
	.wrapper {
		width: 920px;
		margin: 0 auto;
	}
	.s-font {
		font-size: 84%;
		line-height: 1.6;
	}
	.ss-font {
		font-size: 78%;
		line-height: 1.6;
	}
	.col3 {
		width: 293px;
		margin-left: 20px;
		float: left;
	}
	.col3.first {
		margin-left: 0px;
	}

/* contents */
	div#includeContainer {
		background-color: #fff;
	}
	div#includeContents {
		color: #302206;
		font-family: Verdana, Geneva, sans-serif;
	}
	div#includeContents a {
		color: #ff0000;
		text-decoration: underline;
	}
	div#includeContents a:hover {
		text-decoration: none;
	}
	

/* header */
	div#gHeader {
		padding: 15px 0;
		background: #000;
		zoom: 1;
	}
	div#gHeader .logo {
		float: left;
	}
	div#gHeader .headerLinkArea {
		width: 305px;
		float: right;
	}
	div#gHeader .headerLink {
		width: 206px;
		margin-bottom: 10px;
		float: right;
	}
	div#gHeader .headerSubNavi ul {
		width: 291px;
		float: right;
	}
	div#gHeader .headerSubNavi ul li {
		float: left;
	}
	
/* languageSelectArea */
	#languageSelectArea {
		width: 960px;
		padding-top: 15px;
		margin-right: auto;
		margin-left: auto;
		text-align: right;
	}

/* main */
	div#mainContent {
		padding-top: 50px;
		padding-bottom: 100px;
	}
	div#mainContent .mainImage {
		margin-bottom: 60px;
		text-align: center;
	}
	div#mainContent div.contentSection {
		padding-top: 15px;
		padding-bottom: 60px;
		background: url(../imgs/k.gif) repeat-x left top;
	}
	div#mainContent .sectionTitle {
		margin-bottom: 30px;
	}
	div#mainContent .deviceList {
		margin-bottom: 15px;
		zoom: 1;
	}
	div#mainContent .deviceList .title {
		height: 60px;
		margin-bottom: 10px;
		position: relative;
	}
	div#mainContent .deviceList .title .abs {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	#section01 .fl {
		width: 235px;
		margin-right: 20px;
	}
	#section01 .textArea {
		float: left;
		width: 410px;
	}
	#section01 .fr {
		width: 235px;
	}
	#section01 .movieArea {
		float: left;
		width: 665px;
	}
	#section01 .movieCapArea {
		float: right;
		padding: 15px 20px;
		background: #988172;
	}
	#section01 .movieCapArea p {
		width: 215px;
		height: 345px;
		color: #ffffff;
		font-size: 93%;
		line-height: 1.6;
	}
	
	#section02 .fl {
		width: 312px;
	}
	#section02 .fr {
		width: 588px;
	}
	
	div.brownBox {
		background: #988172;
		padding: 30px;
	}
	div.brownBox p {
		width: 270px;
		color: #ffffff;
	}
	ul.songList {
		margin-bottom: 30px;
		padding-left: 15px;
		color: #988172;
		font-size: 105%;
	}
	ul.songList li {
		margin-bottom: 10px;
		list-style: disc;
	}
	div.w460 {
		width: 460px;
	}
	
/* footer */
	div#gFooter {
		padding: 15px 0 10px;
		background: #000;
	}
	div#gFooter .footerSubNavi {
		float: left;
	}
	div#gFooter .footerSubNavi ul {
		width: 190px;
	}
	div#gFooter .footerSubNavi ul li {
		float: left;
	}
	div#gFooter .copyright {
		float: right;
	}

/* lower */
	div.mainHeader {
		width: 960px;
		margin: 0 auto 30px;
	}
	div.caseNavigation ul {
		margin-bottom: 30px;
/* 		border-bottom: 4px solid #302206; */
		position: relative;
	}
	div.caseNavigation ul li {
		display: block;
/* 		margin-bottom: -4px;
		*margin-bottom: -6px; */
		float: left;
	}
	#lower div#mainContent div.contentSection {
		padding: 20px 0;
		background-position: left bottom;
	}
	#lower div#mainContent div.contentSection#step1 {
		padding-top: 0px;
	}
	#lower div#mainContent div.contentSection .stepImage {
		margin-right: 30px;
		float: left;
	}
	#lower div#mainContent div.contentSection .stepText {
		width: 460px;
		float: left;
		font-size: 112%;
	}
	#lower div#mainContent div.contentSection .stepText strong {
		font-size: 120%;
	}
	#lower div#mainContent div.contentSection .stepText .s-font {
		font-size: 70%;
	}